基于HTML的网页制作

学生诚信承诺书和论文使用授权说明样张（A4纸210×297mm）第1页基于HTML语言的网页制作摘要：网页是网络的重要组成，对于网页制作中的一些特殊需求，使用FrontPage等工具较难实现，需要对网页有较为深入的了解并利用HTML语言实现网页制作.本文介绍了基于HTML语言的网页制作方法，通过具体的实例应用，阐述了网页制作过程，并详细介绍了背景音乐、表格、JavaScript特效、子网页等部分的制作。从网页制作实例着手，简介了HTML语言的使用方法。关键词：HTML语言；网页制作；JavaScript一、引言网络依赖网页与用户进行交互，是网络的重要组成，目前有许多工具软件进网页设计，入FrontPage等，不过对于一些特殊的需求，使用这些工具较难实现。为了避免千篇一律，为了实现一些特定的效果，需要对网页有较为深入的了解。网页实际上是利用一种由本地计算机解释并运行的多媒体载体，之所以让本地计算———就是用户使用的计算机———来解释，原因是不让网络承受太多的负担，尽可能使得需要由网络来传输的信息减到最少，为此发展了一种语言：HTML（HypertextMarkupLanguage超级文本标记语言），从字面上我们已经可以看出它的特点，首先，是一种文本，其次，是标记性的。这是说，我们通过一系列的由文本构成的特殊标记，就可以制造网页，当然，现在要讲的就是如何不利用任何例如FrontPage等的工具，纯粹由手工编写代码来构建网页，从而揭示网页真正的面貌，为将来制作优秀的网站提供理论基础，达到知其所以然的目的。二、HTML简介HTML（HyperTextMark-upLanguage）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文件是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML文件的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。HTML文件是可以被多种网页浏览器读取，产生网页传递各类资讯的文件。从本质上来说，Internet（互联网）是一个由一系列传输协议和各类文档所组成的集合，html文件只是其中的一种。这些HTML文件存储在分布于世界各地的服务器硬盘上，通过传输协议用户可以远程获取这些文件所传达的资讯和信息。使用浏览器打开某个网页，在上面单击右键，选择“查看源文件”，就可以看到网页的真实面貌，其内容大体如下：htmlheadtitle网页的标题/title/headbody…ThisisaTest./body/html第2页建立一个文本文件，比如Test.txt，将上面的内容拷贝到里面，保存关闭，然后将它的后缀改为html或者htm，这时发现它的图标已经变为网页的图标，Windows会自动把后缀为html或者htm的文件认为是网页，这时用IE来打开的话，一个简单的网页已经出现了。如图所示，左边是文本形式，也就是网页的实际代码，右边是网页形式，如图1所示。HTML里使用的关键字都是成对出现的，比如html与/html，body与/body，前面一个标记没有斜杠“/”，这表示开始，后一个有斜杠的表示结束，关键字放在“”里面，一个网页的整体就用html与/html来标明，说明了包含在两个标记内的内容是网页，用head/head表示其中的内容是网页的头部，用body与/body标明网页的主体。图1文本的网页编辑效果三、设计过程网页的主要内容都是在主体完成的。打开主页后会听到背景音乐，文字“欢迎光临我的网站”会不停变换颜色并跳动，下面介绍性的文字会象电影字幕一样的淡入淡出，背景上有雪花不停地从右上方飘落到左下方。文字上面的“结庐人境”和“SKY”是GIF图片，使用Cool3D制作，也可以用其他图片；在左边有四个绿色选项，分别指向四个子网页，当鼠标落在其上时，菜单会变为蓝色；绿色下面是站主标志；为追求美观，文字部分使用了JavaScript。这些效果具体实现的步骤如下：1）背景音乐。网页可以播放多种格式的音乐，通常使用mid格式的音乐，在body中，加入语句bgsoundsrc=路径loop=播放次数，其中，路径使用相对路径，比如./Music/music.mid，不使用绝对路径，比如c:/abc/a.mid；播放次数可以设为较大的数字，比如999，这样音乐将一直反复播放。2）表格。表格用table/table表示，是网页的必要组成部分，网页的多种排版式样基本上都可由表格实现。通过表格，我们可以将网页划分为不同的区域，再在各区域中放入不同的内容，然后将表格的边框设置为0，可以进行各种排版，如图3所示。在表格中，使用标志tr/tr来定义表的一行，在其中使用th/th定义表头，使用td/td定义表元即表格的具体数据，如下是一个例子：代码：tableborder=2trth表头1/thth表头2/thth表头3/th/trtrtd表元1/tdtd表元2/tdtd表元3/td/tr/table网页形式：第3页在表元1里面填入一张名为“123.gif”的图片，使用的代码是：trtd表元1imgsrc=123.gifalt=李秋雨的网页WIDTH=150HEIGHT=180/td3）JavaScript特效。在结庐人境网页中，为实现一边跳动一边变色的文字，使用了一个名为JitterText.class的JavaScript控件，代码为：appletcode=JitterText.classalign=centerwidth=380height=60paramname=BGCOLORvalue=FFC2DBparamname=TEXTCOLORvalue=0000ffparamname=TEXTvalue=欢迎光临我的网站paramname=SPEEDvalue=250paramname=RANDOMCOLORvalue=1/applet代码中标明了调用JavaScript的参数。4）子网页。主网页完成后可将其作为蓝本来构建子网页，子网页只需修改内容，基本框架可保持不变。四、心得体会以上以实例简单介绍了HTML的基本概念，随着技术的进步网页的制作技术有了很大的进步，比如使用CGI(CommonGatewayInterface公共网关接口技术)、ASP(ActiveServerPage动态服务器主页)、Flash等，相信将来还有更多更好的网页制作方法供制作者选择。通过此次实践，我学到了很多的东西，初步学会了制作网页。这对于我来说是一个全新的尝试。让我在原有的基础上增加了自己知识的内涵。相信在不断地学习和改正过程中，我会越学越好。这次实践，给我感触最深的还是行为态度问题。人的能力有大有小，但只要端正态度，不抛弃，不放弃，任何人都能取得令自己满意的成绩。在此，我由衷的感谢在这次课程设计中给了我巨大帮助的老师和同学们！Html至今仍是制作网页时必不可少的代码。如果能够熟悉掌握并应用这些代码，大到做网站，小到博客论坛等都会有莫大的好处。相信在今后的学习过程当中，我会越来越熟练的掌握代码，更加熟练地学会制作网页。五、参考文献[1]张亚飞。HTML5+CSS3网页布局和样式精粹[M].北京：清华大学出版社[2]张兵义，等.网站规划与网页设计[M].北京：电子工业出版社，2009.[3]李超.CSS网站布局实录：基于Web标准的网站设计指南[M].第二版.北京：科学出版社，2007.[4]关秀英.FlashCS4商业动画、片头与网站设计案例精解[M].北京：清华大学出版社，2010.[5]张洪斌.网页制作与网站设计教程[M].北京：清华大学出版社.2009.[6]沈士根.Web程序设计:ASP.NET实用网站开发[M].北京：清华大学出版社.2009.[7]谢希仁.计算机网络[M].第五版.北京：电子工业出版社.2008.