曲靖人才求职网站设计.doc

曲靖师范学院
本科生毕业论文

论文题目：曲靖人才求职网站设计

曲靖人才求职网站设计

摘 要

随着宽带网络的普及和信息化建设的大潮，互联网已经逐渐成为我们生活的一部分。曲靖人才求职网站设计的目的是为了方便人才与企业的交流。曲靖人才求职网站是一个结合了求职招聘等多功能浏览的求职招聘网站，制作该网站所使用的软件是Macromedia 公司推出的一款用于网页设计的软件——dreamweaver8。并对曲靖人才求职中心网页设计与制作的方法、工具等展开研究和探讨。网站设计简约，明了，分类比较细致，容易找到需要的类别。在介绍网页设计与制作语言的基础上，着重使用JavaScript作为工具语言进行网页设计与制作的实际操作，分别对基于对象的JavaScript语言、内部对象系统的使用及WEB页信息交互——窗口和框架进行详细描述，并利用具体的实例进行验证。

关键词：网页设计 JavaScript语言 网页制作 ASP

Qujing talent job site design

Abstract: With the popularity of broadband network and informatization tide, the Internet has gradually become a part of our life. Qujing talent job site is designed to facilitate personnel exchanges.Qujing talent job site is a combination of the job recruitment multifunctional browsing job recruitment website, the use of making the website software is launched one of Macromedia company for webpage design software -- dreamweaver8. Research and discussion in this paper, the method of webpage design and making of Qujing talent job center tools etc. Web site design simple, clear, careful classification, easy to find the desired class.Based on introducing the webpage design and production of language, the actual operation focused on the use of JavaScript as a tool for language webpage design and making, respectively on the use and the WEB page information interaction object language JavaScript, internal object system based on windows and framework -- a detailed description, and tested by examples.

Keywords: Web page design JavaScript Webpage making ASP

目 录
第一章 绪论 1
1.1 网页设计概述 1
1.2 网页设计的用途及要素 1
第二章 开发软件简介 2
2.1 Dreamweaver 简介 2
2.2 HTML 语言简介 3
2.3 网页制作常用脚本语言简介 4
2.4 Flash 简介 7
2.5 Photoshop 简介 9
第三章 网站总体分析与设计 9
3.1 材料收集整理 10
3.2 结构设计 10
3.3 功能设计 11
第四章 网站制作 13
4.1 制作步骤 13
4.1.1 框架结构制作 13
4.1.2 主页面制作 14
4.1.3 子页面的制作 17
4.2 数据库的连接及实现 19
4.3 制作技巧和存在问题与解决方法 20
第五章 网站的发布与维护 21
5.1 申请网站空间和域名 21
5.2 网页展示 22
5.3 网站维护 22
总 结 22
参考文献 23
致 谢 24

第一章 绪论
1.1 网页设计概述
网站是企业向用户和网民提供信息(包括产品和服务)的一种方式,是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。
1.2 网页设计的用途及要素
随着21世纪的到来，计算机和通信技术的结合正在推动着社会信息化的技术革命，网络已经逐渐成为人们工作和生活部可缺少的一部分。人们通过连接各个部门、地区、国家，甚至全世界的计算机网络来获取、交换存储信息。而制作用于承载网络信息的网页也成为一种时尚，用户通过制作网页不仅可以在学习或工作的相关领域与更多的人进行交流，而且也会为自己带来更多的人进行交流，而且也会为自己带来更多的发展机会。当然，要制作出美观的网页，就要学习网页制作的相关知识，包括制作网页、网页元素以及设计网页效果等知识。一个网页的成功与否，很重要的因素就在于制作者对网页基本知识的掌握程度，富有创意的构思与巧妙的页面元素处理会让网页内容更加鲜明与美观。
网页设计的两大要素是：整体风格和色彩搭配。
1.确定网站的整体风格
将标志logo，尽可能的放在每个页面上最突出的位置；突出标准色彩；总结一句能反映贵站精髓的宣传标语；相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的。
2.网页色彩的搭配
用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感；用两种色彩。先选定一种色彩，然后选择它的对比色；用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。
在网页配色中，还要切记一些误区：
不要将所有颜色都用到，尽量控制在三至五种色彩以内；背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。

