正在加载...

转载请保留: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修改校内网个人主页的布局。

还没找到您要的东西?Google试试看吧,
Google更注重原创、时效性好的文章:


本文相关评论: 才 18 条评论
  1. song 2007-07-22 11:46:31

    原来你也在校内网啊!

    我前几天给你写简历了,不过不知道为什么没有回音呢?

    我的校内主页:
    http://www.xiaonei.com/googlemm

    ~~~

  2. aw 2007-07-22 11:54:54

    应聘Web产品开发的,一共接到三份简历。没有你的。

  3. CEEEGenius 2007-07-22 07:57:15

    那我就用这个试试,CEEEGenius’ Blog

  4. song 2007-07-23 08:57:05

    不是web前端开发吗?

  5. fky 2007-07-23 01:54:15

    自恋的blog

  6. 爱情38计 2007-07-23 07:32:16

    我上一3个67的了4忽然就8几一87

  7. dc 2007-07-23 08:20:48

    aw真能折腾……

  8. 祖國尛婲朶∑ 2007-07-23 08:56:30

    哦~原来这样啊~

  9. 嗯,峩冇毒 2007-07-23 09:43:36

    原来是这样啊“知道了`

  10. 275424940 2007-07-24 08:01:51

    强悍!!!!

  11. dsa 2007-07-26 08:35:56

    dsadsadsadsa

  12. ‖親ィ尔ロ觜 2007-08-26 12:22:34
  13. ‖親ィ尔ロ觜 2007-08-26 12:24:49

    顶~~~~~~~~~

  14. bbbb 2007-09-04 01:03:52

    我怎么看不明白啊

  15. aaa 2007-10-07 10:27:44

    模糊,能给些具体说明就好了!!

  16. 佳佳 2007-10-30 04:06:37

    aw, I’ve kicked off my step into html. Tks!
    so, what’s next, my html mentor? :P

  17. ~/點點渧!~ 2008-03-16 07:02:22
  18. 夜猫 2008-08-11 09:06:50

    新版校内的title怎么改?

[支持Ctrl+Enter]为了我们大家和家人的安全,留言请慎重!
声明:
1、本站仅与见过面的个人博客交换链接,见此文
2、留言时的头像是Gravatar提供的服务。如果您有兴趣并且有闲暇时间,可以看看这里的介绍