昨日收集 – 我，离用户有多远?
2007-4-29
Tagged: 网站设计 RSS
-
94smart
-
94smart
昨日收集 – 体验之美 兼记录一下5大UE心得
2007-4-21
- 别让内容成为水泥- 郑治 – 新浪BLOG
- Design Checkpoints初试- amizhang – 新浪BLOG
- web2.0是互联网上的现代主义 – 臭鱼的交互设计
- 网页一屏有多大？(zt)
- 追踪读品(不是毒品)
- 《引爆流行》和《长尾理论》的流行悖论–麦田的读书生活
- 体验之美 兼记录一下5大UE心得- 徐志斌 – 新浪BLOG
- 软件的用户配置信息 at E-space
-
94smart
用XHTML+CSS实现文章列表标题时间对齐
今天要查LCD的资料，跑到PConline去看，看到他们的文章列表觉得效果还好，如图：
无意间发现文章列表的页面代码写得很奇怪，首先他们用ul做文章列表这没错，接着又用另一个ul来放时间，之后用一个table把两部分拼起来，做成列表标题和时间都对齐的效果，如下（稍微调整了一下）：
<table width="97%" cellspacing="5" cellpadding="0" border="0" align="center">
<tr>
<td width="85%"><ul>
<li>· <a href="javascript:;">[北京]暴跌千元!32寸HDMI接口液晶电视仅3999</a> </li>
<li>· <a href="javascript:;">[北京]封杀国产!飞利浦42寸液晶迅猛跌破9000</a> </li>
<li>· <a href="javascript:;">[广州]再降1000 三星40寸LA40F71B售价21999元</a> </li>
<li>· <a href="javascript:;">[北京]国产已成往事!LG高端IPS屏液晶跌破8000</a> </li>
<li>· <a href="javascript:;">[北京]世界顶级面板!三星40寸液晶电视欲破万</a> </li>
<li>· <a href="javascript:;">[北京]LG低价埋葬国产!42英寸可录像液晶疯降</a> </li>
</ul></td>
<td width="15%"><ul>
<li>[ 02-28 ]</li>
<li>[ 02-27 ]</li>
<li>[ 02-27 ]</li>
<li>[ 02-26 ]</li>
<li>[ 02-26 ]</li>
<li>[ 02-12 ]</li>
</ul></td>
</tr>
</table>可以看出废码那是相当的多，而且语义很混乱，其实一个ul就够了，配合CSS做出对齐效果很简单，以下是我给出的代码：
<style type="text/css">
.list{
width:398px;
font-size:12px;
float:left;
}
.list ul{
display:block;
margin:0px;
padding:0px;
width:100%;
float:left;
}
.list ul li{
text-align:left;
display:block;
width:100%;
margin:2px 0px;
padding:0px;
list-style-position:inside;
float:left;
}
.list ul li a{
float:left;
display:block;
}
.list ul li span{
font-size:12px;
display:block;
float:right;
}
</style><div class="list">
<ul>
<li><a href="javascript:;">[北京]暴跌千元!32寸HDMI接口液晶电视仅3999</a> <span>[ 02-28 ]</span></li>
<li><a href="javascript:;">[北京]封杀国产!飞利浦42寸液晶迅猛跌破9000</a> <span>[ 02-27 ]</span></li>
<li><a href="javascript:;">[广州]再降1000 三星40寸LA40F71B售价21999元</a> <span>[ 02-27 ]</span></li>
<li><a href="javascript:;">[北京]国产已成往事!LG高端IPS屏液晶跌破8000</a> <span>[ 02-26 ]</span></li>
<li><a href="javascript:;">[北京]世界顶级面板!三星40寸液晶电视欲破万</a> <span>[ 02-26 ]</span></li>
<li><a href="javascript:;">[北京]LG低价埋葬国产!42英寸可录像液晶疯降</a> <span>[ 02-12 ]</span></li>
</ul>
</div>上面代码的div是用来从外层控制列表样式的，可以用其他块级元素替换，li里面的span用来放时间，也可以使用div等元素替换，另外其他所需的样式（如标题前的点）都可以用CSS定义，灵活度上升不少，不知道这样实现算不算是Unobtrusive的？
94smart, and 
94smart
Axure RP Pro 4.4.0.741新鲜发布
以前介绍过Axure RP Pro，当时版本是4.2，在试用期那段时间里用得那叫一个爽，后来因为修改系统时间，直接就被禁用了，郁闷。
今天早上收到Axure的信，Axure RP Pro 4.4.0.741正式版已经发布，赶紧下载一个，终于可以接着用了，4.4的功能列表在这里。
看来除了花589美刀买序列号之外，还有一种办法可以继续用Axure，那就是在Axure不停升级开发的前提下，不断换用Axure的新版，谁叫我没钱呢~
Axure RP Pro 4.4.0.741下载地址：http://www.axure.com/downloads.aspx
网友, 
-
Caiwangqin
好主意啊，求急了。
-
94smart
用新版做新东西应该是个不错的主意~
-
莫渔
这是个好东西
-
网友
Axure RP Pro v4.4.1.745 注册版
http://www.3ddown.com/soft/34.htm
94smart
Axure的RP不是一般的好
先感谢木的{moond}，要不是一次提供了那么多画原型图的工具，我现在还在Word和Visio里面打转呢。
这些软件能试用的我差不多都用了一下，其中觉得Axure的RP Pro 4挺好的，功能包括站点地图、流程设计、页面框架设计、简单交互设计等，可以生成HTML、Word等格式。
RP操作比用Dreamweaver简单多了，图片、文字、输入框等等所有组件全是可视化操作，可以很方便的实现网站交互内容的原型设计，可将以前死板的页面版式全部替换为有点击、链接效果的网页，nice~
同时可以为网站设计提供AJAX式的交互处理，RP提供一种动态层的组件，在同一页设定不同状态的效果，然后用链接、按钮等触发即可产生动态效果，这样网站设计就变得更加生动，意图也就更加直观。
可惜，这么好的软件只能试用30天，哪位兄台要是有解决方法一定要通知我，这里先谢了~
漫无目的, 
-
zeal
绝对有效的解决方法：买正版
-
94smart
嘿，我还是用土办法：改系统时间好了。
94smart
今天用了修改时间这个土办法，结果发现一点都没用，而且把我仅剩几天的试用期也给搞掉了，看到的互相转告，不要轻易尝试！
网友
Axure RP Pro v4.4.1.745 注册版
http://www.3ddown.com/soft/34.htm
lisa
要是兄台有中文版的使用说明，给俺一份吧，感激涕零 、、、、动态层用不到位
94smart
不好意思，中文版的使用说明我就没有了
scorpioo
licence：3ddown
key：FiCGEezgdGoYILo8U/2MFyCWj0jZoJc /sziRRj2/ENvtEq+7w1RH97k5MWctqVHA
94smart
多谢scorpioo，不过上面的网友已经提供过了
许珂
用google翻译看在线教程,再结合金山词霸试一试组件的功能就明白了
iHao
经过三天的试用确实让我相见恨晚,引用淘宝ued的话:谁用谁知道啊!
iceberg
值得一试
HOHO
百度一下，会有的。
软件下载：http://axure.cachefly.net/AxureRP-Pro-Setup.exe
注册码：Name：yaolanwang
Serial：ogj1xp3rOKIyiMCh0w9ZIlujXKeBOE0CeuEjX2yNfDnO1IsJd3xdd7jMSe/iO2Ly
孙波
刚用，也来赞。
漫无目的
我运行不了，4、5.1、5.5全装过
双击之后，就没反映了。唉！
LOVING
我试了一下,效果不错.
94smart
新版Yahoo首页：用软件的方式做网站
Yahoo的新版首页终于完整公布了，修改了部分设置，基于好奇的原因，小小研究了一下。
说得夸张点，Yahoo在用写软件的方式做网站。包括：
- Yahoo在UI上的操作，比如换配色，虽然也有别的网站使用，但是从操作上，Yahoo的处理更像是软件的方式，有点像现在的Windows Live Messenger的换色操作。
- 图片的调用跟软件的一种图片资源操作如出一辙，软件对图片资源有一种使用方法”将所有图片放在一张图片里，使用相应的位置坐标调用”，Yahoo的做法很类似，页面上的图标、背景图都是来自于一张大图（图标资源1、图标资源2、背景图资源），使用CSS定义范围来显示相应图片，这么做确实有好处，可以方便预先读取和集中管理图片资源。
其实前两天就想写这个内容的，但是最近我的Dreamhost空间极度不稳定，导致未能及时发布，今天在发的时候又忘了点当时想写的地方，只好凑合了。
94smart
关于网页设计和CSS+XHTML
最近老冒写了两篇（1，2）关于Web2.0网站设计的文章，很多内容都有同感，尤其是第二篇里的：
试图用css编码， 而不是用css设计
设计人员仍然是photoshop画页面，然后切割，然后用css去实现。 这个往往导致的结果就是产生大量不必要的垃圾代码，xhtml的代码结构为了实现美工设计的某些其实微不足道的效果而变得复杂不堪。
感觉上面写的就和自己的工作及其相似：制作人员一遍又一遍得用CSS去实现Photoshop的设计，垃圾代码是不可避免的。
反过来想想，为什么不能直接让设计人员用CSS去设计网站呢？
以上观点有人持反对意见：
对美工而言，精通CSS，然后考虑到CSS的各种属性和限制去做设计，可能会限制他的创造力。所以我以为美工更应该清晰页面的结构，在页面设计的过程中，做到针对结构设计更为实际。在维持一个大局风格基础上，在类似的结构上有意识的样式统一，同时页面各个部分的承启转合清晰一致，那么页面制作人员也能方便的进行页面拆合，维护起来也方便。
来源：“web 2.0时代的网页设计风格” 读后感
我的观点是：使用CSS设计网站确实会限制创造力，这没错，但是功能服务性网站比较特殊，所以发挥创造力需要限制在一定范围里，这个范围包括对用户的易用性、可用性，以及对网站的结构化和可维护性。
换句话，就是在CSS正常发挥布局作用的前提下，在一个又一个的框框（也就是DIV）里面，发挥设计人员的最大创造力（美观和易用），这样可以尽量减少垃圾代码的堆积。
另外，老冒的想法有点过于理想了，”让更多的程序员参与到设计之中,让整个项目的人都think in css”，但是我真的希望所有相关人员都可以Think in CSS。
p.s.对于技术和美术的页面问题，包括CSS和XHTML，我现在的解决办法是，美术用CSS和XHTML制作页面，然后将页面根据DIV布局切块，每块里面只有纯XHTML的代码（可以适量有class和id），然后由技术人员针对单块内容的规则进行程序嵌入，最后由制作人员进行整合。这样做很麻烦，但是可以减少部分不必要的麻烦。
Technorati : CSS, WebStandards, XHTML, 网站设计
-
高人
又一个在这里放废话的人，做点正事好吗，求你了这些东西你讨论了有什么用吗。毛病。~~~CSS有用没用，你个贱人能说的了吗。
-
94smart
这位高人，你做过正事吗？
做过什么？
这些如果没用你说什么有用？
骂人谁不会，骂出点道理才是。如果你只会在别人blog下面匿名骂人，趁早滚吧，同时没有地方会欢迎你。
-
bluerain
用不用CSS完全依照PROJECT而決定，答案並不是絕對的
-
94smart
to bluerain：有的Web项目确实可以不用CSS，只用纯XHTML，但是不排除以后会用CSS进行美化。
-
kevin
用CSS去实现怎么会产生大量的垃圾代码呢？
我觉得CSS共用会减少很多垃圾代码呢！！！ -
94smart
前面提到的垃圾代码是说：设计的时候不考虑CSS的能力，又为了用CSS实现设计图，所以不得加入很多不必要的代码，例如非得用CSS去做不规则的外框，CSS可以做，但是感觉比用table废码还多。
JunChen 11:46 am on March 5, 2007 Permalink
float 之后不用再写 display: block;
float 的对象自动被视为 block-level
94smart 12:39 pm on March 5, 2007 Permalink
多谢，确实定义重了，应该不太影响效果。