第二章 开发软件简介
2.1 Dreamweaver 简介
Dreamweaver是美国MACROMEDIA公司开发的网页制作和管理网站的网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。其特点有以下几方面：
1.最佳的制作效率
Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dremweaver能与您喜爱的设计工具，如Playback Flash，Shockwave 和外挂模组等搭配，不需离开Dreamweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。
2.方便的网站管理
使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，Dreamweaver会自动更新所有连结。使用支援文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。
3.无可比拟的控制能力
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得 Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP，Apache，roadVision，ColdFusion，iCAT，Tango与自行发展的应用软体。当您正使用Dreamweaver在设制作网页设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。梦幻样版和XML Dreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出XML 内容。Dreamweaver还集成了程序开发语言，对ASP、NET、PHP、JS的基本语言和连接操作数据库，都是完全支持的。
2.2 HTML 语言简介
HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML 命令组成的描述性文本，HTML 命令可以说明文字、图形、动画、声音、表格、链接等。HTML 的结构包括头部（Head）、（主体）Body，两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。HTML 文档制作不是很复杂，且功能强大，支持不同数据格式的文件镶入，这也是WWW 盛行的原因之一，其主要特点如下：
1.简易性，HTML版本升级采用超集方式，从而更加灵活方便。
2.可扩展性，HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。
3.平台无关性。虽然PC 机大行其道，但使用MAC 等其他机器的大有人在，HTML可以使用在广泛的平台上，这也是WWW 盛行的另一个原因。
HTML 其实是文本，它需要浏览器的解释，HTML的编辑器大体可以分为三种：
1.基本编辑软件，使用WINDOWS自带的记事本或写字版都可以编写，当然，如果你用WPS 来编写，也可以。不过存盘时请使用.htm或.html作为扩展名，这样浏览器就可以解释执行了。
2.半所见即所得软件，这种软件能大大提高开发效率，它可以使你在很短的时间内做出Homepage，且可以学习HTML，这种类型的软件主要有HOTDOG，还有国产的软件网页作坊。
3.所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页这类软件主要有Frontpage98，DREAMWEAVER。
更先进难懂的技术XHTML?XHTML中的X是可扩展的意思，XHTML就是可扩展的超文本标记语言，它比HTML有更严格的要求。如果说HTML 是汉语，那么XHTML就是标准普通话。对于现在才刚刚开始学习网页设计的朋友，直接学习XHTML是最佳的选择。事实上它也属于HTML家族，并且它是基于XML的，对比以前各个版本的HTML，它具有更严格的书写标准、更好的跨平台能力。由于某些需要，能够实现的一些功能交给了CSS，这意味着你将需要学习两种技术。但是这确实是Web未来发展的潮流。
2.3 网页制作常用脚本语言简介
一、ASP
ASP技术是Microsoft公司开发的一套全新的服务器端脚本程序环境。它可以根据客户端的不同请求，在服务器端经过相应的ASP程序处理生成不同的静态HTML页面并穿回给浏览器。ASP自身有很多优点，这些优点使它成为了当今世界网络上应用最多的脚本设计环境。
ASP的全称是Active Server Pages,中文名称叫做动态服务器网页，其功能在于可以使用它来开发运行在Windows服务器平台上的动态网页和网页。尽管我们常把“ASP脚本”挂在嘴边，但ASP既不是一种编程语言，也不是开发工具软件，同样也不是一种应用程序，它实际上是一种开发动态网页的技术。
ASP的脚本语言可以是VBScript或者Jscript，也可以是两者的结合，所以任何一种文本编辑器都能编辑ASP脚本，当然不同的编辑器开发调试效率是不一样的。和通常的VBScript和Jscript应用程序不同，ASP所有的程序都是在服务器端运行的，而不是在浏览器或者客户端执行的，这样用户就不必担心自己的浏览器能否运行所编写的ASP代码了。
程序执行完毕，服务器仅将执行的结果返回给客户端浏览器，这样即使客户端的浏览器不支持VBScript或Jscript，但是仍然可以浏览动态的网页。VBScript是IIS默认的脚本语言，当然可以在IIS中更改默认的脚本语言。如果改成Jscript，那么默认的脚本语言就是Jscript。因为VBScript在属性和方法上的灵活表现方式更适合作为服务器的脚本，所以推荐大家用VBScript作为ASP的默认脚本语言。
由于ASP是一种服务器的脚本语言，所以并不是所有的Web服务器都具有这个功能。ASP是由Microsoft公司推出的，当然在目前页只有Microsoft公司推出的服务器能实现ASP的强大功能，其他的一些服务器在安装了ASP组件后才能实现这个功能。
Microsoft公司推出的支持ASP的Web服务器有以下几个：
Microsoft Internet Information Server version (IIS);
Microsoft Peer Web Server;
Microsoft Personal WebServer (PWS);
其中前两个主要是为Microsoft公司的Windowns NT /2000 /XP系统开发的，当然它们的功能以及稳定性都要强很多。目前大型的站点大多是有IIS作为服务器，而PWS是为一般的PC用户开发的。
既然ASP是在服务器端执行的，因此访问这些以.asp为后缀的文件时，就不能使用实际的物理路径，而只能用虚拟路径。使用虚拟路径访问ASP最简单的方法就是将ASP文件拷贝到IIS的安装目录中 (默认的安装目录为C：\Inetpub\wwwroot),然后就可以通过IE浏览器直接访问了。
访问文件名为“index.asp”的ASP文件，如果在IE浏览器中用物理路径访问，本来期望的结果是不会出现的，浏览器只会显示普通的HTML页面。为此应该将“index.asp”文件拷贝到服务器目录下，然后通过虚拟路径来访问该页面。如果程序没有错的话即可看到预期的效果。
通过上述介绍，大家应该了解到一个ASP页面从服务器端传送到客户端的原理与一般静态HTML页面是不同的。
从客户端的URL请求到服务器反馈一个页面给浏览器，其大致的流程如下：
1.用户在客户端浏览器中输入一个网址，与服务器建立连接。
2.服务器根据用户请求的网址在硬盘上找到相应的文件。
3.如果文件是普通的HTML文档，那么服务器将直接把该文件传送到客户端。
4.:如果文件是服务器脚本，那么服务器将运行这个文件。如果需要查询数据库，则通过ADO组件连接ODBC或DSN数据源访问数据库。进行了一系列的运算和解释后，将最终结果形成一个纯HTML文档。
5.把这个文档传送到客户端。
6.结束这次连接。
由于最后传送给客户端的是一个纯HTML文本文件，因此用户在浏览器上是看不到ASP文件的源代码的。

