范文一:动态网页设计论文
毕业设计(论文)
题 目: 动态网页设计 专 业:
班 级:
学 生: 指导教师:
二0一0年
摘 要
在Internet飞速发展的今天,互联网已成为人们快速获取、发布和传递信息的重要渠道,正以一种前所未有的冲击力影响着人类的活动。它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显的格外重要,它已成为政府、企事业单位信息化建设中的重要组成部分。
现今的社会,人们已经离不开了网络,网络已经成为人与人之间交流的一种形式,它能够把事情的复杂化转为简单化,摆脱了时间和空间的限制。网站为消费者提供了一个网络生活空间,通过其网页展示了企业介绍、企业荣誉、产品介绍、招商信息、加盟程序、留言等一系列内容的介绍。浏览者不仅可以利用留言板经济而又快捷地与外界进行各种信息的沟通,也可以直接在网上申请加盟。
本论文还介绍了网页的结构分析和具体功能实现,网页的界面和运作方式,尽力模拟近代网页普遍性形式,成为一个完整的动态网站
关键字
Dreamweaver;Php;PhpMyAdmin;动态网页
目 录
1 引言 ................................................... 1
2 网页制作概述 ........................................... 1
2.1 网页的类型 ......................................................................................... 1
2.1.1 静态页面 .................................................................................. 1
2.1.2 动态页面 .................................................................................. 2
2.2 网页开发技术 ..................................................................................... 2
2.3 网页布局 ............................................................................................. 3
2.3.1 网页布局的基本概念 .............................................................. 3
2.3.2网页布局方法 ........................................................................... 5
2.3.2 网页布局技术 .......................................................................... 7
2.4网页配色 .............................................................................................. 8
2.5 网页设计流程 ..................................................................................... 9
3 动态网页开发环境和技术................................. 9
3.1 了解Dreamweaver开发工具 .............................................................. 9
3.2 Php语言基础知识 ............................................................................. 11
3.3 开发环境介绍 ................................................................................... 12
4 设计及具体代码实现 .................................... 12
4.1网页结构设计 .................................................................................... 12
4.2创建数据库 ........................................................................................ 13
4.3主要模块的代码实现 ......................................................................... 14
4.3.1 注册代码的实现 .................................................................... 14
4.3.2 登陆及退出登录代码的实现 ................................................. 16
4.3.3留言代码的实现 ..................................................................... 18
4.4运行测试 ............................................................................................ 19
4.4.1 注册 ....................................................................................... 19
4.4.2 登陆 ....................................................................................... 21
4.4.3留言 ........................................................................................ 22
4.5遇到的问题及解决方法 ..................................................................... 23
结 束 语 ................................................ 24 致 谢 ............................................... - 25 - 参考文献 ............................... 错误!未定义书签。
1 引言
网页是网站信息发布与表现的一种主要形式。因此要实现一个网站,必须了解网页制作的相关知识。较流行的开发工具有:Dreamweaver,Php,PhpMyAdmin。
Dreamweaver是建立Web站点和应用程序的专业工具,它将可视布局工具、应用程序开发功能和代码编辑支持组合成一个功能强大的工具,可利用它快速创建界面及站点的应用程序。Php因为语法简单、开源、跨平台,而且功能强大,同时能与Windows的操作系统无缝结合,得到广大用户欢迎并迅速成为各类网站制作的主流开发环境。使用PhpMyAdmin无须编写任何代码,只需通过直观的可视化操作就可以完成大部分数据库管理任务,是一个面向对象的、采用事件驱动机制的关系型数据库管理系统。 [2][1]
2 网页制作概述
2.1 网页的类型
2.1.1 静态页面
静态页面是网页的代码都在页面中,不需要执行asp,php,jsp,.net等程序生成客户端网页代码的网页。静态页面不能自主管理发布更新的页面,如果想更新网页内容,要通过FTP软件把文件DOWN下来用网页制作软件修改(通过fso等技术例外)。但是静态页面最大的好处是下载速度快,因为不需要程序运算和数据库连接。常见的静态页面以.html、.htm为扩展名的。并非网站上没有动画的就是静态页面。 [3]
2.1.2 动态页面
动态页面是通过执行asp、php、jsp、.net等程序生成客户端网页代码的网页。动态页面通常可以通过网站后台管理系统对网站的内容进行更新管理。发布新闻,发布公司产品,交流互动,博客,网上调查等,这都是动态网站的一些功能,也是我们常见的。动态网页是需要语言环境支持的,动态页面常见的扩展名有:.asp、 .php、 .jsp 、.cgi 等。动态页面的“动态”是网站与客户端用户互动的意思,而非网页上有动画的就是动态页面。
动态网页是最常用的网站建设的一种表达形式,其优点在于可以根据先前所制定好的程序界面,根据用户的不同请求返回相应的数据。可以说是一对多的关系。从而达到资源的最大利用和节省服务器上的物理资源。如果今后需要改变站点风格,只需要重新制作前台所访问的数据即可。只要数据库结构不变,可以很快的进行改版的。 [4]
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技术成熟而且功能强大,但由于编程困难,效率低下,修改复杂等缺陷,所以有逐渐被新技术取代的趋势。 [5]
ASP全名Active Server Pages,是一个WEB服务器端的开发环境,利用它可以产生和运行动态的、交互的、高性能的WEB服务应用程序。ASP采用脚本语言VB Script(Java script)作为自己的开发语言。 ASP更精确的说是一个中间件,这个中间件将Web上的请求转入到一个解释器中,在这个解释器中将所有的ASP的Script进行分析,再进行执行,而这时可以在这个中间件中去创建一个*.html文件(静态网页)。 PHP是一种跨平台的服务器端的嵌入式脚本语言. 它大量地借用C,Java和Perl语言的语法, 并耦合PHP自己的特性,使WEB开发者能够快速地写出动态生成页面.它支持目前绝大多数数据库。还有一点,PHP是完全免费的。
JSP 是Sun公司推出的新一代站点开发语言,他完全解决了目前ASP,PHP的一个通病--脚本级执行(据说PHP4 也已经在Zend 的支持下,实现编译运行)。Sun 公司借助自己在Java 上的不凡造诣,将Java 从Java 应用程序 和 Java Applet 之外,又有新的硕果,就是Jsp--Java Server Page。Jsp 可以在Serverlet和JavaBean的支持下,完成功能强大的站点程序。 [6]
2.3 网页布局
2.3.1 网页布局的基本概念
最开始,网页呈现在你面前的时侯,它就好像一张白纸,它需要你任意挥洒你的设计才思,可以创造出自己的设计方案。,虽然你能控制一切你所能控制的东西,但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯,那么你可以在此基础上加上自己的东西,这样你创造出来的网页才能更好的被别人接受。
(1) 页面尺寸
由于页面尺寸和显示器大小及分辨率有关系,网页的局限性就在于你无法突破显示器的范围,而且因为浏览器也将占去不少空间,留下给你的页面范围变得越来越小。一般分辨率在800x600的情况下,页面的显示尺寸为:780x428个象素;分辨率在640x480的情况下,页面的显示尺寸为:620X311个象素;分辨率在1024X768的情况下,页面的显示尺寸为:1007x600。从以
上数据可以看出,分辨率越高页面尺寸越大。
浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都可以取消或者增加,那么当你显示全部的工具栏时,和关闭全部工具栏时,页面的尺寸是不一样的。
在网页设计过程中,向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。除非你能肯定站点的内容能吸引大家拖动,否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容,那么你最好能在上面做上页面内部连接,方便访问者浏览。
(2)整体造型
造型就是创造出来的物体形象,这里是指页面的整体形象。这种形象应该是一个整体,图形与文本的接合应该是层叠有序。虽然,显示器和浏览器都是矩形,但对于页面的造型,你可以充分运用自然界中的其它形状以及它们的组合:矩形,圆形,三角形,菱形等。
对于不同的形状,它们所代表的意义是不同的。比如矩形代表着正式,规则,你注意到很多ICP和政府网页都是以矩形为整体造型;圆形带表着柔和,团结,温暖,安全等,许多时尚站点喜欢以圆形为页面整体造型;三角形代表着力量,权威,牢固,侵略等,许多大型的商业站点为显示它的权威性常以三角形为页面整体造型;菱形代表着平衡,协调,公平,一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义,但目前的网页制作多数是接合多个图形加以设计,在这其中某种图形的构图比例可能占的多一些。
(3)页头
页头又可称之为页眉,页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样,访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键,它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。
(4)文本
文本在页面中出现都数以行或者块(段落)出现,它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限,文本放置的位置的灵活性非常小,而随着DHTML的兴起,文本已经可以按照自己的要求放置
到页面的任何位置。
(5)页脚
页脚和页头相呼应。页头是放置站点主题的地方,而页脚是放置制作者或者公司信息的地方。你能看到,许多制作信息都是放置在页脚的。
(6)图片
图片和文本是网页的两大构成元素,却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。
(7)多媒体
除了文本和图片,还有声音,动画,视频等等其它媒体。虽然它们不是经常能被利用到,但随着动态网页的兴起,它们在网页布局上也将变得更重要。
2.3.2网页布局方法
网页布局的方法有两种,第一种为纸上布局;第二种为软件布局。下面分别加以介绍。
(1)纸上布局法
许多网页制作者不喜欢先画出页面布局的草图,而是直接在网页设计器里边设计布局边加内容。这种不打草稿的方法不能让你设计出优秀的网页来。所以在开始制作网页时,要先在纸上画出你页面的布局草图来。
首先,尺寸的选择。目前一般800X600的分辨率为约定俗成的浏览模式。所以为了照顾大多数访问者,你页面的尺寸以800X600的分辨率为准。
其次,造型的选择。先在白纸上画出象征浏览器窗口的矩形,这个矩形就是你布局的范围了。选择一个形状作为整个页面的主题造型,我们选择圆形,因为它代表者柔和,和时尚流行比较相称,然后在矩形框架里随意画出来,你可以试者在增加一些圆形或者其它形状。这样画下来,你会发现很乱。其实,如果你一开始就想设计出一个完美的布局来是比较困难的,而你要在这看似很乱的图形中找出隐藏在其中的特别的造型出来。还要注意一点,你不要担心你设计的布局是否能够实现。事实上,只要你能想到的布局都能靠现今的HTML技术实现。如图2-1和图2-2
图2-1 手绘布局图 图2-2 布局图
考虑到左边向左凹的弧线,为了取得平衡我们在页面右边增加了一个矩形,(也可以是一条线段) 如图2-3。
图2-3 布局图的改善
然后,增加页头。一般页头都是位于页面顶部,所以我们为图3增加了一个页头,为了和左边的弧线和右边的矩形取得平衡,我们增加了一个矩形页头并让页头相交与左边的弧线,如图2-4。
图2-4 页头的图示
然后,增加文本。页面的空白部分加别加入文本和图形。因为在页面右边有矩形作为陪衬,所以文本放置在空白部分不会因为左边的弧线而显得不协调,如图2-5。
图2-5 文本的图示
最后,增加图片。图片是美化页面和说明内容必须的媒体。在这里把图片加入到适当的地方,如图2-6。
图2-6 图片的图示
经过以上的几个步骤,一个时尚页面的大概布局就出现了。当然,它不是最后的结果,而是你以后制作时的重要参考依据。
(2)软件布局法
除了纸上布局,还可以利用软件来完成这些工作。如利用Photoshop。Photoshop所具有的对图像的编辑功能用到设计网页布局上更显得心应手。利用Photoshop可以方便的使用颜色,使用图形,并且可以利用层的功能设计出用纸张无法实现的布局意念。
2.3.2 网页布局技术
(1)层叠样式表的应用
在新的HTML4.0标准中,CSS(层叠样式表)被提出来,它能完全精确的定位文本和图片。CSS有点复杂,但它的确是一个好的布局方法。曾经无法实现的想法利用CSS都能实现。目前在许多站点上,层叠样式表的运用是一个站点优秀的体现。比如一些企业网站。
(2)表格布局
表格布局被广泛使用,已经成为一个潜在的标准。随便浏览一个站点,它们一定是用表格布局的。表格布局的优势在于它能对不同对象加以处理,而又不用担心不同对象之间的影响。而且表格在定位图片和文本上比起用CSS更加方便。表格布局唯一的缺点是,当你用了过多表格时,页面下载速度受到影响。对于表格布局,打开一个站点的首页,然后保存为HTML文件,利用网页编辑工具打开它(要所见即所得的软件),会可以看到这个页面是如[8][7]
何利用表格的。
(3)框架布局
由于它的兼容性,框架布局并没有被所有人接受。但从布局上考虑,框架结构不失为一个好的布局方法。它如同表格布局一样,把不同对象放置到不同页面加以处理,因为框架可以取消边框,所以一般来说不影响整体美观。
2.4网页配色
网站充斥着枯燥的设计,惠普、IBM、戴尔、微软,以及其他数不尽的网站(相似的布局,相似的配色)。这样一种标准化的界面可以使浏览更方便,但同时带给用户一种很世俗的体验,并不能与访客产生一种积极的联系。
面对这种单调的设计,有一种解决方法,就是使用颜色。可能没有其他设计元素能像颜色一样能影响人们对世界感受。颜色可以瞬间改变我们的情绪和意见。颜色会让我们感觉到舒适、敬畏,或者激动。在界面设计中,颜色组合对设计非常有用。可以区分设计让用户更加难忘、引导用户使用户专注于交互、吸引用户使页面布局更舒适,更有魅力。
一旦有机会可以让网站更独特,就不能放弃。如果你的网站做的很醒目,那么用户可能会花更多时间浏览并且想是从哪里访问过来的,他们有可能记住这个网站并且下次再访问。可能没有比颜色更好的元素可以达到这样的效果了。人们会马上对颜色产生感觉:激动、高兴或者枯燥乏味。
当你试图在一个充满饱和色调的页面上浏览信息时,你的眼睛会不断地返回那些亮的颜色。最强的视觉元素是最重要的。我们趋向于忘记那些深蓝、黄色和灰色,因为每天都看到。在那些用户需要长时间在线使用的 Web 应用程序中,注意这一点尤为重要。不是很强烈的配色可以使用户专注于工作和接收重要信息。当然完美的 Web 体验不能仅仅依靠颜色,结构、交互、布局等方面也必须协同工作,来创建可用、易用的网站和应用程序。但是颜色是平衡中的重要部分,不能忽略。 [9]
2.5 网页设计流程
网页设计是一个互动的过程,不仅是设计师构思设计就可以完成的。从客户提出需求到最终发布,期间需要客户与设计人员共同参与协商才可以,具体流程如下:
首先,获取客户需求和资料。在设计网站页面之前,设计师需要知道客户的需求,从而确定客户建立网站的目的。客户提出网站需求是非常重要的一个环节。没有详细的需求,设计人员无法凭空进行设计制作。在这个步骤中,双方的沟通与交流是非常重要的。
其次,确定网站内容。设计人员选择适合自己的图像编辑软件、动画制作软件和网页制作软件进行网页的初步设计,这中间可能还需要和客户进行多次沟通才能达到客户满意的效果。在具体设计时,设计人员应该为网站定位一个主题,从而保证所有网页都围绕这个主题进行设计制作,保证风格的和谐统一。
然后,申请域名和空间。使用该方法能够有效同步管理文件。还可以通过FTP软件连接到服务器空间上,然后上传发布文件。
最后,后期维护。一般静态网站上传后,如果客户方没有专业人员维护,这样就需要设计人员从客户方获取新资料进行定期或不定期的更新。如果是动态网站,设计人员需要负责培训客户方如何使用后台管理,这样客户就可以自己通过后台管理添加信息,设计人员只要及时更正动态网站的错误即可。
3 动态网页开发环境和技术
3.1 了解Dreamweaver开发工具
Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器,它是第一套针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览
器限制的充满动感的网页[10]。 Dreamweaver的特点如下:
最佳的制作效率:Dreamweaver可以用最快速的方式将Fireworks或Photoshop等档案移至网页上。Dremweaver能与您喜爱的设计工具,如Flash等和外挂模组等搭配,不需离开Dremweaver便可完成,整体运用流程自然顺畅。除此之外,只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。
网站管理:使用网站地图可以快速制作网站雏形,设计,更新和重组网页。改变网页位置或档案名称,Dreamweaver会自动更新所有连结。使用支援文字,HTML码,HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。
无可比拟的控制能力:Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组,Dreamweaver支援精准定位,利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。
所见即所得:Dreamweaver成功整合动态式出版视觉编辑及电子商务功能,提供超强的支援能力给Third-party厂商,包含ASP, Apache,BroadVision, Cold Fusion,iCAT, Tango与自行发展的应用软体。当您正使用Dreamweaver在设计动态网页时,所见即所得的功能,让您不需要透过浏览器就能预览网页。
梦幻样版和XML:Dreamweaver将内容与设计分开,应用於快速网页更新和团队合作网页编辑。建立网页外观的样版,指定可编辑或不可编辑的部份,内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地汇入或输出XML内容。
全方位的呈现:利用Dreamweaver设计的网页,可以全方位的呈现在任何平台的热门浏览器上。对于动态HTML支援和鼠标换图效果,声音和动画的DHTML效果资料库可在Netscape和Microsoft浏览器上执行。使用不同浏览器检示功能,Dreamweaver可以告知您在不同浏览器上执行的成效如何。当有新的浏览器上市时,只要从Dreamweaver的网站在下载它的描述档,便可
得知详尽的成效报告。
3.2 Php语言基础知识
PHP(Hypertext Preprocessor)是一种嵌入HTML页面中的脚本语言。它大量地借用C和Perl语言的语法, 并结合PHP自己的特性,使Web开发者能够快速地写出动态产生页面[11]。
PHP是完全免费的开源产品,不用花钱,Apache和MYSQL也是用样免费开源,在国外非常流行,PHP和MYSQL搭配使用,可以非常快速的搭建一套不错的动态网站系统,因此国外大多数主机系统都配有免费的APACHE+PHP+MYSQL。通常认为这种搭配的执行效率比IIS+ASP+ACCESS要高,而后者的使用还必须另外交钱给微软。
PHP的语法和Perl很相似,但是PHP所包含的函数却远远多于Perl,PHP没有命名空间,编程时候必须努力避免模块的名称冲突。一个开源的语言虽然需要简单的语法和丰富的函数,但PHP内部结构的天生缺陷导致了PHP不适合于编写比中小型业余网站更大的网站[12]。
PHP开发的成功案例:MediaWiki — 著名的维基百科(Wiki)程序,如此庞大的条目居然只用PHP+MYSQL就能够支持,真是不可思议。WordPress — 著名的Blog系统,功能上丝毫不输于Movable Type,不少用户都纷纷从Movable Type转移到了WordPress。
总之,PHP语法简单,非常易学易用,很利于快速开发各种功能不同的定制网站,PHP因为结构上的缺陷,使的PHP在复杂的大型项目上的开发和维护都比较困难。
它是一种服务器端的脚本语言,嵌入在HTML中,它可以在多种平台上运行。其语法与C语言、Java语言的语法相似。它具有庞大的函数库,这主要是因为它是开源式的,源代码完全公开,每个使用PHP的程序员都可以加入自己的函数库,从而实现更多的功能,PHP几乎支持所有的数据库。
但是PHP对组件的支持不够完善,扩展性较差,常与免费的数据库系统MySQL一起构建中小型B/S应用的网站或信息系统[13]。
3.3 开发环境介绍
如果仅仅需要编辑静态的HTML网页,那么安装和配置服务器不是必需的,因为HTML页面的运行无需服务器的支持,但是如果需要在本地测试Php或者ASP.NET等动态网页,那么服务器的支持是必不可少的。
Apache本身是一个开源组织的名称,它组织开发了许多优良的开源软件,其中最早的项目便是Apache HTTP Server,一个开源的免费的Web服务器[14]。
Apache HTTP Server是Apache Software Foundation的一部分,除了官方的开发人员以外还有数以百计的用户参与开发,他们可以提供自己的意见、代码及文档等。Php最初员就是基于Apache开发的,所以它与Apache有良好的兼容性。
4 设计及具体代码实现
本网页是一个关于新疆旅游的网页,其主要实现了新疆线路介绍、新疆景点介绍、新疆小吃介绍、游客注册、游客登录及退出、游客留言等功能。
4.1网页结构设计
css+div结构目前用的人最多,框架结构现在很少有人使用了,而表格结构目前用的人也不多,但并不意味着已经被淘汰,它也有DIV所不能取代的效果—— 方便快速的布局,只要不是经常改动的小部分就可以用表格。DIV可以与表格一起用,大布局用DIV,而小地方就用表格 ,效果会很好。比如本次论文所涉及的网页就用到了表格与css+div相结合的思想,其上、下、左、右和中间分别是一个单独的div模块。具体框架结构如图4-1。
图4-1 网页框架图
4.2创建数据库
本论文设计的网页,所用到的数据库test是通过数据库管理工具——PhpMyAdmin做的,具体创建过程就不在这一一介绍了。其包含两个表分别为:liuyan、test2,如图4-2和4-3。
图4-2 信息存储表1
本表主要存储游客名、游客留言内容和留言时间等数据。
图4-3 信息存储表2
本表主要存储数据有:游客注册名、性别、年龄、学历、专业、爱好、备注、密码(密码就是注册时,所输入的验证码)和注册时间。
4.3主要模块的代码实现
4.3.1 注册代码的实现
<?php
if($_POST['name'])
{
include("conn.php");
$up=$_FILES["tx"];
$hh=$up['type'];
$fff=$up['tmp_name'];
$yu=$up['name'];
//获得客户端和服务器端的验证码。
$host=$_SERVER['HTTP_HOST'];
$host= md5($host);
$cookie_=$_COOKIE[$host];
@session_start();
$y=$_SESSION[$cookie_];
$y_d=$_POST['yz'];
/*。。。。。。。。。。。。。。核对客户端和服务器端的验证码库。。。。。。。。。。。。。。*/ if($y_d===$y)
{
/*。。。。。。。。。。。。。。。。。。。查询数据库中的资源个数。。。。。。。。。。。。。。。。。。。*/ $dd=mysql_query("SELECT * FROM `test2`");
$hang=mysql_num_rows($dd);
$hang=$hang+1;
/*。。。。。。。。。。。。。。values后不能有空格。(id,name,sex,age,diploma,speciality,like,remark,mima,enrolDate)。。。。。。。。。。。*/ $sql="insert into test2 values($hang,'{$_POST[name]}','{$_POST[sex]}',{$_POST[age]},".
"'{$_POST[diploma]}','{$_POST[speciality]}','{$_POST[like]}','{$_POST[remark]}','{$_POST[yz]}',now())";
/*。。。。。。。。。。。。。。。。。。。。。。。。检测是否插入成功。。。。。。。。。,。。。。。。。。。*/ if(@mysql_query($sql,$conn))
{
if($hh=="image/pjpeg"||$hh=="image/gif"||$hh=="image/png"||$hh=="image/bmp"||$hh=="image/jpg"||$hh=="image/jpeg")
{
@move_uploaded_file($fff,'E:/zhandian/zhandian1/sousuo/touxiang/'.$_POST['name'].'.jpg');//目录地址不能用反斜杠'\'。
}
echo "";
}
else {echo "";}
}
else{ echo "";} }
@mysql_close($conn);
?>
这段代码主要是将游客注册信息插入到test2表,如果游客注册成功,会弹出一个注册成功提示框“注册成功,您是第***位注册用户!”。如果没能
注册成功,则会弹出一个注册失败提示框“对不起,您未能注册成功!”或“对不起您未能注册成功,因为您输入的验证码不正确或右侧的验证码已经失效。”,(出现此提示是因为游客在注册时,由于停留时间过长,对应的session已经不存在了)如图4-4所示。
图4-4 注册界面
4.3.2 登陆及退出登录代码的实现
<?php
header('Content-Type:text/html;charset=utf-8');
include("conn.php");
$g=mysql_query("SELECT * FROM `test2` WHERE name='{$_GET[username]}' and mima='{$_GET[mima]}'");
$h=mysql_query("SELECT * FROM `test2` WHERE mima='{$_GET[mima]}' and name!='{$_GET[username]}'");
$j=mysql_query("SELECT * FROM `test2` WHERE name='{$_GET[username]}' and mima!='{$_GET[mima]}'");
$hang=mysql_num_rows($g);
$hang_1=mysql_num_rows($h);
$hang_2=mysql_num_rows($j);
if($hang){
$host=$_SERVER['HTTP_HOST'];
$host= md5($host);
$cookie_=$_COOKIE[$host].$_COOKIE[$host];
@session_start();
$_SESSION[$cookie_] = $_GET[username];
echo "
}
else{
if($hang_1){
echo '用户名有误';
}
else{
if($hang_2){
echo '密码有误';
}
else{
echo '用户名和密码都有误';
}}}?>
这段代码主要是检测游客登录时,所提交的用户名和密码。如果表test2中有游客所提交的游客名,但没有游客所提交的密码,则会输出一个错误提示信息“密码有误”。如果表test2中有游客提交的密码,但没有游客提交的用户名,则会输出一另一个错误信息“'用户名有误”。如果表test2中既没有游客提交的游客名,也没有游客所提交的密码,则会输出“用户名和密码都有误”。如果表test2中既包含游客提交的游客名,又包含游客提交的密码,则输出“欢迎***登陆!”信息,并把游客的名字存入到一个名为$cookie_的SESSION中。
<?php
header('Content-Type:text/html;charset=utf-8');
$host=$_SERVER['HTTP_HOST'];
$host= md5($host);
$cookie_=$_COOKIE[$host].$_COOKIE[$host];
@session_start();
$_SESSION[$cookie_] = "";
?>
这段代码主要是将值为要退出的游客名的SESSION设为空,登陆界面如图
4-5:
图4-5 登陆界面
4.3.3留言代码的实现
<?php
header('Content-Type:text/html;charset=utf-8');
include("conn.php");
//获得客户端和服务器端的密码。
$host=$_SERVER['HTTP_HOST'];
$host= md5($host);
$cookie_=$_COOKIE[$host].$_COOKIE[$host];
@session_start();
$y=$_SESSION[$cookie_];
if($y)
{
/*。。。。。。。。。。。。。。查询数据库中的资源个数。。。。。。。。。。。。。。。*/
$dd=mysql_query("SELECT * FROM `liuyan`");
$hang=mysql_num_rows($dd);
$hang=$hang+1;
$sql="insert into liuyan values($hang,'{$y}','{$_GET[liuyan]}',now())";
/*。。。。。。。。。。。。。。。。。。检测是否插入成功。。。。。。。。。。。。。。。。。。。。。。。。*/ if(@mysql_query($sql,$conn))
{
echo $hang;
}
else {echo "留言失败";}
}
else{ echo "还没登陆";}
@mysql_close($conn);
?>
这段代码主要是将游客提交的留言内容插入到表liuyan中,如果游客留言信息被成功插入,则会输出插入位置(游客是第几位留言的)。如果插入失败。则会输出错误提示信息“留言失败”或“还没登陆”,(当游客还没登录时就留言,会输出此错误信息)留言界面如图4-6。
图4-6 留言界面
4.4运行测试
我们以游客张山为例,来测试一下本网页的几个主要功能模块。(游客注册、游客登录和游客留言)
4.4.1 注册
当游客张山输入注册信息时,界面如图4-7:
图4-7 注册界面
当游客张山提交信息成功后,将会弹出一个成功提示信息,如图4-8:
图4-8 提示界面
当我们查看数据库test中的表test2时,会发现其多了一条关于张山的游客信息。如图4-9:
如图4-9 注册后的数据库图
4.4.2 登陆
当张山把名字和密码输入时,登陆界面如图4-10:
图4-10 登陆界面
当张山以正确的名字和密码登陆后,出现提示,如图4-11:
图4-11 提示界面
4.4.3留言
当张山写入留言时,留言界面如图4-12:
图4-12 留言界面
当张山成功将留言内容提交后,会弹出一个留言成功提示框,如图4-13:
图4-13 成功留言界面
当我们查看数据库test中的表liuyan时,会发现其多了一条有游客张山所写的留言内容,如图4-14:
图4-14 留言图
4.5遇到的问题及解决方法
在本次论文设计中主要遇到两个大问题。
第一,在输出注册框时出现了乱码。
解决方法是:在要输出的注册框代码的开头处加上这么一段代码header('Content-Type:text/html;charset=utf-8');
第二,在游客留言时,游客已经退出了登录,但还能以此游客名进行留言。
解决方法是:在游客登录时,在后台创建一个名为$cookie_(此名是有游客电脑中的关于本网页的cookie值相加得到的。)的session,将游客名存入其中。在用户退出登录时,就其值设为空(因为游客在提交留言时,会有一个专门的动态网页首先查看后台服务器中有没有名为$cookie_的session或其值是否为空,如果其不存在或值为空,则就说明此游客还没有登录,就会有相应的提示框弹出。)。
总结:在制作本次论文所涉及的网页时,大大小小也遇到的不少问题,但主要的问题也就这两个,这些问题都是通过查阅一些相应的查考文献来一一解决的。
结 束 语
本设计根据毕业设计任务书的要求制作,功能基本实现,可以完成登陆、注册、留言、各产品展示等功能的实现。此次设计是查看了一些企业网站的结构然后进行设计的,虽然此次设计构造不能说是成熟,但也算是尽了力。 这是我首次运用Dreamweaver、Php语言结合PhpMyAdmin数据库系统开发工具进行动态网页的制作,一切都是从零开始学习,所以制作的时候难免会过于简单,考虑的也不是很周全。同时由于时间的仓促,有些功能的实现不是很完美。在设计过程中不可避免地遇到了各种各样的问题,由于整个设计完全都是由个人设计的,有关Dreamweaver、Php和数据库连接等方面许多细节问题都要靠自己去摸索,加之本人水平有限,因此还存在着许多不足之处。
在以前的时间内我学习了许多专业课程,比如C语言,java语言,数据库系统概论,FLASH等等,虽然通过学习对这些课程有所了解和掌握,但是始终处于理论知识的掌握阶段,并没有真正应用于实践设计开发,所以对知识的掌握还不够全面和熟练,并不能真正独立的开发出一个完整的应用于实际的系统。通过这次毕业设计,使我学到了很多,对自身的能力有了很大的提高。此次设计是动态网页设计,而不是简单的静态网页,因此采用了在开发动态网页方面比较先进的Php语言作为开发语言。Php是一种Web编程脚本语言。当然在制作的过程中碰到过一些让人头痛的问题,我都一一解决了,直到设计全部完成,也让我在解决问题方面的能力得到了提高。
整个开发的过程对我来说是一次将理论应用于实践的过程,是将以前所学知识充分利用的过程,是一次真正的实践过程。
总体说来,在这学期的毕业设计中,学到了一些在课堂内所学不到的知识,收获很大。
致 谢
首先感谢我的指导老师杨老师,他在我的毕业设计过程中给了指导性的方案和架构,指引我阅读相关的资料和书籍,使我能学习掌握知识并完成了毕业设计。
感谢答辩组对此毕业设计的考核,如果可以得到答辩组各位老师的认可将对我的学习和工作给予极大的鼓励。你们客观的评价和建议我将牢记在心,在今后的发展中扬长避短,更加努力的严格要求自己。
感谢学校对我的培育,让我从思想上、素质上和知识上得到很大的提高。在校学习的过程中的各科老师的悉心教导让我掌握了更多的知识,对提高我的知识面有很大的帮助。
最后要感谢我的同学在设计完成前后对我的帮助,没有同学的共同学习进步也许就没法完成设计,没有同学的帮助,也许一些潜在的错误难以得到更正,在此一并表示感谢。
在此祝愿学校领导、老师、同学工作顺利,事业更上一层楼;同时也祝愿学校更加辉煌!
- 25 -
范文二:动态网页设计论文
湖北经济学院管理技术学院
毕业论文(设计)
题 目: 动态网页设计
系 部: 电子与计算机系 专 业: 计算机网络Q0831 学 号: 081804063 学生姓名: 廖盼盼 指导教师: 兰晶 职 称: 老师
二0 10 年 12月 12 日
目 录
1 需求分析 ............................................. 4 2 动态网页开发环境简介 ................................. 5
2.1 Windows 7环境下IIS7.5的安装及配置 ..................... 5
3 系统分析和设计 ....................................... 6
3.1可行性分析 ............................................... 6 3.2功能结构分析和设计 ...................................... 7
3.2.1项目规划 7 3.2.2系统功能结构图 7
4 数据库建设 .......................................... 10
4.1数据库结构分析.......................................... 10 4.2创建数据库 .............................................. 10
5 系统通用文件建设 .................... 错误!未定义书签。
5.1系统头文件 .............................. 错误!未定义书签。 5.2系统左块文件 ............................ 错误!未定义书签。 5.3系统底部文件 ............................ 错误!未定义书签。 5.4系统错误信息处理文件 .................... 错误!未定义书签。 5.5数据库连接文件 .......................... 错误!未定义书签。
5.5.1数据库安全 15 5.6 CSS布局文件 ............................ 错误!未定义书签。 5.7 usercooikes文件 ........................ 错误!未定义书签。
6 网站前台功能模块 .................................... 17
6.1系统分类信息模块........................................ 17
6.1.1按照一级栏目分类 17 6.1.2 按照类型分类 17 6.1.3 按照地区分类 18 6.1.4 所有分类 18 6.2会员注册与登陆模块 ..................................... 18
6.2.1 Cookies集合的体现 18 6.2.2 验证码功能的实现以及其作用 19 6.2.3 javascript前台验证功能 19 6.2.4后台验证功能 19 6.3 添加信息模块 ........................................... 20
6.3.1 信息添加页面 20 6.3.2 信息处理页面 21 6.4 用户个人信息模块 ....................................... 21
6.4.1 忘记密码 22 6.4.2 用户中心页面 22
6.4.3 发布信息页面 22 6.4.4 我的收藏页面 23 6.4.5 信息管理页面 23 6.4.6 修改资料页面 23 6.4.7 修改密码页面 24 6.4.8 安全退出页面 24 6.5 便民服务模块 ........................................... 24 6.6 站点公告模块 ........................................... 24 6.7 搜索功能模块 ........................................... 25 6.8 信息显示模块 ........................................... 25
6.8.1 信息数和页面数的实现 26 6.8.2 信息分页功能的实现 26 6.9信息具体内容模块........................................ 27
6.9.1 IP地址查询 27 6.9.2手机号码归属地查询 27 6.9.3回复信息显示功能 27 6.10举报反馈功能模块....................................... 28 6.11信息收藏功能模块..................... 错误!未定义书签。28
7 网站后台功能模块 .................................... 28
7.1框架的使用 .............................................. 28 7.2网站参数信息............................................ 29 7.3注册用户管理............................................ 30 7.4发布信息管理............................................ 32 7.5管理账号 ................................................ 34 7.7站点公告管理............................................ 35 7.8留言反馈管理............................................ 36 7.9安全退出管理............................................ 38
总结 .................................................. 39 结 束 语 .............................................. 40 致 谢 ................................................. 41 参考文献 ............................................... 4
1、需求分析
在Internet飞速发展的今天,互联网已成为人们快速获取、发布和传递信息的重要渠道,正以一种前所未有的冲击力影响着人类的活动。它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显的格外重要,它已成为政府、企事业单位信息化建设中的重要组成部分。
现今的社会,人们已经离不开了网络,网络已经成为人与人之间交流的一种形式,它能够把事情的复杂化转为简单化,摆脱了时间和空间的限制。网站为群众提供了一个网络生活空间,通过其网页为群众提供一个二手信息的平台,方便二手交易的进行。
本论文还介绍了网页的结构分析和具体功能实现,网页的界面和运作方式,尽力模拟近代网页普遍性形式,成为一个完整的动态网站
2、动态网页开发环境简介
2.1 windows 7环境下IIS7.5的安装与配置
IIS是一个功能非常强大的Internet信息服务系统。IIS的可靠性、安全性、和可扩展性都非常好,并能很好的支持多个web站点,是用户首选的服务器系统。IIS提供了最简洁的方式来共享信息、建立并部署企业应用程序,以及建立个管理web上的网站,通过IIS用户可以轻松的测试、发布、应用和管理自己的web项和web站点。
以下说说在WIN 7环境下的IIS安装于配置。 首先打开控制面板-程序-打开或关闭windows功能-打开Internet信息服务,选择自己所需要的一些功能和服务,选好后点击确定,系统将会自动安装。
安装完成后单击控制面板-系统和安全-管理工具,在里面找到Interner信息服务管理器,打开。
右击左边的
“网站”-添加网站,在添加网站窗
口中填写网站名称,物理路径,端口可随意设置,但是每个网站的端口不得相同,单击确定,一个网站就建立完成,
单击网站图标
在asp设计主页功能视图的IIS栏
目可以看到
ASP这个图标。点进去,将调试属性-将错
误发送到浏览器的值设为true,然后把行为-启用父路径也
设置为true
。退出单击目录浏览-启用。点击默认
文档可以设置网站的主页。这样一个IIS服务器就配置完成。
3、系统分析和模块设计 3.1 可行性分析
作为一个普通市民,伴随着生活条件的改善,也存在的许多各种类型的二手商品,由于信息交流的落后,并没有很好的平台来实现二手商品的交易,于是二手商品信息交流的方式出现了,就是基于Web的二手商品交易系统。通过这个系统,大家可以非常方便的发布自己的信息,浏览别人的发布的信息,还可以对各种二手商品信息作出横向比较,作出自己的最佳选择。由此可见,该系统只是一个交流二手商品信息的平台,与一般的电子商务类网站又有本质的区别。
3.2 功能结构分析和设计。
系统的功能结构决定了系统的可用性以及使用范围。 3.2.1项目规划
二手信息网站是一个数据库开发应用程序,由前台展示区和后台管理组成。 (1)
前台功能模块
前台展示区主要功能包括分类信息、会员中心、用户反馈、站点公告、便民中心。 (2)
后台管理模块
后台功能管理的蛀牙功能包括网站参数信息、文件上传管理、注册用户管理、发布信息管理、管理账号设置、网站公告管理、留言反馈管理、安全退出。
3.2.2系统功能结果图
4.数据库建设 4.1数据库结构分析
Web应用程序可以使用session或者cooike来保存用户活跃期间的信息,但是这些信息在绘画结束后将不再存在,对于需要持久保存的信息,通常是选择数据库进行存储。数据库允许用户进行查询、插入、修改和删除数据等操作。
面向左面的小型数据库系统是Microsoft Access是Microsoft office组件之一。具有基本的数据库功能,不仅可以用于小型数据库管理,供单机使用,还可以与工作站、数据库服务器以及主机上的各种数据库互相连接。本系统使用的是Access 2003数据库。 4.2创建数据库
启动Access 2003,新建一个数据库,保存为data。然后创建表,具体的表结构如下。
Admin管理员表
Class1一级分类信息表
Class2二级分类信息表
Gbook反馈留言信息表
Gonggao站点公告信息表
Hf信息回复表
Shoucang收藏信息表
User注册用户信息表
Xinxi发布的信息表
5、系统通用文件建设
所谓系统通用文件就是系统大部分网页所需要用的文件,如果在每个页面都是用这些代码的话,会增大编辑量,增大占用空间。所以将这些共同的功能代码写在一个独立的文件,是用的时候就调用。这样既省时间,又减少资源占用。
5.1系统头文件
系统头文件top.html是固定不变的,基本每个网页都包含此文件。主要包括致谢语、设置首页、收藏本站、网站logo、分类信息导航(按类型分类、按地区分类、按一级分类信息分类),头文件还包含一个发布信息的链接,点
击进去可以发布信息,当然前提是你已经登录。
5.2系统左块文件
系统的左块文件gg.asp也是固定不变的。主要是用户登录与注册链接,这里的用户登录使用了if语句加上
response对象的cooikes集合实现登陆后显示用户个人信息而不是登陆框的效果。然后下面有个便民服务中心,主要是一些超链接,方便用户日常生活信息的查询。最下面是一个举报中心的图片链接,这里简单介绍,后面详细讲解。
5.3系统底部文件
系统底部文件end.html主要包含一些网站的信息、版权、广告合作、帮助中心和友情链接,没什么好说的。
5.4系统错误信息处理文件
系统需要一些代码来验证一些信息,例如邮箱、邮编等等。为了方便,我们把这些文件统一保存在一个asp的网页。需要的时候直接调用。
Ipt.asp这个文件主要是用来检测非法字符串、邮件地址的合法性、中文用户名检测。在文件中创建了3个
function过程。
非法字符串检测:过程chkijob(char),在这个过程中使用if语句和instr函数对各种非法的字符进行检测。 邮件地址的合法性:过程IsValidEmail(email)主要检测里面是否含有@、.和英文。
中文用户名检测:过程nothaveChinese(para)主要检测里面的字符是不是中文,因为用户需要填写真实姓名这一项必须为中文名。
Err.asp这个文件,定义了一个sub过程,<%sub errijob(id)%>判断ID的值来弹出不同错误信息的窗口。单击确定后返回原网页。
5.5数据库连接文件
数据库连接文件coon1.asp的功能是建立和数据库的链接。我们这里使用oledb连接。
5.5.1数据库安全
在这里简单讲解一下,数据库的安全。因为只要知道了数据库的路径,在浏览器中输入路径地址例如http://localhost:81/data/data.mdb就能直接下载数据库到
本地。数据库里面文件的重要性不用说。防止数据库被找到的最简单方法就是起一个非常复杂的名称,多带特殊符号,最好是加上.asp或者.html,再把他放到很深沉的目录下。
在数据库连接的时候尽量使用ODBC连接。不要把数据库名称直接写在程序中。
然后对数据库进行加密,当然现在要破解一个加密的数据库不是难事了。
5.6 CSS布局文件
CSS是现在普遍的一种用来网页布局的一组格式设置规格,代替了以往的表格布局,CSS一般与DIV组合在一起。通过使用CSS样式设置页面的格式,可将页面的内容与表现形式分离。页面内容存放在HTML文档中,而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分,通常为文件头部分。将内容与表现形式分离,不仅可使维护站点的外观更加容易,而且还可以使HTML文档代码更加简练,缩短浏览器的加载时间。
5.7usercooikes文件
由于网站有很多网页只能会员才能查看,也就是说,你需要登录向客户端写入cooikes。然后这个文件就是用来判断到底有没有这个cooikes,有的话就准许你进入,没有的话就跳转到登录页面。
6、网站前台功能模块
6.1系统分类信息模块
二手信息网,是用来收集各种二手产品的网站。为了方便用户寻找,所以产生了各种分类。本站主要有3中分类:一级栏目分类、类型分类、地区分类。还有一个网页用于显示所有分类信息。
6.1.1按照一级栏目分类
此功能由vip.asp来实现。利用request对象获取变量字符串ahubei、class1和class2的值,然后根据这些变量的值,在数据库中进行信息查找,最后显示到网页上面。在里面的搜索模块上使用了一个do loop的循环显示了各种分类信息。
6.1.2按照类型分类
6.1.3按照地区分类
以上2个分类功能都是由search1.asp实现的。其作用原理跟vip.asp是差不多的。只是这里增加了一个收藏功能。
6.1.4所有分类
这个是一个单独的网页classlist.asp。利用do loop循环加table布局实现。
6.2用户注册于登陆模块
6.2.1cooikes集合的体现。
Cookies和session都能记录用户的信息,不同的是cooikes是保存在客户端,而session是保存在服务器端。如果想用户这个登陆后下次不需要在登陆,只需要将用户的登录信息保存在客户端。而有的信息需要由服务器保存的,则利用session对象保存在服务器端。
写入Cookies的通常语法为response.cooikes
(“cookies名称”)=内容
读取cooikes的通常语法为<%=request.cooikes(“cookies名称”)%>
6.2.2验证码功能的实现以及其作用
验证码是一种区分用户是计算机和人的公共全自动程序。可以防止:恶意破解密码、刷票、论坛灌水,有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试,实际上是用验证码是现在很多网站通行的方式。
本网站使用了验证码,文件为checkcode.asp,还有几个用于调用的文件,存放在code文件夹。不同步文件形成各种不同样式的验证码。条用这个验证码图片可以直接使用
6.2.3javascript前台验证功能
前台验证就是在提交到服务端前的客户端验证,主要是验证表单信息的规范,例如用户名的长度,密码与重复密码是否一致等等。
6.2.4后台验证功能
后台验证需要获取数据库信息。对于注册来说,后台验证主要就是验证其用户名和邮箱在数据库是否重复,验
证完成后将数据提交到数据库,然后更新数据库,就完成注册。
对于登陆来说,后台验证主要就是验证所提交的用户名和密码跟数据库所保存的是否一致,不一致的话那用户名或者密码就错误了,登陆成功就跳转到相应的页面。
6.3添加信息模块
添加信息模块是本站必不可少的一个模块,用于收集信息。这个模块主要由一个发布信息addxinxi.asp和检查信息addxinxchk.asp组成。
为了防止用户发布不良信息,以及无限制的发布相同信息,然乱市场。这里提供了一个审核功能,有管理员审核。其主要原理是在用户提交发布信息的时候给一个验证值yz=0,如果通过审核的话,这个值yz=1。在显示二手信息的网页上利用sql语句只查找出yz=1的记录。这样的话,就实现了一个审核信息的功能。
6.3.1信息添加页面
信息添加页面addxinxi.asp,这个添加的信息主要有,信息类别(这里是查找的class2数据库,然后利用循环显
示出来的)、信息标题、服务类型、服务费用、服务地区、详细说明、联系人、email、联系方式(后面这三项个人信息,是来自数据库,免得发布信息者自己去写)。单击提交后到先在客户端验证,这里的客户端验证没有单独的去写,来自上面的系统公用文件中的错误信息处理文件,验证完
后提交到服务端检验,检验后等待后台管理员审核后才能
显示到网页上。
6.3.2信息处理页面
信息处理页面是addxinxichk.asp。这个页面的功能就
不用多说了。主要我在这个页面增加了一个新功能,就是
发布信息的时间限制功能,利用session对象实现。 DateDiff("s",session("addxinxi"),Now())<>
思是创建session对象的时间与现在时间的时差小于30
秒。我们可以这样实现,如果小于三十的话就不允许再发
布信息。只有等待30秒后才能再次发布信息,以免有用
户恶意发布信息。
6.4用户个人信息模块
用户个人信息模块用来显示用户个人信息,并对其做
相应的更改。
6.4.1忘记密码
忘记密码是一件很常见的事情,很多用户时间长了就把密码忘记了,当然我们需要为用户提供找回密码的服务。 在注册的时候后面就会提示,填写好正确的邮箱,将用于找回密码。找回密码还需要自己的用户名。
Getpwd.asp这个网页用于给用户填写用户名和邮箱。填写好后提交到getpwdcheck.asp,这个网页检测用户所提交的信息是否跟数据库的信息一致,不一致的话弹出错误窗口,然后后退。如果一致的话,就显示用户的用户名和密码,旁边附带一个超链接到登录页面。
6.4.2用户中心页面
用户中心页面用于显示用户的基本信息,根据客户端存储的cooikes用户名信息,在数据库查找记录,然后显示到网页上。
6.4.3发布信息页面
这里的发布信息和上面的发布信息是一样的 。
6.4.4我的收藏页面
在浏览信息的页面我们提供了一个收藏信息的功能,我的收藏页面user_sc.asp主要是用户显示该用户所收藏的信息,然后对收藏信息进行删除。这里有个批量删除,form.elements.length的意思是表单所有项目的个数,每个收藏信息后面都有一个复选框,这就是一个表单项目,如果有5条收藏信息,那form.elements.length=5。
删除收藏的页面user_scchk.asp,我们批量删除提交上去的是多个ID,他们之间由,分割。所以需要先用spilt(id,“,)进行拆分成一个一维数组。Split函数返回一个下”
标从零开始的一维数组,Ubound函数返回一个数组的最大下标。我们利用for循环,可以逐个删除所选的记录。
6.4.5信息管理页面
信息管理user_xxgl.asp的主要是现实我发布的信息,可以进行编辑和删除,这个功能跟前面所说的大同小异,编辑页面是edit_xinxi.asp,删除信息页面是
user_zlchk.asp。
6.4.6修改资料页面
usereditzl.asp这个页面用于修改用户资料。
Usereditzlchk.asp这个页面用于检测所提交的资料,然后更新数据库。
6.4.7修改密码页面
修改密码跟修改资料是一回事。这个主要由
user_pass.asp和user_passchk.asp实现的。
6.4.8安全退出页面
所谓安全退出,就是清除用户在浏览器中的信息,也就是清除客户端的cooikes信息,主要由这个代码实现Response.cookies("ijob")="",清除后跳转到首页。实现网页userout.asp
6.5便民服务模块
便民服务主要求是集成了一些常用的信息查询的网站放在这里,由超链接实现,此模块放在通用文件的gg.asp中。
6.6站点公告信息模块
站点公告模块,就是查询gonggao表中的数据,然后显示出来。
这里说下对记录数显示的限制和长度的限制。
公告的显示是需要依靠循环语句的,我们定义一个变量,初始值赋为1,没循环一次,我们将这个变量就+1。然后我们限制当这个变量>=4的时候我们推出循环,这样就实现了只显示3条记录。控制了显示的记录数。
我们把公告记录赋值到一个变量。如果这个记录的长度>20,我们就利用left函数截取前20个字符,然后response.write(“记录+…”)
6.7搜索功能模块
为了方便用户查询信息,搜索功能是一个非常不错的选择。只要用户输入一些关键字,系统就能在数据库中查询出相应的信息。然后显示出来。
这个模块在主页和vip.asp中都有。其实就是一个表单,提交的信息到search1.asp。其实跟前面所说的分类信息大同小异。
6.8信息显示模块
信息显示模块在很多页面都有,之前都没有详细的讲解,其实很简单。这里主要说下分页和页数的功能实现。
6.8.1信息数和页面数实现
当所查找出来的记录过多的时候,不可能一个页面显示几百几千条记录。所以我们需要对记录进行分页。
Recordcount用于返回recordset对象中的记录总数。 Absolutepage的功能是分页时,制定当前页
Pagesize用于设定每一页显示的记录条数
Pagecount用于返回数据页的总数
我们首先设定每页显示的记录数,rs. Pagesize=25.这样就设定一页显示25条记录。用do loop循环显示记录信息,定义一个变量i,赋值为1,在循环语句的最后写上,i=i+1
rs.movenext
if i>=Pagesize then exit do
loop
这样就实现了页面能显示的信息数。
6.8.2记录集分页功能的实现
定义变量thispage=request(“page”),记录当前的页数。
分页很简单,首页 首页
上一页上一页 下一页下一页
尾页尾页 其中的allpage是rs.pagecount
6.9信息具体内容模块
信息的具体内容,这个功能由xinximemo.asp实现。这里我使用了css里面的边框布局属性,对边框设置了一下,结果搞的稀烂,我也懒的改了,反正我不是学美工的。
6.9.1IP地址查询
这个功能是调用了一个IP地址查询的网页,将表单里面的IP地址提交到那个网页,就会查询出你的IP地址归属地。
6.9.2手机号码归属地查询
这个功能跟IP地址查询是一样的,这里使用了一个客户端的验证,验证手机号码是否是11位。
6.9.3信息回复功能模块
为促进浏览者与发布者之间的交流,我在这里弄了一
个回复的功能。
回复的信息由一个单独的表hf保存,单击“发表回复信息”按钮,进入回复的对话框xinxi_hf.asp。单击提交到xinxi_hf1.asp。使用<>
onLoad="setTimeout(window.close, 2000)"/>2秒钟后关闭网页。
6.10举报反馈功能模块
举报反馈信息功能由gbook.asp实现,反馈和回复的信息都保存在一个单独的表gbook里面。Gbookchk.asp用于对提交的信息进行检测,这里使用了一个DateDiff函数,这个函数用于计算2个时间的间隔。
6.11信息收藏功能模块
信息收藏功能所记录的信息由shoucang这个表存储。这个功能在上面的用户信息模块讲过。
7、网站后台功能模块
7.1框架的使用
先说说框架是个什么东西,所谓框架,可以看做是浏览器在一个网页中的不同区域装载了不同的页面,浏览器
在打开一个网页的时候如果网页中有框架,浏览器就会在框架中打开被包含的网页。
框架网页是网站的一种布局,使网站完全相同的内容放在一个网页上,可以被所有需要使用这一网页内容的网页加载。这样可以使站点中相同的内容只设计一次,用户浏览时,这个网页也只打开一次。
本网站后台的框架分为三个部分,top.html、left.html、right.asp,left上面有几个超链接,要实现单击超链接在网页显示在right.asp这部分,就要将right.asp起一个名字name="main",然后指定每个超链接的目标位main。
这样就实现了单击左边的超级链接,网页在右边显示。
7.2网站参数信息
网站参数信息由Request的ServerVariables方法实现。ServerVariables的作用就是获取服务器端的环境变量。
7.3注册用户管理
注册用户管理主要是对用户进行删除、修改密码、修
改资料的操作。但是这几项操作是隐藏的,当我们点击操作的时候才会出现,这样可以减少占用空间,使网页布局更好看。简单的介绍下这个功能的实现:
我们在head之间定义了一个函数,当我们单击操作的时候调用这个函数,用CSS定义当我们鼠标移动到操作字上面的时候鼠标成手型。style="cursor: hand"
onclick="loadThreadFollow(<%=k%>,5)"其中的K为编号,5的含义是打开下面id="follow<%=k%>"的一行表单元格。
删除记录由user_del.asp实现。这个页面的功能首先利用split函数分割提交来的用户名成1个数组。用ubound或许数组的最大下标,同样查找出这些用户名的ID。然后分割成数组。利用for循环这个删除用户在xinxi、user、hf、shoucang表中的记录。这样的话就删除了用户的所有记录。
修改密码此功能由user_ediltpass.asp和
user_ediltpass.aspchk实现,利用window.open方法打开该网页的window小窗口,在里面直接直接输入新密码,
单击确定提交到user_ediltpasschk.asp处理。改处理网页主要对密码的长度进行检查。检查完毕后,利用update方法更新记录。
修改资料由user_editzj.asp和user_editzjchk.asp两个网页实现,依然是利用window.open方法打开小窗口。
如果用户过多的话,很难找到我们需要操作的用户,所以加了几个查找功能。
1.按照用户名进行查找
按照对用户名的模糊搜索,查找需要的记录。这里的表单的action值为“?ijob=1”,单击查找,提交到本页面处理。
2.按照姓名进行查找
按照对姓名的模糊搜索,查找需要的记录。这里的表单的action值为“?ijob=2”,单击查找,提交到本页面处理。
在下面的SQL语句,利用select case语句实现ijob的三个分支,既三个查找的方式。用“like”加上“%”实现模糊查找的功能。
7.4发布信息管理
发布信息管理对本站是非常重要的,本站其主要功能就是收集二手信息,对二手信息的管理是必然的,这里主要有删除信息、删除回复信息、编辑信息、通过验证这4个功能。
删除信息主要由xinxi_del.asp实现。这个网页同样的实现了批量删除的功能,这里就不再多说。我们需要或许该信息所在信息表中的ID,然后根据这个ID删除xinxi、shoucang、hf表中该ID的所有信息。这样就删除了该信息再数据库中的所有信息。
删除回复信息由xinxi_hfdel.asp实现,其功能是获取该信息的ID,然后在hf表中寻找该ID所在的hf记录,然后将该记录删除。
编辑信息由xinxi_edit.asp和xinxi_editchk.asp这2个网页实现。xinxi_editchk.asp用于接收xinxi_edit.asp提交的修改后的资料,然后更新到数据库。
通过验证,这个功能由xinxi_yz.asp实现,这个网页又批量删除功能。我用了个if语句,当信息通过验证的时候,我们不现实通过验证,没通过验证才显示。这个网页
的功能就是从数据库中搜索出该信息的yz字段值,将yz更改为1,然后更新到数据库。
跟用户管理一样,当信息量过大的时候我们就很难找到我们需要操作的信息了。肯定要有一个查找信息的功能。这里有6种搜索方式。其实现页面xinxi.asp。利用select case定义了6个分支。去分支变量都是ahubei。
1、按账号查找,我们将表单的action值设
为?ahubei=1
2、按姓名查找,我们将表单的action值设
为?ahubei=2
3、按关键字查找,我们将表单的action值设
为?ahubei=3
4、显示未验证用户,我们将这个超链接href的值设置为?ahubei=4
5、显示已验证用户,我们将这个超链接href的值设置为?ahubei=5
6、显示全部用户,我们将这个超链接href的值设置为?ahubei=6
后面相应的按照各种不同的ahubei结果,设置不同的sql语句。实现搜索功能。
在验证单元格利用if语句,如果yz=1则显示√,否则显示×。
7.5管理账号设置
管理账号设置就2个功能。由admin_add.asp和admin_addchk.asp这2个网页实现。
1.增加管理员
增加管理员作用原理很简单,一个表单而已,添加好后提交到admin_addchk.asp进行处理。处理完后返回到添加页,同时下面会显示所有管理员的信息,你可以对此进行删除。
2.删除管理员
删除管理员值需要该管理员在admin中的信息。我们定义一个function函数,当我们点击删除的时候调用这个函数。删除成功后会刷新页面。
7.6站点公告管理
网站公告管理主要对公告进行删除,修改和增加。由
于在首页显示的公告数是3个,所以我们需要在后台对过期的公告进行删除。因此没必要增加分页的功能。
1.增加公告,该功能由addgonggao.asp和
addgonggaochk.asp实现。打开addgonggao.asp这个页面,填写好公告内容就提交到addgonggaochk.asp处理。处理完后就会显示到前台和后台。
2.修改公告,这个功能由editgonggao.asp完成,设置表单的action的值为
editgonggao.asp?ok=1&id=<%=request("id")%>,当ok=1的时候我们就处理该表单,然后提示修改成功。如果ok没有值,也就是没有提交表单的时候,就显示表单。这里我们使用了一个replace函数,replace()方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
3.删除公告,该功能由delgonggao.asp实现,删除该公告在gonggao表中的信息,删除成功后跳转到listgonggao.asp
7.7留言反馈管理
留言反馈管理主要是对留言进行删除、修改和回复。没有回复的留言,会显示回复留言,单击就会弹出回复留言对话框。回复过的留言,会显示查看回复,单击就会在下面显示我们对该留言回复的内容,内容后面有个修改的超级链接,点击我们可以对回复的内容进行修改
1.删除留言,次功能由gbookdel.asp实现。单击删除的时候我们将“删除”这个超链接上id的值提交到
gbook.asp处理,删除该id在gbook表中的所有信息。删除成功后后退刷新页面。
2.修改留言,此功能由gbookedit.asp,单击修改后, 我们将“删除”这个超链接上id的值提交到gbookedit.asp处理。就会显示该id所在的留言信息。然后对此进行修改,单击提交,设置表单的action的值
为?id=<%=id%>&chk=1,当chk=1的时候我们就处理该表单,然后提示修改成功。如果chk没有值,也就是没有提交表单的时候,就显示表单。
3.回复留言,单击回复的时候,会到gbookhf.asp的小窗口,在这个网页上我们可以填写回复内容。提交内容
的方式还是跟上面的一些网页一样的提交到本网页。设置表单的action的值为?id=<%=id%>&chk=1,当chk=1的时候我们就处理该表单,然后提示回复成功。如果chk没有值,也就是没有提交表单的时候,就显示表单。
首先获取提交上来ID的值,然后获取提交的信息内容,查找数据库。定义一个sub过程,用于对回复信息的处理,当chk=1的时候我们调用这个过程。在该过程中调也调用了一个过程,过程内容为<>
onLoad="setTimeout(window.close, 2000)">,这个意思是2秒钟关闭网页。修改回复内容也是这个网页,当chk=2的时候,就在文本域中显示信息内容。
这个依然有搜索的功能。这里有4种搜索方式。其实现页面gbook.asp。利用select case定义了4个分支。去分支变量都是ijob。
1、所有留言,我们将这个超链接href的值设置为?ijob=1
2、投诉留言,我们将这个超链接href的值设置为?ijob=2
3、普通留言,我们将这个超链接href的值设置为?ijob=3
4、没回复的留言,我们将这个超链接href的值设置为?ijob=4
后面相应的按照各种不同的ijob结果,设置不同的sql语句。实现搜索功能。
7.8安全退出
安全退出,其实现原理是删除用户在服务器端的信息。我们在登陆的时候,会在服务器端和客户端保存一些信息,这些信息由cooikes和session实现。当我们需要退出的时候,会删除在服务器端的信息,减轻服务器的压力。当然session在服务器中的保存是有时间限制的,一般的默认时间为20分钟。
当我们单击安全退出的时候,值需要将其保存在服务器端的信息设置为空。然后跳转到登录页面,这样的话就实现了安全退出的效果。
8总结
其实就我个人来说,做网站就跟算数学题一样,需要
良好的思维。做网站逻辑性比较强,只要你能想到那方面上去,基本上就能够实现你想要的功能,因为现在的网络这么发达,信息资源这么多,什么问题都能在网上找到。
本动态网站是用dreamweaver制作,使用的ASP开发的。我们所写的代码,都是从上往下一步一步执行的,这点不容忽视。Cooikes所保存的信息是存放在客户端,所谓客户端就是用户自己的浏览器中。Session变量所保存的信息是保存在服务端的,所谓服务端就是服务器端。
在使用IIS的时候,会出现访问数据库乱码的问题。这是由编码所造成的,我们utf_8是国际编码,gb2312是中文编码。我们需要将编码换成gb2312。
charset=utf-8"。将<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>中的CODEPAGE="65001"删除。这样就不会出现乱码了。
为了使用语言规范,我们经常在定义变量前加上 option explicit这句话,这句话的意思是要求声明变量,加上这句话后所有的变量都需要声明才能使用。
动态网站都需要访问数据库,必不可少的需要创建数
据库的链接对象,和创建记录集链接对象,注意在使用这些链接后都需要关闭,不然会很浪费服务器资源,当很多人访问该网站的时候,会造成服务器崩溃。用后就关,养成好习惯。
为了减少网站的占用空间和访问速度,尽量将一些网页都会用到的文件独立起来。使用的时候就调用。
在提取表单的值的时候,尽量将表单项目名称、变量和数据库字段名设置成一致。以免混淆。
制作1个ico图标放到站点根目录下,大小一般是16X16,当我们上传网站到服务器的时候,这个图片会显示到浏览器网址前面。
结束语
此毕业论文的设计,虽然功能还不够完善,但我是花费了大量精力和时间去做的。查阅了大量的资料。由于系统各种兼容性的原因,我采用的是access数据库。
在以前学了很多的专业知识,虽然通过学习对这些课
程有所了解和掌握,但是始终处于理论知识的掌握阶段,并没有真正应用于实践设计开发,所以对知识的掌握还不够全面和熟练,并不能真正独立的开发出一个完整的应用于实际的系统。通过这次毕业设计,使我学到了很多,对自身的能力有了很大的提高。
整个开发的过程对我来说是一次将理论应用于实践的过程,是将以前所学知识充分利用的过程,是一次真正的实践过程。
总体说来,在这次的毕业论文设计中,学到了一些在课堂内所学不到的知识,收获很大。
致 谢
首先感谢我的指导老师兰晶老师,他在我的毕业设计过程中给了指导性的方案和架构,指引我阅读相关的资料和书籍,使我能学习掌握知识并完成了毕业设计。
感谢本站的图片制作者,制作了本站的大部分图片。是网站看起来更加美观。
感谢学校对我的培育,让我从思想上、素质上和知识上得到很大的提高。在校学习的过程中的各科老师的悉心教导让我掌握了更多的知识,对提高我的知识面有很大的帮助。
最后要感谢我的同学在设计完成前后对我的帮助,没有同学的共同学习进步也许就没法完成设计,没有同学的帮助,也许一些潜在的错误难以得到更正,在此一并表示感谢。
在此祝愿学校领导、老师、同学工作顺利,事业更上一层楼;同时也祝愿学校更加辉煌!
参考文献
[1]- 薛小龙-《程序天下ASP经典模块开发大全》-电子工业出版社-2008-1~630
[2]- 陶国荣-《ASP动态商业网站建设案例》-人民邮电出版社-2006-1~417
[3]- 薛会爱,庞娅娟-《ASP网络编程标准教程》-人民邮电出版社-2009-307~484
[4]- 陈刚-《CSS标准网页布局开发指南》-清华大学出版社-2007-1~412
[5]- 屈喜龙、李正庚-《Asp+dreamweaver开发动态网站实例荟萃》-机械工
业出版社-2006-218~313
[6]- 周兴华,王敬栋-《ASP + Access数据库开发与实例》-清华大学出版社-2006-113~228
[7]- 清汉计算机工作室-《ASP开发实例》-机械工业出版社-2000-238~366
[8]- 戴丽丝-《ASP程序设计基础》-清华大学出版社-2009-1~297
范文三:动态网页设计论文
动动动动动动文网
一、述 概- 3 –
二、动动 构- 3 –
三、站点主动动动 - 4 –
四、模动介动 - 4 –
;一,index - 4 –
;二,公告动 - 5 –
;三,心动游动 - 5 –
;四,新动、动动、游动等附板动 属- 5 –
五、动动 - 6 –
一、述概
随网断国网个网着互动的不动展和中动人口的日益增动~建立人站~不但可以动好的展示自己~而且可以提高自己在动算机动用方面的能力。
故本次作动~我动动制作人站。个网
个个内人在动动动考动的多动人的动趣喜好~而不注重商动的展示。容以反
映人动中心~而使人站正的成动展示自己的个从个网真网动名片。在动制作中~我借动了动人站的动动动格~着重于动动动者以强烈的网国个网
动动动。用了冲运和强大的动像制作和动理能力。动行photoshopfireworks了大量的动片制作~而动人以强烈的美感。利用从并动行片动动画的Flash制作~动予动动者一动强烈的动代动感。整站的架是由个网构完Dreamwave
成的。
二、动动构
三、站点主动动动
由于动上各动各动的信息多~动人可以动易的各大知名站上了解自网很网
己想要的信息。所以~我的动注的便是动动自己的站更具有性魅怎网个
力~使人擅动的信息更全面的反映于动动者。以上便是我人站点主动个个
动动的指动思想。
站点的主容由人日常生活和大各动作动部分动成。动和生体内个学两从学
活大方面全方位展示自己富多彩的大生活。两丰学
在主要容之外~动动有动动、游动、新动三模动。动部分容我人动动内个内将个网
动所收集到的奇动趣事反映动大家。;此部分未动通,四、模动介动
;一,index
使用动动入主动~动人一动耳目一新之感。动始的隧道引入~画两个Flash
表明引动动动者动入本人的心世界~之而的是以动色动主色动的动内随来画~
动人一动动情好客的感动~不动动的站容更是起到了提示和述的断网内概
作用。
;二,公告动
公告动是我人正在或要动生重大事情的提示动。容动动的动版动个将内与条
有曲同工之妙。公告动动动是由一面大鼓作动引动~用以寓意此部分异内
容重要之动。在底动字的动托之下更动示其动受到的动注程度之高。黄
;三,心动游动
心动游动是人心的自我动动之所~自己日常生活的感悟下动个灵将写来与
动者交流。动部分也动动了自己的得失~淀了自己的情动。与沉
在主动上有动部分的文章列表~动动者点动之后跳动到每篇文章相动立将独的动中。而每一相动立的动以色动主色动~有一动流露人思想网个独网黄个
之感。
;四,新动、动动、游动等附板动属
动板动聚集了本人在日常动动互动动收集到的奇动趣事。动部分容不在网内并
内广内容的度~而是考动所反映容的深度和全面性。动得一提的是~动入动部分是通动的动言动。形式动动新动写。FlashActionscrip五、动动
不知不动动动动的动程要动束了~动动动程所包含容的富是动我网将内丰从没
有想到的。在整的动动程中~我动了个学学
、、、动言、、站建动的基本思想等重网FlashDreamwaveFireworksHtmlIIS要容。到动在动止~我动是动幸能动到动动多的容。内很学内
整站的制作是我一人完成的。动然整动的动动有多不足~个网个个网构很
动有一些板动有动通~但是我的能动感到在我制作动程中技能的提高没确。
整站的不足我想是有使用到一些动动动的知动~使得日后站个网没网网
的动动动动繁动。希望明年可以动到动动站的动程~而动自己在网从弥动动动网动言
方面的不足。
范文四:ASP动态网页设计论文
河南商业高等专科学校 2011 届网站设计(论文)
我的网站设计
院 (系 ) :计 算 机
学生姓名:王 胜
指导教师:李 奇
专 业:计算机应用专业
班 级:计应 (2)
完成时间:2011年 4月 5日星期二 2011年 4月
ASP 动态网页设计论文 我的网站设计
院 (系 ) :理学院
学生姓名:汪锦冠
指导教师:黄国辉
专 业:信息管理与信息系统
班 级:信管 1班
完成时间:2013年 10月 28日
摘 要
伴随着社会的发展和科学的进步, 上网成为越来越多人们的选择。 随着互联 网的飞速发展, 有关网络的技术也层出不穷。 从静态网页到动态网页的变化也正 说明了这一点。 掌握动态网页的基本知识, 以及动态网页设计原则和设计过程就 显得尤为重要。
一 、 动态网页的发展
伴随着网络的出现, 网页逐渐融入人们的生活。 快速及时的新闻浏览, 五彩 缤纷的网上信息,网络与人们的生活息息相关,于是世界上又出现了第三媒体 —— Internet 。制作网页是企业和个人的宣传自己的重要手段,同时也是学习者 获取学习信息的重要手段, 尤其是在教育领域, 在素质教育与终身教育成为必然 的今天, 人们对信息的需求有了更新, 更高的要求, 而网页由于本身所具有的信 息量大, 传递快速, 没有时空限制等特点恰好满足这种要求。 所以网页也逐渐成 为一种新兴的教育资源。 为了更有效的利用这种资源, 本文对动态网页布局设计 方面进行了有益的探索。
1、网页
什么是网页呢?网页实际是一个文件, 他存放在世界某个角落的的某一台计 算机中而这台计算机必须是与互联网相连的。 网页经由网址 (URL )来识别与存 取, 当我们在浏览器输入网址后, 经过一段复杂而又快速的程序, 网页文件会被 传送到你的计算机,然后再通过浏览器解释网页的内容,再展示到你的眼前。 文字与图片是构成一个网页的两个最基本的元素。 你可以简单的理解为:文 字,就是网页的内容,图片,就是网页的美观。除此之外,网页的元素还包括动 画、音乐、程序等等。
2、网页的类型
通常我们看到的网页,都是以 htm 或 html 后缀结尾的文件,俗称 HTML 文件。不同的后缀,代表不同类型的网页文件,如 CGI 、 ASP 、 PHP 、 JSP 等。
关键字:动态网页、网页、网络、 html
第一章 网站的设计
一、 文件的设置
1. 在网站根目录中开设 images 一个子目录,根据需要再开设 images 目录 中放不同栏目的页面都要用到的公共图片,例如公司的标志、 banner 条、 菜单、按钮等等。为节约时间并且文件数不是很多的话可以将其它的文件和 images 文件夹放在一个文件夹里。 我就是用的这种方法; 如果文件数多, 为 了以后更好的查找文件应该再建三个文件夹 common 、 temp 、 media 。 common 子 目录中放 css 、 js, 、 php 、 include 等公共文件; temp 子目录放客户提供的 各种文字图片等等原始资料; media 子目录中放 flash, avi, quick time 等 多媒体文件 。
2. 文件数量不多,可以将所有的文件都和 images 放在同一文件夹里;文件 数量比较多了,原则上就应该在根目录中按照首页的栏目结构,给每一个栏 目开设一个目录, 根据需要在每一个栏目的目录中开设一个 images 和 media 的子目录用以放置此栏目专有的图片和多媒体文件, 如果这个栏目的内容特 别多,又分出很多下级栏目,可以相应的再开设其他目录。
3. 如果开设了 temp ,则 temp 目录中的文件往往会比较多,建议以时间为 名称开设目录,将客户陆续提供的资料归类整理。
4. 除非有特殊情况,目录、文件的名称全部用小写英文字母、数字、下划 线的组合,其中不得包含汉字、空格和特殊字符;目录的命名请尽量以英文 为指导,不到万不得已不要以拼音作为目录名称,经验证明,用拼音命名的 目录往往连一个月后的自己都看不懂。
二、 表格的设计
网页的存在, 则必需有一个布局的存在, 布局是所有内容的基础, 也是整个 网页的基础;同时布局设计好坏也决定了一个网页在 Internet 上的访问速度。 所以一个网页好不好看、好不好用很多时候都决定于布局设计方面。
因为结构比较简单, 我下面采用的是用表格布局。 这样对网页的访问速度还
是有帮助的。
三、主表格的设计
这次我设计的网页是一款小巧而精美的网站, 所以我考虑到把整个网页的内容都 要在显示器上一个屏幕的大小就能显示出来 , 而现在显示器的分辨率一般为 1024*768以上,所以按照这种思路我把最外层的表格设置如下:
cellpadding=
这样网页的内容都一眼就能全部看到了。
第二章 网站简介
一、峡溪漂流概述
宁乡沩山风景名胜区峡溪漂流景区于 2006年 10月 1日正式对外营业。 湖南宁乡沩山峡溪漂流风景区地处湖南省宁乡县黄材镇(原崔坪乡)境内, 距县城 62公里。漂流全长 9公里,水位落差 98. 5米,急滩 21个。本景区采取 二人自助漂。境内风清气爽、气候宜人,是旅游避暑胜地;峡溪水质一流、资源 丰富、落差大、多、长、刺激、动感、曲折迭宕、深谷幽潭,宜于漂流。景区内 主要精华景点有:迎客松、扇子排、情侣树、烽火台、雷打石、狮身人面像等。 省会周边近距离内最大最具特色的天然溶洞——千佛洞, 离此处仅 1公里的 车程。洞内石钟乳、石笋、石桩千姿百态,鬼斧神工,令人神往;洞外,青山对 峙、地形奇峻、风景怡人。这里交通方便,设施齐全,内设高档宾馆、餐厅、烧 烤、民俗表演等,吃、住、玩、乐,一应俱全。
宁乡沩山峡溪生态旅游有限责任公司以 360°休闲旅游为理念, 着力打造全 方位精品:激情漂流、晨漂、夜漂、峡谷探秘、探险、岸降、溯溪、溪降等,日 后还拟大规模投资建设农业观光园、 少年水库度假村, 湖南宁乡沩山峡溪漂流风 景区将集餐饮、度假、娱乐、健身于一体,成为生态休闲度假旅游区。驾一叶小 舟,乘风破浪,妙趣横生!
湖南宁乡沩山峡溪漂流风景区抖动迷人的风姿, 迎接海内外各地朋友前来观 光、旅游,激情一漂!
二、网页设计
确定网站制作栏目,确定界面风格和大致框架结构后,根据风格对图片进行 处理,并掌握 logo 设计的基本方法和设计风格统一的按钮、底纹、边框,确定 网站的大致界面。
2.2.1景点拍照
峡溪漂流 flash 网站设计需要运用大量的景点图片, 进行具有特色和风格的 视觉创意。因此,需要在景点取景,用于点缀、丰富网页。
2.2.2收集资料
现场取景拍照受到各种因素的影响, 因而导致取景不够全面, 因此为了满足 网页设计的需求, 必须要收集大量的不同角度的相关照片。 当然, 也必须要收集 大量的有关峡溪漂流的其他各方面资料,用以充实网页。
2.2.3图片处理
Photoshop 具有强大的图像修饰功能。利用这个软件,可以快速修复一张破 损的照片, 也可以修复照片本身所存在的一些缺陷。 为了这些照片能够具有更好 的视觉效果, 运用 Photoshop 软件对图像的颜色进行了明暗、 色编的调整和校正, 使图片的效果更为突出,同时也是图片的风格与网页的风格更为协调统一。
第三章 网页的设计
一、文件的设置
1. 在网站根目录中开设 images 一个子目录, 根据需要再开设 images 目录 中放不同栏目的页面都要用到的公共图片, 例如公司的标志、 banner 条、 菜单、 按钮等等。为节约时间并且文件数不是很多的话可以将其它的文件和 images 文 件夹放在一个文件夹里。 我就是用的这种方法; 如果文件数多, 为了以后更好的 查找文件应该再建三个文件夹 common 、 temp 、 media 。 common 子目录中放 css 、 js, 、 php 、 include 等公共文件; temp 子目录放客户提供的各种文字图片等等 原始资料; media 子目录中放 flash, avi, quick time 等多媒体文件 。 2. 文件数量不多, 可以将所有的文件都和 images 放在同一文件夹里; 文件 数量比较多了, 原则上就应该在根目录中按照首页的栏目结构, 给每一个栏目开 设一个目录, 根据需要在每一个栏目的目录中开设一个 images 和 media 的子目 录用以放置此栏目专有的图片和多媒体文件, 如果这个栏目的内容特别多, 又分
出很多下级栏目,可以相应的再开设其他目录。
3. 如果开设了 temp ,则 temp 目录中的文件往往会比较多,建议以时间为 名称开设目录,将客户陆续提供的资料归类整理。
4. 除非有特殊情况,目录、文件的名称全部用小写英文字母、数字、下划 线的组合, 其中不得包含汉字、 空格和特殊字符; 目录的命名请尽量以英文为指 导, 不到万不得已不要以拼音作为目录名称, 经验证明, 用拼音命名的目录往往 连一个月后的自己都看不懂。
二、布局设计
网页的存在, 则必需有一个布局的存在, 布局是所有内容的基础, 也是整个 网页的基础;同时布局设计好坏也决定了一个网页在 Internet 上的访问速度。 所以一个网页好不好看、好不好用很多时候都决定于布局设计方面。
因为结构比较简单, 我下面采用的是用表格布局。 这样对网页的访问速度还 是有帮助的。
三 主表格的设计
这次我设计的网页是一款小巧而精美的网站, 所以我考虑到把整个网页的内容都 要在显示器上一个屏幕的大小就能显示出来 , 而现在显示器的分辨率一般为 1024*768以上,所以按照这种思路我把最外层的表格设置如下:
cellpadding=
这样网页的内容都一眼就能全部看到了。
四 首页的布局
首页分为左右两部分,左边是一个 flash ,右边则是网页的内容介绍。按照 一定比例将最外层表格划分为两个单元格,设置如下:
cellpadding=
左右设计好后,再根据内容设计表格,当然,为了提高网页的访问速度,表 格的嵌套不超过三层。其它设计如下:
cellpadding=
cellpadding=
valign=
bordercolor=
bgcolor=
valign=
/>
bgcolor=
bgcolor=
class=
bgcolor=
bgcolor=
class=
class=
bgcolor=
bgcolor=
bgcolor=
class=
class=
class=
class=
class=
class=
bgcolor=
bgcolor=
五、二级页面的设计
二级页面 (除了留言页面) 的布局和首页非常相似, 只需将右侧的表格做小 的修改或删除就可以了。
六、留言页面的设计
因留言页面涉及到文本的输入, 所以要在页面中设计文本输入框, 单行文本 域设计如下:
多行文本域设计如下:
左侧内容的显示是在每一个表格中显示出来不同内容的,所以设计如下:
题:
class=
七、总结
网站的整体布局已经基本出来了, 只需要将内容加进去就是一个完整的网站 了。
在上述所说的的布局中, 全部是使用的代码, 当然这种布局不是最简单、 实 用的方法, DW 中的布局可视化设计是一个十分不错的选择,当然完全的窗口操 作会给后面的数据添加带来很多的不便, 所以, 设计和代码结合是我觉得最实用 也是最好用的方法
范文五:毕业设计论文 动态网页设计
毕业设计(论文)
题 目: 动态网页设计
摘 要
在Internet飞速发展的今天,互联网已成为人们快速获取、发布和传递信息的重要渠道,正以一种前所未有的冲击力影响着人类的活动。它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显的格外重要,它已成为政府、企事业单位信息化建设中的重要组成部分。
现今的社会,人们已经离不开了网络,网络已经成为人与人之间交流的一种形式,它能够把事情的复杂化转为简单化,摆脱了时间和空间的限制。网站为消费者提供了一个网络生活空间,通过其网页展示了企业介绍、企业荣誉、产品介绍、招商信息、加盟程序、留言等一系列内容的介绍。浏览者不仅可以利用留言板经济而又快
捷地与外界进行各种信息的沟通,也可以直接在网上申请加盟。
本论文还介绍了网页的结构分析和具体功能实现,网页的界面和运作方式,尽力模拟近代网页普遍性形式,成为一个完整的动态网站
关键字
Dreamweaver;Php;PhpMyAdmin;动态网页
1
目 录
1 引言 ................................................... 1
2 网页制作概述 ........................................... 1
2.1 网页的类型 ......................................................................................... 1
2.1.1 静态页面 .................................................................................. 1
2.1.2 动态页面 .................................................................................. 2
2.2 网页开发技术 ..................................................................................... 2
2.3 网页布局 ............................................................................................. 3
2.3.1 网页布局的基本概念 .............................................................. 3
2.3.2网页布局方法 ........................................................................... 5
2.3.2 网页布局技术 .......................................................................... 7
2.4网页配色 .............................................................................................. 8
2.5 网页设计流程 ..................................................................................... 9
3 动态网页开发环境和技术................................. 9
3.1 了解Dreamweaver开发工具 .............................................................. 9
3.2 Php语言基础知识 ............................................................................. 11
3.3 开发环境介绍 ................................................................................... 12
4 设计及具体代码实现 .................................... 12
4.1网页结构设计 .................................................................................... 12
4.2创建数据库 ........................................................................................ 13
4.3主要模块的代码实现 ......................................................................... 14
4.3.1 注册代码的实现 .................................................................... 14
4.3.2 登陆及退出登录代码的实现 ................................................. 16
4.3.3留言代码的实现 ..................................................................... 18
4.4运行测试 ............................................................................................ 19
4.4.1 注册 ....................................................................................... 19
4.4.2 登陆 ....................................................................................... 21
4.4.3留言 ........................................................................................ 22
4.5遇到的问题及解决方法 ..................................................................... 23
结 束 语 ................................................ 24 致 谢 ............................................... - 25 - 参考文献 ............................................ - 26 -
1
1 引言
网页是网站信息发布与表现的一种主要形式。因此要实现一个网站,必须了解网页制作的相关知识。较流行的开发工具有:Dreamweaver,Php,PhpMyAdmin。
Dreamweaver是建立Web站点和应用程序的专业工具,它将可视布局工具、应用程序开发功能和代码编辑支持组合成一个功能强大的工具,可利用它快速创建界面及站点的应用程序。Php因为语法简单、开源、跨平台,而且功能强大,同时能与Windows的操作系统无缝结合,得到广大用户欢迎并迅速成为各类网站制作的主流开发环境。使用PhpMyAdmin无须编写任何代码,只需通过直观的可视化操作就可以完成大部分数据库管理任务,是一个面向对象的、采用事件驱动机制的关系型数据库管理系统。 [2][1]
2 网页制作概述
2.1 网页的类型
2.1.1 静态页面
静态页面是网页的代码都在页面中,不需要执行asp,php,jsp,.net等程序生成客户端网页代码的网页。静态页面不能自主管理发布更新的页面,如果想更新网页内容,要通过FTP软件把文件DOWN下来用网页制作软件修改(通过fso等技术例外)。但是静态页面最大的好处是下载速度快,因为不需要程序运算和数据库连接。常见的静态页面以.html、.htm为扩展名的。并非网站上没有动画的就是静态页面。 [3]
1
2.1.2 动态页面
动态页面是通过执行asp、php、jsp、.net等程序生成客户端网页代码的网页。动态页面通常可以通过网站后台管理系统对网站的内容进行更新管理。发布新闻,发布公司产品,交流互动,博客,网上调查等,这都是动态网站的一些功能,也是我们常见的。动态网页是需要语言环境支持的,动态页面常见的扩展名有:.asp、 .php、 .jsp 、.cgi 等。动态页面的“动态”是网站与客户端用户互动的意思,而非网页上有动画的就是动态页面。
动态网页是最常用的网站建设的一种表达形式,其优点在于可以根据先前所制定好的程序界面,根据用户的不同请求返回相应的数据。可以说是一对多的关系。从而达到资源的最大利用和节省服务器上的物理资源。如果今后需要改变站点风格,只需要重新制作前台所访问的数据即可。只要数据库结构不变,可以很快的进行改版的。 [4]
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技术成熟而且功能强大,但由于编程困难,效率低下,修改复杂等缺陷,所以有逐渐被新技术取代的趋势。 [5]
2
ASP全名Active Server Pages,是一个WEB服务器端的开发环境,利用它可以产生和运行动态的、交互的、高性能的WEB服务应用程序。ASP采用脚本语言VB Script(Java script)作为自己的开发语言。 ASP更精确的说是一个中间件,这个中间件将Web上的请求转入到一个解释器中,在这个解释器中将所有的ASP的Script进行分析,再进行执行,而这时可以在这个中间件中去创建一个*.html文件(静态网页)。 PHP是一种跨平台的服务器端的嵌入式脚本语言. 它大量地借用C,Java和Perl语言的语法, 并耦合PHP自己的特性,使WEB开发者能够快速地写出动态生成页面.它支持目前绝大多数数据库。还有一点,PHP是完全免费的。
JSP 是Sun公司推出的新一代站点开发语言,他完全解决了目前ASP,PHP的一个通病--脚本级执行(据说PHP4 也已经在Zend 的支持下,实现编译运行)。Sun 公司借助自己在Java 上的不凡造诣,将Java 从Java 应用程序 和 Java Applet 之外,又有新的硕果,就是Jsp--Java Server Page。Jsp 可以在Serverlet和JavaBean的支持下,完成功能强大的站点程序。 [6]
2.3 网页布局
2.3.1 网页布局的基本概念
最开始,网页呈现在你面前的时侯,它就好像一张白纸,它需要你任意挥洒你的设计才思,可以创造出自己的设计方案。,虽然你能控制一切你所能控制的东西,但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯,那么你可以在此基础上加上自己的东西,这样你创造出来的网页才能更好的被别人接受。
(1) 页面尺寸
由于页面尺寸和显示器大小及分辨率有关系,网页的局限性就在于你无法突破显示器的范围,而且因为浏览器也将占去不少空间,留下给你的页面范围变得越来越小。一般分辨率在800x600的情况下,页面的显示尺寸为:780x428个象素;分辨率在640x480的情况下,页面的显示尺寸为:620X311个象素;分辨率在1024X768的情况下,页面的显示尺寸为:1007x600。从以
3
上数据可以看出,分辨率越高页面尺寸越大。
浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都可以取消或者增加,那么当你显示全部的工具栏时,和关闭全部工具栏时,页面的尺寸是不一样的。
在网页设计过程中,向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。除非你能肯定站点的内容能吸引大家拖动,否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容,那么你最好能在上面做上页面内部连接,方便访问者浏览。
(2)整体造型
造型就是创造出来的物体形象,这里是指页面的整体形象。这种形象应该是一个整体,图形与文本的接合应该是层叠有序。虽然,显示器和浏览器都是矩形,但对于页面的造型,你可以充分运用自然界中的其它形状以及它们的组合:矩形,圆形,三角形,菱形等。
对于不同的形状,它们所代表的意义是不同的。比如矩形代表着正式,规则,你注意到很多ICP和政府网页都是以矩形为整体造型;圆形带表着柔和,团结,温暖,安全等,许多时尚站点喜欢以圆形为页面整体造型;三角形代表着力量,权威,牢固,侵略等,许多大型的商业站点为显示它的权威性常以三角形为页面整体造型;菱形代表着平衡,协调,公平,一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义,但目前的网页制作多数是接合多个图形加以设计,在这其中某种图形的构图比例可能占的多一些。
(3)页头
页头又可称之为页眉,页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样,访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键,它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。
(4)文本
文本在页面中出现都数以行或者块(段落)出现,它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限,文本放置的位置的灵活性非常小,而随着DHTML的兴起,文本已经可以按照自己的要求放置
4
到页面的任何位置。
(5)页脚
页脚和页头相呼应。页头是放置站点主题的地方,而页脚是放置制作者或者公司信息的地方。你能看到,许多制作信息都是放置在页脚的。
(6)图片
图片和文本是网页的两大构成元素,却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。
(7)多媒体
除了文本和图片,还有声音,动画,视频等等其它媒体。虽然它们不是经常能被利用到,但随着动态网页的兴起,它们在网页布局上也将变得更重要。
2.3.2网页布局方法
网页布局的方法有两种,第一种为纸上布局;第二种为软件布局。下面分别加以介绍。
(1)纸上布局法
许多网页制作者不喜欢先画出页面布局的草图,而是直接在网页设计器里边设计布局边加内容。这种不打草稿的方法不能让你设计出优秀的网页来。所以在开始制作网页时,要先在纸上画出你页面的布局草图来。
首先,尺寸的选择。目前一般800X600的分辨率为约定俗成的浏览模式。所以为了照顾大多数访问者,你页面的尺寸以800X600的分辨率为准。
其次,造型的选择。先在白纸上画出象征浏览器窗口的矩形,这个矩形就是你布局的范围了。选择一个形状作为整个页面的主题造型,我们选择圆形,因为它代表者柔和,和时尚流行比较相称,然后在矩形框架里随意画出来,你可以试者在增加一些圆形或者其它形状。这样画下来,你会发现很乱。其实,如果你一开始就想设计出一个完美的布局来是比较困难的,而你要在这看似很乱的图形中找出隐藏在其中的特别的造型出来。还要注意一点,你不要担心你设计的布局是否能够实现。事实上,只要你能想到的布局都能靠现今的HTML技术实现。如图2-1和图2-2
5