CSS

post

页面制作,不,是前端

  • 多少年过去了,做网站还是得靠页面制作,不管是CSS还是JS,现在还得搞HTML5,只是职位改叫前端了;
  • 用CSS+JS代码完成针对屏幕尺寸的页面适配叫响应式设计了,前端更成了很多产品的命根子;
  • 原来以为WAP网页WML、2.0暂时用不着JS了,结果Jquery Mobile之类的来了,说:移动互联网我们也能动起来;
  • 现在有了PhoneGap和钛,用HTML5+JS就能搞手机应用了;
  • 现在有Node.js之类的,可以用服务器端运行JS搞些东西了;
  • 很多时候设计师还是只能望代码兴叹,最后也得逼自己学这学那的;
  • Javascript语法成了更有发展的玩意,这不仅讽刺而且夸张,但如果你是技术或设计,不懂一点JS,还真不好意思说自己是做网站的。

注:本人所在公司正在招移动广告的前端互动设计,懂HTML5和CSS、熟练使用jquery(及mobile)制作动画效果,能为移动版页面做好页面适配就行,有意者可以发邮件到我@gmail的邮箱:94smart。

CSS, XHTML, 随笔

别紧张,只是CSS裸奔节又到了

别紧张,只是CSS裸奔节又到了。

4月9日是今年的CSS Naked Day,每年到这个日子就会看到大大小小的网站、Blog去掉CSS样式表,让网站”裸奔”,故这天也叫”CSS裸奔节”。

这个日子是为了推广CSS及XHTML等W3C标准页面代码而设的,更能突出网站在没有CSS的情况下代码结构是不是够清晰,其实我的Blog是一个反面例子,去掉CSS后作为主体的Post列表出现的太靠下了~

我使用的是Aja Lapus做的WordPress插件来实现的效果,也可以到CSS Naked Day页面去看其他实现方法。

最后,基于大家现在什么节都过的心理,在这里说一句:CSS裸奔节快乐!

Technorati : , , , , ,

CSS, Google, XHTML, Yahoo, 网站设计, 随笔

原来是CSS Sprites呀

最近一阵国内Blogger开始涉及CSS Sprites,是因为有人偶然发现Google搜索首页JS的秘密,之后我才知道去年Yahoo改版使用的技术原来就是这个,当时不知道怎么形容,只好套用软件资源图片的概念,看过Realazy的文章才大致理解,发现自己当时的理解还是太浅显,这是早在2005年就出现的技术呀。

不可否认,这种方法确实减少了CSS文件里的HTTP请求数,但是图片的更新和配置比较有难度,且半透明和不透明图片最好分开打包。

最后,也许是我胡思乱想,这种方法如果继续发展下去,完全可以省去前端操作人员(网页制作、编辑)用Photoshop切割图片的工序,会否变成引用原设计图直接作为资源图片呢?

<

p class=”zoundry_bw_tags”> Technorati : , , , ,

UE, 网站运营, 闲言, 随笔

某活动体验,是我理解错了

某网站的活动,以下是活动公告截图:

thezenofcss.jpg

这个不知道大家是怎么理解的?

对于”凡购买《CSS禅意花园》和《JavaSscript高级程序设计》两册图书的读者将免费获赠《精通CSS》一书或300C币“,我的理解是只要买了《CSS禅意花园》和《JavaSscript高级程序设计》两本书中任意数量的书就可参与活动。

活动结束后才知道,是同时买两本书才可能赠另外一本或积分,是我理解错了。但,活动说明里是不是该清楚地说明?以断了像我这种理解有偏差的用户的憧憬?哪怕加一个”同时”。

请别深究是哪个网站,写出来也没有别的意思,只是在思考,电子商务类网站对文字描述的准确把握是不是需要更注意一下?

p.s.写到最后才想起来一个与本文无关的逻辑:程序员理解的”和”,就是逻辑与(AND),也就是所有条件都必须达成;其他用户理解的”和”就是逻辑或(OR),只要其中任意条件达成就OK。

<

p class=”zoundry_bw_tags”> Technorati : , , , ,

CSS, 网站设计, 随笔

用XHTML+CSS实现文章列表标题时间对齐

今天要查LCD的资料,跑到PConline去看,看到他们的文章列表觉得效果还好,如图:

pconline_list.gif

无意间发现文章列表的页面代码写得很奇怪,首先他们用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的?

互联网, 网站设计, 随笔

新版Yahoo首页:用软件的方式做网站

Yahoo的新版首页终于完整公布了,修改了部分设置,基于好奇的原因,小小研究了一下。

说得夸张点,Yahoo在用写软件的方式做网站。包括:

  1. Yahoo在UI上的操作,比如换配色,虽然也有别的网站使用,但是从操作上,Yahoo的处理更像是软件的方式,有点像现在的Windows Live Messenger的换色操作。
  2. 图片的调用跟软件的一种图片资源操作如出一辙,软件对图片资源有一种使用方法”将所有图片放在一张图片里,使用相应的位置坐标调用”,Yahoo的做法很类似,页面上的图标、背景图都是来自于一张大图(图标资源1图标资源2背景图资源),使用CSS定义范围来显示相应图片,这么做确实有好处,可以方便预先读取和集中管理图片资源。

其实前两天就想写这个内容的,但是最近我的Dreamhost空间极度不稳定,导致未能及时发布,今天在发的时候又忘了点当时想写的地方,只好凑合了。

Technorati : , , ,

CSS, 网站标准, 网站设计, 随笔

关于网页设计和CSS+XHTML

最近老冒写了两篇(12)关于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 : , , ,