二、JavaScript
JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择，具有以下几个基本特点：
1.是脚本编写语言
JavaScript是一种脚本语言，它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个易的开发过程。
它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。
2.基于对象的语言
JavaScript是一种基于对象的语言，同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。
3.简单性
JavaScript的简单性主要体现在：首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计, 从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。
4.安全性
JavaScript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。
5.动态性
JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(Home Page)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。
6.跨平台性
JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。
实际上JavaScript最杰出之处在于可以用很小的程序做大量的事。无须有高性能的电脑，软件仅需一个字处理软件及浏览器，无须WEB服务器通道，通过自己的电脑即可完成所有的事情。
总之，JavaScript是一种新的描述语言，它可以被嵌入到HTML的文件之中。 JavaScript语言可以做到回应使用者的需求事件(如：form的输入)，而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端(server)处理，再传回来的过程，而直接可以被客户端(client)的应用程式所处理。
JavaScript和Java很类似，但到底并不一样！Java是一种比JavaScript更复杂许多的程式语言，而JavaScript 则是相当容易了解的语言。JavaScript创作者可以不那麽注重程式技巧，所以许多 Java的特性在 Java Script 中并不支援。
2.4 Flash 简介
Flash 的前身是Future Wave公司的Future Splash，是世界上第一个商用的二维矢量动画软件，用于设计和编辑Flash文档。1996年11月，美国Macromedia公司收购了Future Wave，并将其改名为Flash。在出到Flash 8 以后，Macromedia又被Adobe公司收购。最新版本为：Adobe Flash CS5 。Flash通常也指MacromediFlash Player（现Adobe Flash Player），用于播放Flash 文件。
Flash的特性：
1.Flash被大量应用于互联网网页的矢量动画设计。因为使用向量运算（Vector Graphics）的方式，产生出来的影片占用存储空间较小。
2.使用Flash创作出的影片有自己的特殊档案格式（swf），该公司声称全世界97%的网络浏览器都内建Flash播放器（Flash Player）。
3.Flash是Macromedia提出的“富因特网应用”（RIA）概念的实现平台Flash是一种创作工具，设计人员和开发人员可使用它来创建演示文稿、应用程序和其它允许用户交互的内容。Flash可以包含简单的动画、视频内容、复杂演示文稿和应用程序以及介于它们之间的任何内容。通常，使用Flash创作的各个内容单元称为应用程序􀌌即使它们可能只是很简单的动画。您也可以通过添加图片、声音、视频和特殊效果，构建包含丰富媒体的Flash应用程序。
Flash 特别适用于创建通过Internet提供的内容，因为它的文件非常小。Flash是通过广泛使用矢量图形做到这一点的。与位图图形相比，矢量图形需要的内存和存储空间小很多，因为它们是以数学公式而不是大型数据集来表示的。位图图形之所以更大，是因为图像中的每个像素都需要一组单独的数据来表示。
要在Flash中构建应用程序，可以使用Flash绘图工具创建图形，并将其它媒体元素导入Flash文档。接下来，定义如何以及何时使用各个元素来创建设想中的应用程序。
在 Flash中创作内容时，需要在Flash文档文件中工作。Flash文档的文件扩展名为.fla (FLA)。Flash文档有四个主要部分：舞台是在回放过程中显示图形、视频、按钮等内容的位置。在Flash 基础中将对舞台做详细介绍。
时间轴用来通知Flash显示图形和其它项目元素的时间，也可以使用时间轴指定舞台上各图形的分层顺序。位于较高图层中的图形显示在较低图层中的图形的上方。库面板是Flash显示Flash文档中的媒体元素列表的位置。ActionScript代码可用来向文档中的媒体元素添加交互式内容。例如，可以添加代码以便用户在单击某按钮时显示一幅新图像，还可以使用ActionScript向应用程序添加逻辑。逻辑使应用程序能够根据用户的操作和其它情况采取不同的工作方式。Flash包括两个版本的ActionScript，可满足创作者的不同具体需要。有关编写ActionScript的详细信息􀌌请参阅"帮助"面板中的"学习 Flash中的ActionScript 2.0"。
Flash包含了许多种功能,如预置的拖放用户界面组件,可以轻松地将ActionScript添加到文档的内置行为，以及可以添加到媒体对象的特殊效果。这些功能使Flash不仅功能强，而且易于使用。完成Flash文档的创作后，可以使用"文件">"发布"命令发布它。这会创建文件的一个压缩版本，其扩展名为.swf(SWF).然后,就可以使用FlashPlayer在Web浏览器中播放SWF文件，或者将其作为独立的应用程序进行播放。

