动态网页设计论文Word格式文档下载.docx

1、2.2 网页开发技术 22.3 网页布局 32.3.1 网页布局的基本概念 32.3.2网页布局方法 52.3.2 网页布局技术 72.4网页配色 82.5 网页设计流程 93 动态网页开发环境和技术 93.1 了解Dreamweaver开发工具 93.2 Php语言基础知识 113.3 开发环境介绍 124 设计及具体代码实现 124.1网页结构设计 124.2创建数据库 134.3主要模块的代码实现 144.3.1 注册代码的实现 144.3.2 登陆及退出登录代码的实现 164.3.3留言代码的实现 184.4运行测试 194.4.1 注册 194.4.2 登陆 214.4.3留言 22

2、4.5遇到的问题及解决方法 23结 束 语 24致 谢 - 25 -参考文献 - 26 -1 引言网页是网站信息发布与表现的一种主要形式。因此要实现一个网站，必须了解网页制作的相关知识。较流行的开发工具有：Dreamweaver，Php，PhpMyAdmin。Dreamweaver是建立Web站点和应用程序的专业工具，它将可视布局工具、应用程序开发功能和代码编辑支持组合成一个功能强大的工具,可利用它快速创建界面及站点的应用程序1。Php因为语法简单、开源、跨平台，而且功能强大，同时能与Windows的操作系统无缝结合，得到广大用户欢迎并迅速成为各类网站制作的主流开发环境。使用PhpMyAdmi

3、n无须编写任何代码，只需通过直观的可视化操作就可以完成大部分数据库管理任务，是一个面向对象的、采用事件驱动机制的关系型数据库管理系统2。2 网页制作概述2.1 网页的类型2.1.1 静态页面静态页面是网页的代码都在页面中，不需要执行asp,php,jsp,.net等程序生成客户端网页代码的网页。静态页面不能自主管理发布更新的页面,如果想更新网页内容,要通过FTP软件把文件DOWN下来用网页制作软件修改（通过fso等技术例外）。但是静态页面最大的好处是下载速度快，因为不需要程序运算和数据库连接。常见的静态页面以.html、.htm为扩展名的。并非网站上没有动画的就是静态页面3。2.1.2 动态页

4、面动态页面是通过执行asp、php、jsp、.net等程序生成客户端网页代码的网页。动态页面通常可以通过网站后台管理系统对网站的内容进行更新管理。发布新闻，发布公司产品，交流互动，博客，网上调查等，这都是动态网站的一些功能，也是我们常见的。动态网页是需要语言环境支持的，动态页面常见的扩展名有：.asp、 .php、 .jsp 、.cgi 等。动态页面的“动态”是网站与客户端用户互动的意思，而非网页上有动画的就是动态页面4。动态网页是最常用的网站建设的一种表达形式，其优点在于可以根据先前所制定好的程序界面，根据用户的不同请求返回相应的数据。可以说是一对多的关系。从而达到资源的最大利用和节省服务器

5、上的物理资源。如果今后需要改变站点风格，只需要重新制作前台所访问的数据即可。只要数据库结构不变，可以很快的进行改版的。2.2 网页开发技术动态网页开发技术介绍HTML、ASP、JSP、CGI、PHP。HTML（HyperTextMark-upLanguage）即超文本标记语言，是WWW的描述语言。严格的来讲，HTML不能算做一门编程语言，因为它没有自己的数据类型，也没有分支、循环等控制结构。它的设计简单，结构灵活，允许在Web浏览器及其它兼容的应用程序中显示文本和图像，并且文档的某些部分可以成为超链接。完成后把这些文档保存为*.html文件，然后用浏览器打开。 HTML是网络的通用语言,一种简

6、单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器5。在早期，动态网页技术主要采用CGI技术，即Common Gateway Interface（公用网关接口）。在早期，你可以使用不同的程序编写合适的CGI程序，如Visual Basic,Delphi或C/C+等。虽然CGI技术成熟而且功能强大，但由于编程困难，效率低下，修改复杂等缺陷，所以有逐渐被新技术取代的趋势。ASP全名Active Server Pages，是一个WEB服务器端的开发环境，利用它可以产生和运行动态的、交互的、高性能的WEB服务应

7、用程序。ASP采用脚本语言VB Script（Java script）作为自己的开发语言。 ASP更精确的说是一个中间件，这个中间件将Web上的请求转入到一个解释器中，在这个解释器中将所有的ASP的Script进行分析，再进行执行，而这时可以在这个中间件中去创建一个*.html文件（静态网页）。 PHP是一种跨平台的服务器端的嵌入式脚本语言. 它大量地借用C,Java和Perl语言的语法, 并耦合PHP自己的特性,使WEB开发者能够快速地写出动态生成页面.它支持目前绝大多数数据库。还有一点，PHP是完全免费的6。JSP 是Sun公司推出的新一代站点开发语言，他完全解决了目前ASP,PHP的一个

