校内网涂鸦版DIY教程(二)美化的具体原理、方法(附图讲解DOM)

转载请保留:http://www.awflasher.com/blog/archives/995
我的校内首页:http://xiaonei.com/hustaw

引子:如果你想追求每一个“美化工程”的细节,例如:你非常喜爱某一个模板,但是却发现其中某一处的颜色稍有偏差又不知如何入手,那么我想我写这篇文章比我做N个模板给你去套用更“实惠”。当然,不排除以后也会考虑发布一些原创的校内涂鸦模板。

首先,我想看这篇文章的人,大多数都是对HTML甚至上网的普通知识没什么了解的同学。先给大家说一下基础的东西,至少是页面显示的原理吧。

我们都知道,计算机通信,只能传输“0、1、0、1”这样的数据,这些数据经过一层层封装(这些封装我们可以忽视),变成了“HTML代码”。我们所看到的网页,如此绚丽多彩,有图片,有动画,甚至还有声音,这一切的一切,都是HTML代码的功劳。

我不妨把中国互联网行业内的一句“俗话”润色一下:“你可以不懂ASP、PHP这些服务器端技术,你也可以不懂MySQL、SQLServer这些数据库技术,甚至,你可以不懂JavaScript、Flash这些客户端技术,但是你必须得懂HTML,而且,懂的越多越光荣”。因此,我相信今天的内容肯定不止校内网的用户感兴趣:)

没错,就是这万恶的HTML代码,让你痛苦不堪吧?然而,它却是我们在互联网上一切娱乐、体验的源泉。

我不想花太多的篇幅去讲“HTML是什么”之类的问题;即便,你要学习HTML是什么,我也不建议你抱着文档啃概念。人是感性的动物,理性的成果适用于归纳总结和知识的传递,但并不适用于对知识的理解。因此,我先讲讲“HTML如何产生作用”。

我建议大家以一种“搭积木”的过程来理解HTML的作用:打开页面,给你一段HTML。这一页面的HTML中每一段代码都是一块积木。你拿到这些积木,可以依次把他们摆放在一个“容器”里。一段一段的代码,对应着一块一块的积木,当代码结束时,这个容器就会有一个特定的“形体”了。

Okay,这就是HTML。那么,为了美化,仅仅有HTML是绝对不够的!也许你已经听说了,对,就是它 – “CSS”!CSS无论是英文原文还是流行的翻译(叠层样式表),实在是晦涩难懂。仍然用刚才那个“搭积木”的例子,这里,CSS就好比你摆放积木的方式;并且,CSS可以对你的积木进行“润色”,你可以把一块红色的积木变成蓝色,或者给它涂上你自己喜爱的图案。你也可以把你不喜欢的积木“干掉”:)

我不知道到这里,诸位是否明白HTML、CSS了?我对自己的比方还是非常有信心的,我想这比你花钱到那些骗钱的“电脑学校”学习“互联网开发”要实在得多:)

其实,HTML和CSS常常是“形影相随”的:比如我们在涂鸦板中的代码,往往就是又HTML、CSS混合构成的。

接着,我们就xiaonei.com的个人页面来说说。

首先,所有的美化和修饰,都是从涂鸦板开始的。我们很不幸地要接受这样一个事实:页面的信息,除了涂鸦板以外,我们都不可控;但我们也很幸运:感谢xiaonei团队为我们提供的这样一个平台,一个支持HTML、CSS的平台(最然暂不支持JavaScript,但这仍然是非常大的自由)。我们可以利用xiaonei提供的HTML“平台”,往页面上增加新的内容;我们可以利用xiaonei提供的CSS“平台”,修改页面上的所有内容,包括校内默认的一些信息、数据以及你人为添加的信息,例如我的校内页面(http://xiaonei.com/hustaw)左侧提供的一些订阅服务。

HTML是代码,它的组成看似复杂,其实很简单,例如我要给朋友加一个链接,那么我的HTML代码应该是

<a href="http://www.awflasher.com/blog/">aw's blog</a> 

这样,我点“aw’s blog”,就可以访问到www.awflasher.com/blog/了。

你会发现,所有的HTML,都是“<”+“>”构成的一个个“标签”,他们罗列有序,互相嵌套,形成了一种严密的逻辑结构。

当这样的代码被显示成页面的时候,我们往往也称之为“DOM”结构。DOM是什么,我觉得也大可不必深究。在这样的场合下,我建议把DOM理解为“一棵树” – “DOM树”:有根(root),有枝(说法统一一下:不用“branch”,而用“children”),枝连接的两端,我们叫做结点(node),枝上也许有叶子(属性,“property”)。理解DOM,对我们以后的教程非常有意义,我来画一张图,以校内个人页面中右侧的人气数值的DOM结构来举例说明问题。这种图形表示DOM的思想,借鉴《Head Rush Ajax》一书中的插图方式。

 

图中,“1”是大家在页面上看到的内容;“2”,代表对应的HTML代码;“3”,代表HTML代码所表示的DOM结构。

h3是这一个DOM树的“根”;其下有“郭启睿”这个文本结点,然后有两个span结点。而这两个span,又作为“根”,产生出了更多的结点。

注意,“DOM”、“DOM结构图”,与字体、颜色等样式无关。DOM本身只是决定一些简单的样式的,如DOM的顺序和包含关系,决定了布局中,谁在上,谁在下,谁在谁内部。

利用CSS,我们可以让这棵树显示到屏幕上的样子“面目全非”!

没错,既然我们无法改变校内网个人页面涂鸦板以外的DOM,那么我们就只能在涂鸦版中通过CSS的手段修改那些系统生成的DOM的样式(比如系统的导航栏、系统的底栏、系统的侧栏,等等),不仅是颜色,甚至包括布局、背景等等,甚至,你可以把校内网个人页中的一些不希望看到的信息隐掉,换上你自己的内容,包括我们看到的一些很“酷”的Flash导航,其原理都是如此。

到这里,聪明的你一定知道我是如何利用涂鸦板修改我的“2339”为大一点儿的黑体了:通过CSS,修改DOM的布局!例如我对我上一段布局的修改,就是通过如下代码完成的:

#vcount{font-weight:bold; font-size:16px;}

这段代码的作用就是让字体变粗,并且大小为16px(校内其他的字体都是12px)。今天我暂且不谈这些代码中“#”、“:”等符号的具体意义,大家知道这段代码的作用,就行了。

在我下面的内容重会深入、针对性地讲如何利用CSS修改校内网个人主页的布局。

Advertisements

18 thoughts on “校内网涂鸦版DIY教程(二)美化的具体原理、方法(附图讲解DOM)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.