2.5 Photoshop 简介
在子页面上,大量的图片用到了PS软件来处理，经过处理后更能符合网页上的美观和效果。
Photoshop是Adobe公司旗下最为出名的图像处理软件之一，集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件，深受广大平面设计人员和电脑美术爱好者的喜爱。
从功能上看，Photoshop可分为图像编辑、图像合成、校色调色及特效制作部分。图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜象、透视等。也可进行复制、去除斑点、修补、修饰图像的残损等。这在婚纱摄影、人像处理制作中有非常大的用场，去除人像上不满意的部分，进行美化加工，得到让人非常满意的效果。
图像合成则是将几幅图像通过图层操作、工具应用合成完整的、传达明确意义的图像，这是美术设计的必经之路。Photoshop提供的绘图工具让外来图像与创意很好地融合，成为可能使图像的合成天衣无缝。
校色调色是Photoshop中深具威力的功能之一，可方便快捷地对图像的颜色进行明暗、色编的调整和校正，也可在不同颜色进行切换以满足图像在不同领域如网页设计、印刷、多媒体等方面应用。
特效制作在Photoshop中主要由滤镜、通道及工具综合应用完成。包括图像的特效创意和特效字的制作，如油画、浮雕、石膏画、素描等常用的传统美术技巧都可藉由Photoshop特效完成。而各种特效字的制作更是很多美术设计师热衷于Photoshop的研究的原因。
第三章 网站总体分析与设计
制作这个网站，是因为目前社会面对着许多人才就业的压力，企业找不到员工，找工作的人找不到工作，制作这样的网站，找工作的人可以系统的在曲靖搜寻工作岗位。而企业可以详细的招自己所需的人才。本网站主要是为了方便人们找工作，和方便企业招人才。这个网站的优点就是简单随意，方便找到需要的类别。其中在主页展示里所用到的一些技巧和不足是希望有志通道和的朋友相互学习，相互帮助。
3.1 材料收集整理
收集曲靖多家企业的招聘信息，关注曲靖近段时间的招聘会。明确了网站的主题，围绕主题开始搜集材料了。材料从图书、报纸、光盘、多媒体上得来，也从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。
3.2 结构设计
登录界面
标题
导航条和超链接
注册
搜索引擎
个人主页展示
框架页
表1. 主页面设计表

