您的位置：首页 > Web前端 > JavaScript

web应用UI开发基础笔记-html、css、javascript

2011-10-06 13:13 731 查看
对华丽而整洁的UI界面我甚是喜欢，但要让我自己做一个，何其难堪，做了一次之后不是对不齐格子，就是图片放置位置不对，调整来调整去，不得不放弃，还是让他邋遢难堪。大学的时候写个几个网页，静态的纯HTML，放几张图片，写点无聊的话，现在想起来很可笑

。

毕业后，一直在做java开发和运维工作，时代变迁得太快，看着周围的90后用的apple UI，太漂亮了。再看看facebook、校内等等，做互联网，没有UI你就不要玩。阿炜（中间件一把利剑）这几年做的RSMS、CASE是把UI吃透了，随手就可以创建一个漂亮的UI。而我，还是琢磨半天搞出个还过得去的FORM，而且还是用了别人的东西。

web这东西要做得多，用得多，排版基本靠对html、css的熟练程度，靠javascript来增加客户端的动态效果（ajax是客户端主动请求server）。

第一层：理解xml文件的element、attribute、text

一个xml可以看成一棵树，每个节点node，这些父子node，有自己的attribute和text。

html结构是很简单的，它也就是一个xml文本，遵循这element、attribute、text三大块，元素、属性、文本，简单吗？不简单，不简单在attribute中，每一个元素的每一种attribute都会带来奇妙的效果，只有真正用多了才能熟练，毕业实习单位的一个美工对html+css堪称熟练至级，也是随手可以出个模块的人。

一个element本身有一个tag，表面它自己是什么，例如<html><body><table><input><form>，表明自己是一个完整的文档、文本主体、表格、输入框、表单等等，而attribute则表明他的属性和方法，例如<input type='text' name='username' onclick='alert('you clicked the button')'>，说到这里一个element越来越像java的对象了。

attributte可以定义element的外观，可以监听产生在element上的事件，并表示这个element。

text比较简单，只是在element之间的文本而已。

知道了基本结构后，下一步是游走在各个element之中，并对这个xml文档做增删改查的工作。xml提供了DOM接口专门用来操作xml文档。

getElementById, getElementsByName, getElementsByTagName等方法均是对xml文档的增删改查操作。DOM还提供了诸多接口，但直接使用DOM来操作xml文档显得比较笨重，并且还有浏览器兼容问题，特别是在操作style属性时。

因此第三方js toolkit给我们解决兼容性问题，并引入了简单性。比如jquery的$('p')选择了所有的<p>元素，相应的方法是document.getElementsByTagName('p')。

第二层：理解元素的含义，以及css

 UI要写得好，首先得对界面进行布局，这就涉及到对html元素的深入理解，比如div、table这些常用元素的属性细节。要对单个元素的外观进行控制，则必须使用css对其进行渲染，当然，也可以用它来布局。css其实是最终UI美化之道。

在对这些css、html有了比较深入的理解之后，下一步是学习每个element上可以发生的事件，比如focus、blus等等，结合事件响应可以产生许多动态效果。

这里另外要提得一定是BOM，也就是浏览器对象，windows、document等都是主要的浏览器对象，它可以获得鼠标位置、浏览器位置、状态栏信息等等，在制造这些动画时常常要用到它们。

jquery也为我们做了很多，但以上这些内容还是有必要理解得。

继续，好了，你可能已经理解得够多了，往上走就是所谓的ajax，其实挺简单的，无非就是异步服务请求，不刷新页面而已。

CSS的语法

css的目的是任意的摆布html的每一个element，要做到这点，首先他要寻找（SELECTOR），其次是对这个element赋予规则（RULE），而规则的表述方式是对element的属性（attribute）给予一个值（value）。那么设计者对CSS语法的初衷如下：

SELECTOR { RULE }

RULE = ATTRIBUTE:VALUE;RULE

SELECTOR { RULE }
RULE = ATTRIBUTE:VALUE;RULE

例如：

p {margin:0}
p.top {margin:0}


选择符是区分大小写的，而规则对大小写不敏感，所以在css中统一使用小写。

html中查找元素的三个要素：元素名、类名、ID名。

第三层: 万物归宗

上面说来说去都是操作性东东，到了这一层就考自己了，只有在上面的东西无限熟练之后，才可任由自己想象力来制造各种各样的界面。

未完成待续

推荐书籍：

《javascript高级程序设计》 完全可以作为javascript入门书籍，内容比较详实，如果仅仅使用jquery，而不明白其中道理，推荐看看它。

《html xhtml css基础教程》 html、css超级入门书籍，上手容易。

《jquery基础教程》 非常简单易懂的jquery入门书籍。

《瞬间之美-web界面如何让用户心动》

《web开发人员参考大全》 正如书名，这本书不是用来读得，而是遇到问题时参考参考的。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航