8、通病脚本级执行（据说PHP4 也已经在Zend 的支持下，实现编译运行）。Sun 公司借助自己在Java 上的不凡造诣，将Java 从Java 应用程序 和 Java Applet 之外，又有新的硕果，就是JspJava Server Page。Jsp 可以在Serverlet和JavaBean的支持下，完成功能强大的站点程序。2.3 网页布局2.3.1 网页布局的基本概念最开始，网页呈现在你面前的时侯，它就好像一张白纸，它需要你任意挥洒你的设计才思，可以创造出自己的设计方案。，虽然你能控制一切你所能控制的东西，但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯，那么你可以在此基

9、础上加上自己的东西，这样你创造出来的网页才能更好的被别人接受。（1） 页面尺寸由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围变得越来越小。一般分辨率在800x600的情况下，页面的显示尺寸为：780x428个象素；分辨率在640x480的情况下，页面的显示尺寸为:620X311个象素；分辨率在1024X768的情况下，页面的显示尺寸为：1007x600。从以上数据可以看出，分辨率越高页面尺寸越大。浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都可以取消或者增加，那么当你显示全部的工具栏时，和关

10、闭全部工具栏时，页面的尺寸是不一样的。在网页设计过程中，向下拖动页面是惟一给网页增加更多内容（尺寸）的方法。除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么你最好能在上面做上页面内部连接，方便访问者浏览。（2）整体造型造型就是创造出来的物体形象，这里是指页面的整体形象。这种形象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规则，你注意到很多IC

11、P和政府网页都是以矩形为整体造型；圆形带表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义，但目前的网页制作多数是接合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。（3）页头页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页头

12、常放置站点名字的图片和公司标志以及旗帜广告。（4）文本文本在页面中出现都数以行或者块（段落）出现，它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限，文本放置的位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。（5）页脚页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。你能看到，许多制作信息都是放置在页脚的。（6）图片图片和文本是网页的两大构成元素，却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。（7）多媒体除了文本和图片，还有声音，动画，视频等等其它媒体。虽

13、然它们不是经常能被利用到，但随着动态网页的兴起，它们在网页布局上也将变得更重要。2.3.2网页布局方法网页布局的方法有两种，第一种为纸上布局；第二种为软件布局。下面分别加以介绍。（1）纸上布局法许多网页制作者不喜欢先画出页面布局的草图，而是直接在网页设计器里边设计布局边加内容。这种不打草稿的方法不能让你设计出优秀的网页来。所以在开始制作网页时，要先在纸上画出你页面的布局草图来。首先，尺寸的选择。目前一般800X600的分辨率为约定俗成的浏览模式。所以为了照顾大多数访问者，你页面的尺寸以800X600的分辨率为准。其次，造型的选择。先在白纸上画出象征浏览器窗口的矩形，这个矩形就是你布局的范围了。

14、选择一个形状作为整个页面的主题造型，我们选择圆形，因为它代表者柔和，和时尚流行比较相称，然后在矩形框架里随意画出来，你可以试者在增加一些圆形或者其它形状。这样画下来，你会发现很乱。其实，如果你一开始就想设计出一个完美的布局来是比较困难的，而你要在这看似很乱的图形中找出隐藏在其中的特别的造型出来。还要注意一点，你不要担心你设计的布局是否能够实现。事实上，只要你能想到的布局都能靠现今的HTML技术实现。如图2-1和图2-2 图2-1 手绘布局图 图2-2 布局图考虑到左边向左凹的弧线，为了取得平衡我们在页面右边增加了一个矩形，（也可以是一条线段） 如图2-3。 图2-3 布局图的改善然后，增加页头

15、。一般页头都是位于页面顶部，所以我们为图3增加了一个页头，为了和左边的弧线和右边的矩形取得平衡，我们增加了一个矩形页头并让页头相交与左边的弧线，如图2-4。图2-4 页头的图示然后，增加文本。页面的空白部分加别加入文本和图形。因为在页面右边有矩形作为陪衬，所以文本放置在空白部分不会因为左边的弧线而显得不协调，如图2-5。图2-5 文本的图示最后，增加图片。图片是美化页面和说明内容必须的媒体。在这里把图片加入到适当的地方，如图2-6。图2-6 图片的图示经过以上的几个步骤，一个时尚页面的大概布局就出现了。当然，它不是最后的结果，而是你以后制作时的重要参考依据。（2）软件布局法除了纸上布局，还可以