图1. 搜索导航条设计图

最新招聘信息
最新动态
热门职位
滚动文字
特效图片

媒体聚焦
视频新闻
热点新闻

滚动图片
版权所有
表2. 框架页设计表
3.3 功能设计
功能模块图如图2
Web服务器
前 台 显 示
数据库
身份验证
重新验证
初始化
非正常退出
后台管理
注册管理
简历管理
留言板管理
个人主页展示管理
退出
登录管理

图2. 网站功能模块设计图
1.前台显示
前台显示是指浏览着打开主页浏览到的页面通常上网所浏览的就是网站的前台，它是浏览着信息的平台。前台是可以根据网站的需要，进行各种方式的插入，自动更新，如显示栏目导航。本文前台显示的是登录、注册、投简历、留言等。通过前台的相应提示，点击即可浏览其中的内容。
2.后台管理
所谓的后台是相对前台来说的，它一般由管理员来操作—浏览及修改。后台其实就是一个用ASP编写的网页，它的一些连接是前台，修改了里面的内容，前台会随着修改，而不用去代码中修改，提高了效率的同事也方便那些不懂ASP的管理者。如留言板的管理，可以删除一些留言。
会员注册功能流程图[[]. 倪庆军, 孙良军.Dreaweavr+Photoshop+Flash网站建设课堂实录[M]. 北京: 人民邮电出版社, 2009.5.
[2]. 徐燕华, 彭海云. 网页设计师实用教程[M]. 北京: 清华大学出版社, 2006.6.
[3]. 王楠,李岭松. 网站设计教程与上机指导[M]. 北京: 清华大学出版社, 2006.6.
[4]. 吴涛. 网站全程设计技术（修订本）[M]. 北京: 清华大学出版社, 2006.7.
[5]. 龙马工作室. ASP+SQL Server组建动态网站实例精讲[M]. 北京: 人民邮电出版社, 2004.8.
[6]. 张德芬. 动态网页设计(Dreamweaver CS3+ASP.NET)[M]. 北京: 水利水电出版社出版, 2011.1.
[7]. 赵增敏. ASP动态网页设计[M]. 电子工业出版社, 2009.8.
[8]. 任学文, 范严. 网页设计与制作[M]. 中国科学技术出版社, 2006.8.
[9]. 武创, 王惠. 网页设计探索之旅[M]. 电子工业出版社, 2006.9.
[10]. 杜巧玲, 网页设计超级梦幻组合[M]. 清华大学出版社, 2003.3.
[11]. 吴黎, 罗云芳.网页设计教程[M]. 武汉大学出版社, 2006.2.
[12]. 庄王健, 网页设计三剑客白金教程[M]. 电子工业出版社,2006.1.
[13]. 许莉. 网页制作技术[M].第二版. 北京: 水利水电出版社出版, 2011.1.
[14]. 杨选辉. 网页设计与制作教程[M]. 清华大学出版社,2009.1.
[15]. 刘启明, 韩庆田. 网页设计教程[M]. 清华大学出版社,2010.2.
[16]. 张军, 王佩楷. ASP动态网站设计经典案例[M]. 北京: 机械工业出版社, 2005.8.
]
用户进入注册界面
填写注册信息
客户端判别填写信息是否符合要求

的信息是否正确
提交表单
判别提交的数据是否符合要求
数据插入数据库是否符合要求
用户注册成功
数据插入数据库是否成功
N
显示不符合的信息
N
显示不符合的信息
显示数据库错误信息
N

