主页制作ABC
时间:2007-02-17 来源:PHP爱好者
今天已经是第三个人问我如何制作网页了,按照惯例以前只要有一个人问我问题,我就会知无不讳、言无不尽,然而对于“如何制作网页”这个问题要说起来话就比较长了,区区一篇文章真是很难讲述明白。因为网页制作的相关话题太多、软件也非常庞杂,我这里不能一一列举,因而就选用了比较枯燥的HTML代码进行讲解,至于能达到多少效果,就要看各位看官自己的悟性了。
首先说一下网页文件的基本概念。“网页文件”这个名字很不正规,它真正的名字应该叫做“超文本文件”,也就是说网页都是文本文件编写出来的,像可执行文件是二进制的,而网页文件都是文本文件。那么问什么要叫“超”文本呢?原因是文本文件不能表现出缤纷的文本效果,例如我们使用Word可以编辑一份五颜六色的报告、其中还可以插入图片,而纯文本就不能实现了,超文本正是能将多种文字效果体现出来的文本格式。
很多软件都可以编辑这种网页文件,例如Dreamweaver、Frontpage、Homepage等等,它们的机理都是相同的,都是通过软件编写HTML文件源代码,因而我们只需要使用系统提供的记事本或者任何其他的文本编辑软件,都可以编写出相同的HTML文件!之所以使用上述高级的软件,是因为那些软件具有高度的“傻瓜化”和“可视化”效果,我这里讲解HTML的理论,因此不对上述软件进行讲解,大家只要了解了HTML文件的格式,剩下的软件选择和使用只是个人爱好而已了。
现在开始说HTML文件的格式:HTML文件的扩展名可以是HTM和HTML,两者之间的区别我不敢肯定,在我印象中HTML好像是MAC机器上使用的,这一点对我们来说无所谓,因为两者之间没有任何区别,用记事本创建一个扩展名位HTM或者HTML的文件,然后在其中随便输入一些文字并保存,之后用浏览器浏览这个文件就可以了。
例如将这篇文章保存成index.htm文件,之后用IE浏览器可以很方便的进行阅读!然而真正完成这项工作之后你也许会发现浏览器虽然能够显示文件的内容,可是段落全没有了,密密麻麻一大堆字显示在眼前,这是什么原因?原因很简单,浏览器在读入index.htm文件后要先对其中的标记进行分析,然后按照标记生成网页,这篇文章里面没有任何HTML标记,浏览器自然不会理清格式。
HTML的标记有一个共性:都是被尖括号包含起来的,例如下面的几个标记:〈p〉和〈/p〉、〈li〉和〈/li〉、〈table〉和〈/table〉等等,这些标记成对出现,在其中“和”的位置可以有我们自己的文字内容,不同的标记可以对文字效果进行更改,这样浏览器才能按照标记出现的位置显示不同的效果。
将这篇文章每一个段落都用〈p〉和〈/p〉包含起来,之后保存index.htm文件,再用浏览器观看,就会发现段落已经被划分出来了!
颜色呢?段落是被划分出来了,可是所有的文字都是黑颜色的!而且字体、自号全都一样!!这和纯文本文件没有任何区别呀?对呀,因为我还没说更改字体大小、颜色的标记〈font〉和〈/font〉呢!在index.htm文件中写入如下两行代码,然后保存看一下效果:
〈p〉〈font size=1 color=red〉这是一行红颜色的小字〈/font〉〈/p〉
〈p〉〈font size=4 color=blue〉这是一行兰颜色的大字〈/font〉〈/p〉
看到了吗?在〈font〉中有“属性”size和color,大多数HTML“标记”中都有各自的“属性”,〈font〉是文字标记,而具体到其中文字大小、颜色、字体等等效果,就要通过属性来修改了。你也许会问:那HTML到底有多少标记和属性?其实这个问题我也不知道,我手里面有一本《HTML3.2样本手册》,在编写HTML代码的时候,如果忘记了某个标记可以进行查阅,而上述那些高级软件的“傻瓜化”就在这里,利用它们你不需要记忆繁多的标记和属性,只要晃动鼠标就可以了。
说到这里你也许已经领悟了HTML文件的真谛:说白了就是用标记对一篇纯文本文件进行格式排版!下面说一下HTML文件大体的结构。
HTML文件很灵活,也很不正规,缺少标记或者使用标记错误浏览器都能够容忍,只不过影响最终的浏览效果而已。但是正确的、完整的使用标记是没有坏处的,例如我们这里的index.htm文件中包含简体中文,而浏览器并不能自动识别文件中的文字是什么语言,这个时候就要在index.htm文件中加入“语言标记”,这样做无非是让我们的浏览器更加“听话”。
一个标准的HTML文件应该是如下格式:
〈HTML〉
〈HEAD〉
〈TITLE〉标题〈/TITLE〉
〈/HEAD〉
〈BODY〉
〈P〉这里是正文内容〈/P〉
〈/BODY〉
〈/HTML〉
忘记说明两点:1、标记中的内容不区分大小写,也就是说〈BODY〉和〈body〉浏览器都支持;2、空格和换行不会影响效果,例如上面的9行代码写成一行也同样可以。
在〈head〉和〈/head〉之间是一些控制语句,例如可以控制文件的标题、使用的语言和字体样式等等;
在〈body〉和〈/body〉是文件的内容,所有要显示在浏览器中的内容都要输入到这里,之后只要对内容进行排版就可以了。
仍然是上面的文件,将〈p〉这里是正文内容〈/p〉更改成〈p align=center〉这里是正文内容〈/p〉保存浏览,可以发现这段话跑到浏览器正中央了,在将〈body〉更改成〈body bgcolor=blue〉能够发现整个页面的背景变成了深蓝色。就是这么简单!多么复杂、精美的一个页面,也不过是修改修改这里、美化美化那里来实现的。
正如上面所说,HTML格式可以包含动画、图片、Flash等等,这些也都是靠标记实现的,但是内容实在太多了,整整一本《HTML3.2样本手册》都不能全面述说清楚,更何况一篇教程呢?我这里就是抛砖引玉,让不了解HTML文件的朋友对此有一个基本认识,至于灵活应用,要在自己的反复实践、不断摸索中慢慢掌握。
php爱好者站 http://www.phpfans.net 网页特效|网页模板