16、利用软件来完成这些工作。如利用Photoshop。Photoshop所具有的对图像的编辑功能用到设计网页布局上更显得心应手。利用Photoshop可以方便的使用颜色，使用图形，并且可以利用层的功能设计出用纸张无法实现的布局意念。2.3.2 网页布局技术（1）层叠样式表的应用在新的HTML4.0标准中，CSS（层叠样式表）被提出来，它能完全精确的定位文本和图片。CSS有点复杂，但它的确是一个好的布局方法7。曾经无法实现的想法利用CSS都能实现。目前在许多站点上，层叠样式表的运用是一个站点优秀的体现。比如一些企业网站。（2）表格布局表格布局被广泛使用，已经成为一个潜在的标准。随便浏览一个站点，它们

17、一定是用表格布局的。表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。而且表格在定位图片和文本上比起用CSS更加方便。表格布局唯一的缺点是，当你用了过多表格时，页面下载速度受到影响8。对于表格布局，打开一个站点的首页，然后保存为HTML文件，利用网页编辑工具打开它（要所见即所得的软件），会可以看到这个页面是如何利用表格的。（3）框架布局由于它的兼容性，框架布局并没有被所有人接受。但从布局上考虑，框架结构不失为一个好的布局方法。它如同表格布局一样，把不同对象放置到不同页面加以处理，因为框架可以取消边框，所以一般来说不影响整体美观。2.4网页配色网站充斥着枯燥的设计，惠普、

18、IBM、戴尔、微软，以及其他数不尽的网站（相似的布局，相似的配色）。这样一种标准化的界面可以使浏览更方便，但同时带给用户一种很世俗的体验，并不能与访客产生一种积极的联系。面对这种单调的设计，有一种解决方法，就是使用颜色。可能没有其他设计元素能像颜色一样能影响人们对世界感受。颜色可以瞬间改变我们的情绪和意见。颜色会让我们感觉到舒适、敬畏，或者激动9。在界面设计中，颜色组合对设计非常有用。可以区分设计让用户更加难忘、引导用户使用户专注于交互、吸引用户使页面布局更舒适，更有魅力。一旦有机会可以让网站更独特，就不能放弃。如果你的网站做的很醒目，那么用户可能会花更多时间浏览并且想是从哪里访问过来的，他们

19、有可能记住这个网站并且下次再访问。可能没有比颜色更好的元素可以达到这样的效果了。人们会马上对颜色产生感觉：激动、高兴或者枯燥乏味。当你试图在一个充满饱和色调的页面上浏览信息时，你的眼睛会不断地返回那些亮的颜色。最强的视觉元素是最重要的。我们趋向于忘记那些深蓝、黄色和灰色，因为每天都看到。在那些用户需要长时间在线使用的 Web 应用程序中，注意这一点尤为重要。不是很强烈的配色可以使用户专注于工作和接收重要信息。当然完美的 Web 体验不能仅仅依靠颜色，结构、交互、布局等方面也必须协同工作，来创建可用、易用的网站和应用程序。但是颜色是平衡中的重要部分，不能忽略。2.5 网页设计流程网页设计是一个互

20、动的过程，不仅是设计师构思设计就可以完成的。从客户提出需求到最终发布，期间需要客户与设计人员共同参与协商才可以，具体流程如下：首先，获取客户需求和资料。在设计网站页面之前，设计师需要知道客户的需求，从而确定客户建立网站的目的。客户提出网站需求是非常重要的一个环节。没有详细的需求，设计人员无法凭空进行设计制作。在这个步骤中，双方的沟通与交流是非常重要的。其次，确定网站内容。设计人员选择适合自己的图像编辑软件、动画制作软件和网页制作软件进行网页的初步设计，这中间可能还需要和客户进行多次沟通才能达到客户满意的效果。在具体设计时，设计人员应该为网站定位一个主题，从而保证所有网页都围绕这个主题进行设计制

21、作，保证风格的和谐统一。然后，申请域名和空间。使用该方法能够有效同步管理文件。还可以通过FTP软件连接到服务器空间上，然后上传发布文件。最后，后期维护。一般静态网站上传后，如果客户方没有专业人员维护，这样就需要设计人员从客户方获取新资料进行定期或不定期的更新。如果是动态网站，设计人员需要负责培训客户方如何使用后台管理，这样客户就可以自己通过后台管理添加信息，设计人员只要及时更正动态网站的错误即可。3 动态网页开发环境和技术3.1 了解Dreamweaver开发工具Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设