图3. 会员注册流程图
第四章 网站制作
4.1 制作步骤
4.1.1 框架结构制作
建立2个表格，第一个表格作为主业面，在第二个表格中插入一个框架。框架结构里面的内容作为子页面的内容。
代码如下：
<body>
<table><tr><td></td></tr></table>(第一个表格)
<table><tr><td><iframe src=”sy/sy.html” name=”zt”></iframe>
</td></tr></table>
<body>
效果如下图：

图4. 框架结构制作效果图

4.1.2 主页面制作
1.建立登录界面（表单的应用）
表单是一个包含表单元素的区域。 表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入 信息的元素。 表单使用表单标签（<form>）定义。 HTML框架结构标签（<frameset>）定义如何将窗口分割为框架 每个 frameset 定义了一系列行或列 rows/columns 的值规定了每行或每列占据屏幕的面积 CSS。示例如图5

图 5. 登录界面效果图
代码如下
<table width="200" height="96" border="0" cellpadding="0" cellspacing="0">
<form action="" method="get">
<tr>
<td width="62" height="35">用户名</td>
<td width="168" colspan="2"><label>
<input type="text" name="textfield" id="textfield" /></label></td>
</tr>
<tr>
<td>密码</td>
<td colspan="2"><label>
<input type="password" name="textfield2" id="textfield2" />
</label>&nbsp;</td>
</tr>
<tr>
<td height="40" colspan="3"><label>
<input type="submit" name="button" id="button" value="个人登陆" /></label> <label>
<input type="submit" name="button" id="button" value="企业登陆" />
</label></td>
</tr>
</form> 
</table>
应用到的JavaScrip语言程序如下：
<script language='JavaScript'>
function chkLogin()
{
var f = document.forms['forLogin'];
if(f.txtUser.value=='')
{
alert('请输入用户名');
f.txtUser.focus();
return false;
}
if(f.txtPwd.value =='')
{
alert('请输入密码');
f.txtPwd.focus();
return false;
}
return true;
}
</script>
2.标题制作（Flash的应用）如图6

图6. 标题效果图
3.导航条制作（CSS的应用）如图7
随着Internet的迅猛发展，HTML被广泛应用，上网的人们当然希望网页做得漂亮些，因此HTML排版和界面效果的局限性日益暴露出来。为了解决这个问题，人们也走了不少弯路，用了一些不好的方法，比如给HTML增加很多的属性结果将代码变得很臃肿，将文本变成图片，过多利用Table来排版，用空白的图片表示白色的空间等。直到CSS出现。CSS可算是网页设计的一个突破，它解决了网页界面排版的难题。可以这么说，HTML的Tag主要是定义网页的内容(Content)，而CSS决定这些网页内容如何显示(Layout)。CSS的英文是Cascading Style Sheets，中文可以翻译成串联式样式表。CSS按其位置可以分成三种：1)内嵌样式(Inline Style) 2)内部样式表(Internal Style Sheet) 3)外部样式表(External Style Sheet)
<html>
<head><title>内嵌式样式(Inline Style)</title></head>
<body>
<P style="font-size:20pt; color:red">这个内嵌样式(Inline Style)定义段落里面的文字是20pt字体，字体颜色是红色。</p>
<P>这段文字没有使用内嵌样式。</p>
</body>
</html>
CSS语法由三部分构成：选择器、属性和值：selector{property: value}选择器(selector)通常是你希望定义的HTML元素或标签，属性 (property)是你希望 改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组 成了一个完整的样式声明（declaration）:body {color: blue}上面这行代码的作用是将 body 元素内的文字颜色定义为蓝色。在上述例子中，body是选择器，而包括在花括号内的的部分是声明。声明依次由两部分构成：属性和值，color为属性，blue为值。

图7. CSS导航条效果图
4.1.3 子页面的制作
1.框架页面的制作
最新动态自动翻页效果展示如图8
图8. 框架页面效果图

2.注册页面的制作：
注册界面的制作所用的是表单的应用，同时用到数据库，单击“提交”时可以将注册信息提交到后台数据库中。对表单的添加行为—插入记录等和数据库的连接综合应用。

图9. 注册界面效果图

3.个人主页展示

图10. 个人主页展示图
4