网页设计论文.doc

网页设计论文 题目：网页设计专业：班级：姓名：学号： 年 月 日摘要我们已经进入互联网时代，互联网实现了世界范围的网络间的互联和信息共享，并已全面介入人们生产生活的方方面面。随着我国计算机技术的发展与普及，网络已经成为人与人之间交流的一种重要形式。我校作为教育部门，在发展教育的过程中更是离不开网络技术，因为它能够让复杂的事情简单化。比如我校的“最新公告”，通过网页技术，可以把最新的公告信息及时的公示出来，全校师生随时随地可通过访问此网页，及时地获得学校最新的信息，省去了人工通告的繁琐过程，省时又省力。本文即是介绍如何制作一个简单的HTML（HyperText Mark-up Language）网页。即通过Tomcat ，配置一个服务器，将用Dreamweaver制作的HTML网页（名为“学生详细信息”）放到服务器上，让大家都可以访问到并且录入自己的详细信息。目标是第三方可通过网络访问的我的网页，并且可以在网页的表单中输入自己的信息，同时网页对输入的内容应该有纠错检验机制。目的是希望通过此次动手实践，初步熟悉HTML技术及其一些基本操作，了解javascript代码及其实现的功能，以此对网页技术有一个大致的了解。1 前言1.1 课题意义自己动手实践用Dreamweaver11制作html网页，初步了解Dreamweaver软件的功能布局和一些基本操作；掌握对网页内容排版的操作，做到网页内容将来在浏览器中显示效果美观；初步了解并可以使用脚本语言对网页内容的控制，了解其基本语法结构；学会用Tomcat架设服务器，并将将自己做好的网页放在上面，以实现他人通过网络访问到此网页。1.2 课题目的使用Dreamweaver制作一个自己的网页，并将其放到使用Tomcat架设的服务器上，第三方可通过网络访问的我的网页。1.3 课题研究范围1.HTML网页制作。要求制作一个“学生详细信息表”的html网页，可以向表中输入数据、上传照片等，同时网页对输入的内容应该有纠错检验机制。2.Dreamweaver的使用。熟悉软件的基本布局，会用它制作html网页，并且应该会对网页布局进行调整，使其简洁、美观。3.脚本语言。了解脚本语言的基本语法，明白其工作机制，并且会用一些简单脚本实现对网页内容的控制。4.Tomcat的使用。要会用Tomcat架构服务器，将做好的html网页放到服务器上，使其可以在其他电脑上通过地址访问到。1.4 要解决的主要问题1.Dreamweaver调整好网页布局，使其各表格应尽可能对齐，整体界面简洁、美观。2.网页应实现对输入内容的纠错检验，实现上传照片的功能。3.要用Tomcat架构服务器，使做好的html网页可以在其他电脑上通过地址访问得到。2 Dreamweaver和网页开发技术2.1 网页制作工具Dreamweaver简介Dreamweaver是美国Macromedia公司开发的集网页制作和管理网站于一身的网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Dreamweaver是当前主流的站点和网页编辑器，其代码简洁、兼容性和整体功能都很强。Dreamweaver的介入，使得网页一些部分的实现变得更加直观简便。2.2网页开发技术几种网页开发技术介绍HTML、ASP、JSP、CGI、PHP。 HTML（HyperTextMark-upLanguage）即超文本标记语言，是WWW的描述语言。严格的来讲，HTML不能算做一门编程语言，因为它没有自己的数据类型，也没有分支、循环等控制结构。它的设计简单，结构灵活，允许在Web浏览器及其它兼容的应用程序中显示文本和图像，并且文档的某些部分可以成为超链接。完成后把这些文档保存为*.html文件，然后用浏览器打开。 HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。在早期，动态网页技术主要采用CGI技术，即Common Gateway Interface(公用网关接口)。在早期，你可以使用不同的程序编写合适的CGI程序，如Visual Basic,Delphi或C/C+等。虽然CGI技术成熟而且功能强大，但由于编程困难，效率低下，修改复杂等缺陷，所以有逐渐被新技术取代的趋势。ASP全名Active Server Pages，是一个WEB服务器端的开发环境，利用它可以产生和运行动态的、交互的、高性能的WEB服务应用程序。ASP采用脚本语言VB Script（Java script）作为自己的开发语言。 ASP更精确的说是一个中间件，这个中间件将Web上的请求转入到一个解释器中，在这个解释器中将所有的ASP的Script进行分析，再进行执行，而这时可以在这个中间件中去创建一个 PHP是一种跨平台的服务器端的嵌入式脚本语言. 它大量地借用C,Java和Perl语言的语法, 并耦合PHP自己的特性,使WEB开发者能够快速地写出动态生成页面.它支持目前绝大多数数据库。还有一点，PHP是完全免费的。 JSP 是Sun公司推出的新一代站点开发语言，他完全解决了目前ASP,PHP的一个通病脚本级执行（据说PHP4 也已经在Zend 的支持下，实现编译运行）。Sun 公司借助自己在Java 上的不凡造诣，将Java 从Java 应用程序 和 Java Applet 之外，又有新的硕果，就是JspJava Server Page。Jsp 可以在Serverlet和JavaBean的支持下，完成功能强大的站点程序。 由于水平所限，此次网页开发使用的是HTML技术，因为它相对简单，容易上手，适合初学者进行基本的练习操作。3 网页制作3.1网页整体布局设计最开始网页呈现在你面前的时侯，它就好像一张白纸，它需要任意挥洒设计才思。虽然我们能控制一切你所能控制的东西，在开始的时候，但最先好明白网页布局的基本概念。此次做网页主要是做一个表格样式，相对简单。在做时，一开始可以多生成几行几列，方便后面对单元格进行合并操作，最终调成自己需要的24（行）6（列）样式。添加文本输入框后，主要就是调整网页布局。开始可以直接拖动来调整，但这往往会牵一发而动全身，后面的调整动作很可能会把之前调好的部分再次破坏，所以应十分注意。可以在大体调的差不多后，在左侧点击拆分，然后直接在文本框的代码中调整数据大小，来实现对文本框长度的调整。我们的目的是使文本输入框正好填充整个单元格，并且确保文本框左侧的文字不会因为太长儿发生折行现象，为照片上传预留空间，调整好整个页面的文字格式和大小以及各边框的颜色，最终目的是保证整个页面整齐、简洁、美观。我做出的网页最终效果如下图所示：3.2 网页功能实现3.2.1网页纠错检验机制的实现以学号输入为例，实现两个功能：1.控制学号长度为10位此功能只需在代码中规定maxlength=10即可，代码如下 这样，如果输入的学号长度超过10位，是只能显示最前面的输入的10位数的。2.控制学号框中只能输入数字，否则报错通过脚本实现function inputnumber() if (event.keyCode47 & event.keyCode58) return true else alert(请输入数字);return false;效果如下图：3.上传照片 浏览本地图片，代码如下： 确定上传，代码如下： 照片处理，代码如下： 将上传的照片适当裁剪成140140大小 一次上传过程如下图所示： 4 使用Tomcat架构服务器4.1Tomcat的安装与配置Tomcat是目前比较常用的web服务器。此次我们使用从网上下载的绿色免安装版apache-tomcat-6.0.14，将其解压后放在C:Program Files目录下。由于Tomcat正常运行需要java运行库的支持，所以还需要先安装java。Java的安装比较简单，只需根据提示“下一步”即可，这里不再赘述。然后就要开始Tomcat的配置工作了，下面详细介绍。首先，要配置环境变量。在桌面“我的电脑”上点击右键，选择“属性”，弹出“系统属性”窗口，然后切换到“高级”选项卡，点击正下方的“环境变量”，在下方的“系统变量”中点击“新建”，变量名输入“java_home”，变量值输入java的安装位置，根据本机情况，我这里输入C:Javajdk1.5，然后点“确定”即可。过程截图如下：然后，就可以运行一下Tomcat。运行C:Program Filesapache-tomcat-6.0.14bin下的startup.bat，如果效果如下图，则表示运行正常。然后，在C:Program Filesapache-tomcat-6.0.14webapps文件夹中新建文件夹，命名为abc。再在abc中新建文件夹，命名为WEB-INF，再在其中新建xml文档，文档中代码如下： 然后回到abc文件夹中，将我们做好的网页index.html放到里面。 至此，我们对Tomcat的配置工作就完成了。4.2 Tomcat的测试 运行C:Program Filesapache-tomcat-6.0.14bin下的startup.bat，打开IE浏览器，地址栏输入:8080/,效果如图：输入:8080/abc，效果如图： 以上测试结果说明，我们通过tomcat架构服务器，成功的实现了从网上通过地址访问我们的html网页。5 结论本设计根据课程论文要求细则的要求制作，功能基本实现。可以在表单中填写数据，网页对填写的内容有一定的纠错检验机制，可以上传照片并做适当的剪裁，并且通过tomcat服务器部署起来可以网上访问得到。这是我首次运用Dreamweaver、java语言进行网页的制作，一切都是从零开始学习，所以制作的时候难免会过于简单，考虑的也不是很周全。在设计过程中不可避免地遇到了各种各样的问题，由于整个设计完全都是由个人设计的，有关Dreamweaver、java和架构服务器等方面许多细节问题都要靠自己去摸索，加之本人水平有限，因此还存在着许多不足之处。此次设计的是简单的静态网页，因此采用了在开发静态网页方面比较普遍使用的HTML开发语言，另外辅以java脚本语言。当然在制作的过程中碰到过一些比较棘手的问题都一一解决了，让我在解决问题方面的能力得到了提高。当然，最终的做品还是有一些不完善的地方，我也不是非常满意，比如：网页的纠错校验机制显得比较低级，不够智能；在IE中一切正常的网页，在firefox中却出现了悲剧的兼容性问题。但是，由于本人水平有限，加之时间很是仓促，只能做出一个基本满足要求的作品。虽然存在各种各样的问题，但是，这次动手实践经历的意义也是显而易见的。整个开发的过程对我来说是一次将理论应用于实践的过程，是将以前所学知识充分利