22、计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页10。 Dreamweaver的特点如下：最佳的制作效率：Dreamweaver可以用最快速的方式将Fireworks或Photoshop等档案移至网页上。Dremweaver能与您喜爱的设计工具，如Flash等和外挂模组等搭配，不需离开Dremweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。网站管理：使用网站地图可以快速制作网站雏形，设计，更新和重组网页。改变网页位置或档案名

23、称，Dreamweaver会自动更新所有连结。使用支援文字，HTML码，HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。无可比拟的控制能力：Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。帧（frames）和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得：Dreamweaver成功整合动

24、态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP， Apache，BroadVision， Cold Fusion，iCAT， Tango与自行发展的应用软体。当您正使用Dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。梦幻样版和XML：Dreamweaver将内容与设计分开，应用於快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地汇入或输出XML内容。全方位的呈现：利用Dreamweaver设计

25、的网页，可以全方位的呈现在任何平台的热门浏览器上。对于动态HTML支援和鼠标换图效果，声音和动画的DHTML效果资料库可在Netscape和Microsoft浏览器上执行。使用不同浏览器检示功能，Dreamweaver可以告知您在不同浏览器上执行的成效如何。当有新的浏览器上市时，只要从Dreamweaver的网站在下载它的描述档，便可得知详尽的成效报告。3.2 Php语言基础知识PHP（Hypertext Preprocessor）是一种嵌入HTML页面中的脚本语言。它大量地借用C和Perl语言的语法， 并结合PHP自己的特性，使Web开发者能够快速地写出动态产生页面11。PHP是完全免费的开

26、源产品，不用花钱，Apache和MYSQL也是用样免费开源，在国外非常流行，PHP和MYSQL搭配使用，可以非常快速的搭建一套不错的动态网站系统，因此国外大多数主机系统都配有免费的APACHEPHPMYSQL。通常认为这种搭配的执行效率比IISASPACCESS要高，而后者的使用还必须另外交钱给微软。PHP的语法和Perl很相似，但是PHP所包含的函数却远远多于Perl，PHP没有命名空间，编程时候必须努力避免模块的名称冲突。一个开源的语言虽然需要简单的语法和丰富的函数，但PHP内部结构的天生缺陷导致了PHP不适合于编写比中小型业余网站更大的网站12。PHP开发的成功案例：MediaWiki

27、著名的维基百科（Wiki）程序，如此庞大的条目居然只用PHPMYSQL就能够支持，真是不可思议。WordPress 著名的Blog系统，功能上丝毫不输于Movable Type，不少用户都纷纷从Movable Type转移到了WordPress。总之，PHP语法简单，非常易学易用，很利于快速开发各种功能不同的定制网站，PHP因为结构上的缺陷，使的PHP在复杂的大型项目上的开发和维护都比较困难。它是一种服务器端的脚本语言，嵌入在HTML中，它可以在多种平台上运行。其语法与C语言、Java语言的语法相似。它具有庞大的函数库，这主要是因为它是开源式的，源代码完全公开，每个使用PHP的程序员都可以加入

28、自己的函数库，从而实现更多的功能，PHP几乎支持所有的数据库。但是PHP对组件的支持不够完善，扩展性较差，常与免费的数据库系统MySQL一起构建中小型B/S应用的网站或信息系统13。3.3 开发环境介绍如果仅仅需要编辑静态的HTML网页，那么安装和配置服务器不是必需的，因为HTML页面的运行无需服务器的支持，但是如果需要在本地测试Php或者ASP.NET等动态网页，那么服务器的支持是必不可少的。Apache本身是一个开源组织的名称，它组织开发了许多优良的开源软件，其中最早的项目便是Apache HTTP Server,一个开源的免费的Web服务器14。Apache HTTP Server是Ap

29、ache Software Foundation的一部分，除了官方的开发人员以外还有数以百计的用户参与开发，他们可以提供自己的意见、代码及文档等。Php最初员就是基于Apache开发的，所以它与Apache有良好的兼容性。4 设计及具体代码实现本网页是一个关于新疆旅游的网页，其主要实现了新疆线路介绍、新疆景点介绍、新疆小吃介绍、游客注册、游客登录及退出、游客留言等功能。4.1网页结构设计css+div结构目前用的人最多，框架结构现在很少有人使用了，而表格结构目前用的人也不多，但并不意味着已经被淘汰，它也有DIV所不能取代的效果 方便快速的布局，只要不是经常改动的小部分就可以用表格。DIV可以与

30、表格一起用，大布局用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 注册代码的实现?phpif（$_POSTname）