‘CSS’ 所有文章

关于HTML语义,我也有看法

八月 29th, 2009 由 Rock 发表

目前的HTML语义方式主要靠标签去表达,但有历史局限性,众多的标签也是历史遗留问题,因为未出现CSS之前一个页面是由众多标签+属性,要说语义化,从现在标签使用的角度看来,我想没什么比那个时候的页面更具语义化了. 页面的语义化是必段的,但目前用标签来表达是个鸡肋,因为完全标签表达使整个页面显示累赘,难以维护, 而且,当出现一个新的特性对象时,不得不新创建一个标签,这点倒像英语词汇, 一旦属性多了起来, 如颜色,位置,大小等更具个性化的东西标签都难以充分表达.

记得以前看过一句与语义化相关的话,”不要让 CSS 使一个 HTML 元素看起来就像另一个 HTML 元素,比如用<div>来代替<p>标记标题”,我当时就觉得奇怪了,CSS能充分表达元素的外观甚至行为,CSS更能表示页面的语义化.理想角度看来,依靠CSS用最少量元素就能够很好表达页面,外观与内容能够很好的分离,感觉像P这些元素就像多余的!现在看来 — 上面也提过,造成目前还依赖标签表达是由局限性造成的.因为语义是主要给计算机识别的,而不是人!人不用去看这些标签和页面背后的东西,直接看页面最终效果就能一目了然, 但计算机还没这么智能,相信计算机能够直观上”看”得明在相当长一段时间是实现不了的了,而在计算机领域内语义又主要是给爬虫识别的,(这里的爬虫泛指一切信息收集并解析程序, 并不单单指收集,还包含解析),而当下最著明的爬虫就是搜索引擎的爬虫了.但目前的搜索引擎在数据收集分析时显然很笨,它只能从页面的标签上解析和关键字去了解这页面大概是干嘛的,很多与页面相关个性化的东西收集不到,因为这些东西隐藏在CSS样式之后,搜索引擎还没那么聪明,所以目前,我们只能够在保持页面结构清晰的前提下尽量用相关的标签去”提醒”爬虫留意页面的不同要素的内容,归根到底还是有人工干预了!

不过没办法,就像浏览器发展缓慢一样,严重跟不上其它技术的发展.

一些有趣的网站,主要运用JavaScript+CSS+HTML

五月 22nd, 2009 由 Bgser 发表

这些站点主要运用JavaScript+CSS+HTML技术开发,值得借鉴。

背光一发现有新的网站就立即更新,您也可以推荐~。

http://aviary.com/

Aviary 使用了非常圆润的 按钮 效果,点击 Tab 后,渐出渐入的栏目介绍性内容非常漂亮,那些菜单也特别漂亮。

http://www.podcast-tuneup.com/

主题不错,布局协调,如果把展示图片的FLASH控件换成JS的就更好。

http://www.monofactor.com/

看中的是该站用使用幻灯风格展示图片。

Alex Buga -
http://www.alexbuga.com/



Alex Buga 自诩为 Web 设计超级明星,使用了类似幻灯片的方式展示他最近的活动。位于右上角的那个主导航条也很 Cool,不过该站点大量使用了
Ajax。
Coda, one Window Web development -
http://www.panic.com/coda/



这个站可谓家喻户晓。是很多人获得灵感的地方。
Kobe -
http://www.arcinspirations.com/kobe/



漂亮的幻灯式内容效果,并结合了 Flash。(该站使用了单页式设计)
Dibusoft mmdv -
http://www.dibusoft.com/



Dibusoft 使用了水平滚动图片加垂直滚动文字使用内容的幻灯式变换。它的主菜单则使用 JavaScript 实现 Lava Lamp 效果。
Jason Julien -
http://www.jasonjulien.com/



Web 设计师 Jason Julien 使用水平滚动的方式来显示各个栏目下的内容。
engage interactive -
http://www.engageinteractive.co.uk/


Juanid W. Hanif -
http://www.jwhanif.net/



这个位于纽约的 Web 设计师 Juanid W. Hanif 的网站给人的总体感觉很不错。
Omnitech incorporated -
http://www.omnitech-inc.com



Omnitech 的垂直垂直滚动式幻灯内容非常棒。
Quicksnapper -
http://www.quicksnapper.com/



Today’s Websnap 里的幻灯内容
Josh Smith -
http://www.joshsmith.ca/



不仔细看,还以为是 Flash 效果。
Qlear Interaction Design -
http://www.qlear.nl

大量的幻灯式内容,整体效果很漂亮。
Giant Creative -
http://madebygiant.com/



Tap Tap Tap -
http://www.taptaptap.com/


Hotel Oxford -
http://www.hotel-oxford.ro/



这个站的效果看上去象 Flash, 也拥有 Flash 一样的行为,然而却是 JavaScript。
单页式网站
以下几个站点的共同点就是大量使用滚动窗口,甚至有些滥用了。
Bryan Katzel -
http://www.webleeddesign.com/



Melissa Hie -
http://melissahie.com/



volll humane communication -
http://www.volll.com/



you love us -http://youlove.us/



Tomas Pojeta -http://www.pojeta.cz/



Carrot Creative -
http://carrotcreative.com/



Nofrks Design Studio -
http://www.nofrks.com/



Viget Labs -
http://www.teamviget.com/



Danny Blackmann -
http://dannyblackman.com/



my kinetic Kreations -
http://www.neftysworld.com/



DJ Folio - http://www.djfolio.com/



Jade Records -
http://www.jedarecords.it/



authenticstyle -
http://www.authenticstyle.co.uk/



Trashstars -
http://www.trashstars.com/



Designflavr -
http://www.designflavr.com/



h4×3d.com - http://www.h4×3d.com/


杂效
phpcli -
http://cliframework.com/



Vitamin j Kommunikation -
http://www.vitamin-j.de/



Komodomedia -
http://www.komodomedia.com/



Kyan - http://kyanmedia.com/



Green any Site -
http://www.greenanysite.com/



Playground Blues -
http://www.playgroundblues.com/



CSS moon - http://www.cssmoon.com



Creatividad -
http://2d2.es/creatividad/



Dragon Interactive -
http://dragoninteractive.com/



Marius Roosendaal -
http://www.mariusroosendaal.com/



paramore|red online marketing -
http://paramoreredd.com/



Pikaboo - Where Ideas Grow -
http://www.pikaboo.be/



Nebonmedia -
http://www.nebonmedia.com/



Helldesign -
http://helldesign.net/



以上部分资源来源:
http://www.kriesi.at/archives/50-websites-that-make-amazing-use-of-javascript

http://www.chinesefeng.com/article/js/javascript.htm

感谢他们的分享。

Ajax及Javascript实例资源网站:

AjaxRain有很多完美整合AJAX, CSS, DHTML 或 Javascript的实例,有一些Demo的确值得你去看一看,即使你不是网页设计(开发)师。

Ajax/Javascript实例:


2.Ajax Daddy

ajax-javascript-教程

Ajax Daddy收集了大量漂亮的Web2.0工具,其中一个使用的功能就是,在你把某个Ajax/Javascript实例应用在自己的网站上之前,你可以在它上面先看看效果演示。

Ajax/Javascript实例:


3.Mini Ajax

ajax-javascript-实例

MiniAJAX 是一个新生的网站,收集了少许 DHTML 和 AJAX 脚本, 它的代码片段风格非常实用。

Ajax/Javascript实例:

4.Ajaxian

ajax-javascript-源码

一个接近于门户类型的AJAX资源站点,包括Ajax示例收集,博客,论坛和教程等等。

Ajax/Javascript实例:


5.DHTML Goodies

ajax-javascript-教程
DHTML Goodies是一个收集了大量DHTML、Ajax脚本、Demo和教程的网站。脚本范围涵盖从导航菜单、窗口、日历到图片集合。
Ajax/Javascript实例:


6.Javascript Kit

ajax-javascript-资源

收集了大量的Javascript教程及脚本资源,当然也有DHTML、CSS和网页设计教程和一个设计师帮助论坛。

Ajax/Javascript实例:


7.Dynamic Drive

ajax-javascript-源码

一个我常去的 JavaScript和 CSS资源网站,即使你是初学者,也能找到DHTML、Javascript、客户端脚本详细的指导。

Ajax/Javascript实例:


8.DHTML Site

ajax-javascript

你能从DHTML Site找到大量游泳的AJAX及DHTML脚本及教程,脚本涵盖页面效果、工具技巧、拖拽式日历、窗口特效及图片集效果。

Ajax/Javascript实例:


9.Solutoire

ajax-javascript-资源

这个网站收集了相当多且很棒的javascript和ajax的实例及教程. 还有很多 jQuery、Scriptaculous、mootools等Javascript框架。

Ajax/Javascript实例:


10.DevSnippets

ajax-javascript-资源
收集了大量Ajax, javascript和CSS资源,在这里你可以提交自己喜欢的Ajax和Javascript实例,也可以为你喜欢的实例投票。

Ajax/Javascript实例:

阅读英文原文

原文链接:http://blog.bingo929.com/10-sources-ajax-javascript.html