E__gyq_网站的设计与实现new

1、网站的设计与实现清青智能产品有限责任公司内容摘要在互联网飞速发展的今天，更多的企业选择了使用网络宣传自己，因为网络没有地域、时间、空间的限制，它可以实时的进行产品的宣传推广，基于让我们的公司清青智能产品有限责任公司与业界更好的交流合作，我为我公司设计完成了这个网站，网站主要板块是首页、关于我们、相关技术、产品介绍、相关下载、解决方案、客户服务等等，此网站在建设过程中已经基本听取公司的意见，满足公司的要求，最终实现了为清青公司在互联网上的宣传推广。关键词Dreamweaver ASP 时间轴目 录第一章 绪 论11.1 设计思想11.2 开发工具的选用及介绍1第二章 网站总体分析42.1 网站系

2、统分析42.2 主页分析42.3 数据库分析4第三章 网站详细设计与功能实现.53.1 首页的设计与实现53.2模板页的设计与实现183.3一般页面的设计与实现213.4数据库的连接233.5时间轴及制作27结束语参考文献致谢第一章 绪论在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建

3、设中的重要组成部分，从而倍受人们的重视。为了更好的宣传我公司的产品，提高我公司在业界的知名度，特构建“清青智能产品有限责任公司”网站。1.1设计思想通过网站，全面宣传，展示清青公司风采、产品优点与特色，发布公司的各项相关信息，让客户更好的了解我们的公司及我们的产品，增强公司与客户之间的联系，在Internet上实现完成部分产品的销售推广，提高办事效率。1.2开发工具的选用及介绍此网站在设计过程中是基于Macromedia Dreamweaver MX、Asp和Microsoft Acceess三种工具实现其网站具体功能的，在此我只介绍一下前两种工具的基本功能，第三种就不作介绍了，请大家看一下关

4、于office办公软件的书籍。1. Macromedia Dreamweaver MXMacromedia Dreamweaver MX 是一种专业的 HTML 编辑器，用于对 Web 站点、Web 页和 Web 应用程序进行设计、编码和开发。无论您喜欢直接编写 HTML 代码的驾驭感还是偏爱在可视化编辑环境中工作，Dreamweaver 都会为您提供帮助良多的工具，丰富您的 Web 创作体验。 利用 Dreamweaver 中的可视化编辑功能，您可以快速地创建页面而无需编写任何代码。不过，如果您更喜欢用手工直接编码，Dreamweaver 还包括许多与编码相关的工具和功能。并且，借助 Dre

5、amweaver，您还可以使用服务器语言（例如 ASP、ASP.NET、ColdFusion 标记语言 (CFML)、JSP 和 PHP）生成支持动态数据库的 Web 应用程序。 2.ASP现在的动态网页技术如ASP(ACTIVE SERVER PAGES),PHP,SERVLET,等越来越常用，他们使网站的网页制作更加灵活的作用也正在变得越来越重要。如果你不熟悉ASP,可能很想知道ASP究竟是怎么做到这一点的吧? 自互联网出现以后，网页就一直对共享信息资源，交流意见，宣传推销产品等等起着重要的作用。但随着互联网的超高速发展，只是提供有限静态信息资源的网站很快就过时了。一个网站的大量HTML静

6、态网页使得对他们在同一个基本模式下的更新显得异常困难。 为了解决这个难题，各种动态网页制作技术纷纷出笼，而它们的目的是一致的：使网页的制作更加灵活，更加容易。而这些技术中主要有以下几个：PHP,CGI,ASP等。每一项技术都有自己的优缺点，作为想要成为一个称职的网页程序开发人员，自然是对它们掌握得越多越好。而在WINDOWS NT 和 WINDOWS 2000 下的WEBSERVER(IIS)在缺省的配置下本身就可以运行ASP程序。ASP到底能做什么？事实是，一旦自己熟练掌握了它，那么它就能做任何你能想到的东西。ASP能从HTML表单中收集用户资料，能与数据库连接（当然包括从数据库中读出和写入

7、数据），甚至能用来接收和发送E-MAIL。ASP只是一种技术，所以它不限制程序员用何种语言来描述程序员自己的脚本，其中较常用的是VBScript和JavaScript。ASP中有很多内置的对象：Request对象、Response对象、Server对象、Session对象、Application对象和ADO对象。在这里面还包含了Cookie技术。再有，ASP之所以能受到大家的重视与使用的原因，主要在于所产生的执行结果都是标准的HTML格式，而且这些程序是在网络服务端中执行，使用一般的浏览器（如IE 或Netscape）就可以正确地获得ASP的“执行”结果，并且将这ASP执行的结果直接在浏览器中

8、“浏览”。再有，ASP易于操控数据库。它可以轻易地通过ODBC(Open Database Connectivity)驱动程序连接各种不同的数据库，例如：Acess、Foxpro、dBase、Oracle等等，另外，ASP亦可将“文本文件”或是”Excel” 文件当成数据库用。因为篇幅的原因，我在这里也就不一一详谈了。了解了上面这些基础知识，我们再回过头来转入正题，这些知识对于清楚下面的系统实现就容易多了。第二章 网站总体分析2.1网站系统分析根据前面的设计思想进行分析，按照系统开发的基本观点对网站进行分解，从内容上可对网站作如下划分：l 公司基本信息通过首页、关于我们、客户服务、联系我们等板

9、块来实现其功能要求，体现我公司的基本办事方针、政策、联系方法等。l 产品技术方面通过相关技术、产品介绍、相关下载、解决方案等板块来体现其产品种类、特点、技术方案等等。l 在人才上的需求通过人才招聘这个板块来具体实现招贤纳士的工作。2.2页面分析网站网页主要采用静、动相结合的方式，即静态的主画面和动态的图片相结合，体现公司的蒸蒸日上，除主页外，因为时间原因，其他页面基本上采用静态显示方式来展示公司的风采、产品的优点特色、信息发布，至于信息反馈页面，就得利用ASP与数据库结合的技术建立数据库管理系统，采用交互式的web画面来实现。2.3数据库分析采用的数据库是Microsoft Access ，拟

10、建立mydb.mdb库文件，在此库文件中我只需建立InfoFeedBack表文件，就可以满足此网站的需求。第三章 网站详细设计与功能实现3.1首页的设计与实现3.1.1功能首页是客户登陆某公司网站与其进行交流的第一界面，他是浏览者对这个公司及产品感兴趣与否的第一印象体现者，此页面在设计过程中基本实现了这一功能界面清晰、友好、大方，能够让客户清楚的了解公司的网站分布、各种产品及热点产品，让人有一目了然的感觉，不会说登陆某些网站让人不知道自己所要找的即关心的内容到底在哪里，产生迷路的感觉。3.1.2版面划分首先利用dreamweaver建立一个html页，然后，根据网站总体规划分析，首页整个页面上

11、部分是公司名称及图片、相关链接项目，左边是公司（或者市场）现在的热门产品，随时供客户浏览、右中是企业新闻和行业动态、右下是公司的产品简介、页面最下方是公司的一些基本信息及相关行业的图标链接。这就是整个首页的详细分布图。设计好页面分布，下面我们要介绍一下设计过程。3.1.3界面设计与重点、难点代码的介绍首页在设计上基本上采用了在空白页面插入表格，即上、左、右均是插入相应的表格来把内容填充进去，然后再根据页面的美观进行相应的调整，这样经过反复预览调整，就可以把页面设计的美观大方。下面我将附上此页的图片素材及最后设计完成的整个页面视图，如果大家想尝试一下做一个和我这个一样的网页，可以打开我的网站找到

12、index.htm查看源程序，只要把这些程序粘贴到新的html页面，将会出现和我设计的首页一样的效果。这幅图是贯穿整个网站的代表性图片，在每个网页都可以看到它的存在，是公司形象的象征。在网站设计制作过程中，始终位于网页的正上方，制作之前只需插入表格然后在表格中插入图片，再根据网页的布局调整其大小。这就完成了主页制作的第一步。在此图片的下方，增加一行文字，也就是网站的二级页面，点击这些文字进入下一级页面，如下图所示：下面这幅图片也是贯穿整个网站的热门产品，几乎每个网页的左边都涉及到了这部分，在网站制作过程中，先在左边插入四行表格，然后在第一行插入，在第二行插入图片，当然插入这些图片后都要根据这个

13、网页布局调整大小，然后在第三行写入“新型流动警察”，上面这些做好以后，在最后一行写入新型流动警察的简单介绍，同时设置背景色，在写字时要注意字体、字号的设置，已达到整个页面的风格统一。在此页面中，界面设计的重点就是“弹出窗口企业新闻”。下面来详细介绍一下。弹出窗口的实现： 其中cgal_security_block文件下的程序也是实现弹出窗口重要的程序!-document.write() /-请看效果图：在弹出窗口显示方向是由下向上浮动显示，显示范围只是在这个框框内，如果你对某条新闻感兴趣，可以将鼠标置于其上，免得新闻还未看完就浮动到下一条新闻了，如果新闻内容有下一级链接，可以点击进入下一级页面

14、，查看详细新闻内容。这就是弹出窗口的主要编码、效果图及说明，使用者只要在相应的位置加入你要显示的内容就可以实现弹出显示。这就是主页中比较重要的部分。还有在首页添加了时间轴，时间轴在这里就先不介绍了，我会在本论文第3.5节具体介绍一下时间轴的一些知识。弹出窗口设计好以后，页面最右边再次插入表格然后插入文字图片，这就完成了“行业动态”部分的制作，如下图所示：到现在为止，主页中上半部分就已经基本完成了，现在需要制作产品介绍部分了，首先插入表格，根据内容决定行与列，然后写入相应的内容（图片及文字），调整行高与列宽，调整完毕如下图显示：现在，主页的上部分已经完成，掌握了上面的设计方法，下面的设计也就很容

15、易实现了，也是插入表格，然后再插入图片文字，调整好各自的位置大小，就可以了，请看效果图：在这部分的制作过程中，只要注意在最下方添加背景色就可以了，其他的都是简单的插入表格，然后在表格中插入图片、内容，预览调整，直到达到感官上的满意为止。各个部分制作完成之后，就可以欣赏整个页面的效果了，如下图所示：3.2模板页的设计与实现3.2.1功能在整个站点中建立一个或几个固定的模板，然后这个模型可以在其他页面设计中反复调用先前所设计保存的模板，以提高工作效率及达到页面风格的统一。3.2.2版面划分在模板页的设计过程中，分析网站建设的要求，在此共建立了cpjs、gywm、khfw、jjfa、xgjs五个模板

16、，并且每个模板根据页面布局的考虑，都尽量设计的复合整个网站要求，达到页面风格统一的效果。在版面划分上也是与主页设计相仿。3.2.3界面设计与重点、难点代码的介绍在这个站点中，我设计了五个模板，每个模板都会被相应的文件夹中的一般页面套用，在这里我只重点介绍一下khfw.dwt的整体视图及制作此模板的程序。在下图所示中，其整个页面都是一个模板，也就是说其他页可以套用下页的所有部分，套用此模板页后，只在中间部分可以自由添加内容，并且在其他页的制作过程中，模板部分是不可以更改的，只有在模板也才可以更改模板页的内容，并且只要模板页的内容改变，所有套用此模板的页面都会更新，请大家注意模板页的此项功能。这就

17、是模板页的效果图，下面这些是制作此页的程序，如果习惯编程的人只需编写程序就可实现上面模板的效果，这就看个人喜好问题了。一点一点插入图片，输入文字和直接编程最终实现的内容与功能是一致的，所以这没有哪种方法好，哪种方法不好的区别，只看个人使用习惯。请看下面程序：   首页 | 关于我们 | 相关技术 | 产品介绍 | 相关下载 | 解决方案 |客户服务 | 联系我们 | 人才招聘   服务承诺 各地办事处 信息反馈   新型流动警察 新型流动警察（又称：傻瓜式）是我公司根据交通巡逻警察的职责和任务，同时结合新近颁布实施的“中华人民共和国道路交通安全法”， 研制出的新一

18、代的“流动警察”产品。   a href= Copyright:清青智能产品有限责任公司版权所有 TEL：010-64xxxxxxFAX：010-64xxxxxxEmail:yqyanqing 上面就是这个模板的全部程序，其他模板页的设计及实现与khfw.dwt大同小异，请大家仔细看一下我的网站。3.3一般页面的设计与实现3.3.1功能每个页面都有自己的作用，实现自己功能，或者介绍了我公司生产的产品或者介绍我公司的一些相关信息，当然这都是为了更好的实现客户与我公司的网上交流，让客户更好的了解我们的公司、了解我们的产品。3.3.2版面划分在版面上，基本上是没有什么需要重点说明的，因为，

19、大部分页面都是套用了上面所设计的五个模板的，所以只要在右半部分增加了详细的介绍，就可以了。3.3.3界面设计与重点、难点代码的介绍在模板介绍中，我只是挑选了khfw这一模板作介绍，所以在一般页面的设计中，我也是代表性的介绍一下khfw中的qyjl.htm的实现。请看套用模板外的设计程序： xx办事处     电话：   地址：   邮编： xx办事处     电话：   地址：   邮编： 这样就完成了此页的制作。大家看到了，如果先制作了模板，就会为以后做网页节省很多时间、精力，避免了重复作业，所以说熟练地掌握制作

20、模板的方法是非常重要的，在这些页面的设计过程中，有的页面没有套用模板，但是设计的一般规律道理是一样的，在此我只是选择代表性的介绍一下，其他的实现程序就请大家看我的网站吧。3.4数据库的连接3.4.1功能在数据库的写入过程中，包含了很多的步骤程序，当每个客户（浏览者）想要留下自己的感受或者疑虑时，就可以填写网站上的信息反馈卡，一旦它满足提交要求，填写的信息就会自动提交到数据库，每天管理员都会及时登陆数据库管理系统，察看信息反馈记录，这样管理员就可以及时与客户取得联系，答复他们的问题。3.4.2界面设计与重点、难点代码的介绍在InfoFeedBack.htm页面，程序显示需要调用InfoFeedB

21、ack.asp中的程序代码，InfoFeedBack.asp代码如下所示：%dim a_strToppings(10)dim intTopplingCountdim intLoopa_strToppings(1) = 快速路智能协管系统a_strToppings(2) = 新型流动警察 a_strToppings(3) = 事故预警系统a_strToppings(4) = 微波扩频通信系统a_strToppings(5) = 卡口测控系统a_strToppings(6) = 事故紧急处理系统a_strToppings(7) = 城区道路违章抓拍系统a_strToppings(8) = spee

22、d雷达a_strToppings(9) = 苏式-雷达 a_strToppings(10) = 多道radar雷达传感器 strName = replace(Request.Form(txtName), ) 姓名strCompany = replace(Request.Form(txtCompany), ) 单位strContact = Replace(Request.Form(txtContact), ) 联系方式Answer1 = Request.Form(radiobutton) 了解公司方式Mind = Replace(Request.Form(mind),) 意见和建议nowdate

23、 = FormatDateTime(now,2)conndb.openif strName= then response.Write(请输入您的姓名,谢谢!) response.End()end ifif strCompany= then response.Write(请输入您的工作单位,谢谢!) response.End()end ifif strContact= then response.Write(请输入您的联系电话,谢谢!) response.End()end ifsqlRepeace = _ select * from InfoFeedBack where name=&strNam

24、e& and feedbackdate=#&nowdate&#set rs1 = Server.CreateObject(adodb.recordset)rs1.open sqlRepeace,conndb,1,1if not rs1.eof then response.Write(您不能重复提交!) response.End()end ifif Request.Form(checkbox1) = and Request.Form(checkbox2) = and Request.Form(checkbox3) = _ and Request.Form(checkbox4) = and Req

25、uest.Form(checkbox5) = and Request.Form(checkbox6) = _ and Request.Form(checkbox7) = and Request.Form(checkbox8) = and Request.Form(checkbox9) = _ and Request.Form(checkbox10) = and Request.Form(checkbox11) = and Request.Form(checkbox12) = _ and Request.Form(checkbox13) = then Response.Write(您没有填写完全

26、,请返回继续填写,谢谢!) response.End()end ifResponse.Write( & strName & & 您好! & )Response.Write(strCompany & )Response.Write(strContact & )Response.Write(以下是您回答的结果:)Response.Write(1、您是从哪里了解到清青公司的？)Response.Write(Answer1) & Response.Write(2、您对我们公司的哪几类产品比较感兴趣？)for intLoop = 1 to 10 if Request.Form(checkbox & in

27、tLoop) = Y then int intTopplingCount = intTopplingCount + 1 strSelect = a_strToppings(intLoop) strInsertFeedBack = insert into InfoFeedBack(name,company,contact,KnownMe,InterestProduct,mind,feedbackdate) _ & values( _ & &strName&,&strCompany&,&strContact&,&Answer1&,&strSelect&,&Mind&, _ & &nowdate&)

28、 rs = conndb.execute(strInsertFeedBack) response.Write(strSelect & ) end ifnextResponse.Write(3.您对我们的公司和产品还有什么意见或建议)Response.Write(mind & )Response.Write(提交完毕！感谢您的参与，我们将尽快给您答复，谢谢！)conndb.close%其中在此程序前面，又使用了conndb.asp这个文件，程序如下：其中，需要说明的是，如果您没有把带“*”的填写完全，系统将提示您“请输入您的xxxx,谢谢”，这就避免了因为用户信息填写不完整而造成的联系上的延误问

29、题。这样基本上就完成了由网页提交到数据库的工作，客户所填写的信息就会自动保存到数据库，同时也将显示填写者的回答结果。数据库的工作已基本完成。如果是网站的设计者，还可以清楚地看到另外两个网页文件，即FeedBackList1.asp和FeedBackList2.asp，这两个文件可以显示数据库中部分主要内容，点击FeedBackList1.asp中姓名可以显示详细的填写者的详细信息，即显示FeedBackList2.asp页面，具体的实现方法在此就不再一一介绍了，请老师在我交上的网站文件中看其制作的方法及产生的效果。3.5时间轴及制作3.5.1时间轴定义时间轴：通过随时间的变化改变层的位置、大小、可见性和叠放顺序来创建动画。这就是动态HTML的表达方式，也是Dreamweaver强于其它网页编辑器的地方。时间轴只能移动层，因此想让图象或文本对象移动，就须先创建层，然后在层中插入对象。 3.5.2时间轴的介绍时间轴描述了层和图像的属性随时间变化的情况。选择WindowTimelines（窗口时间轴）打开时间轴控制器，如图1所示。图1 时间轴控制器 在时间轴控制器中：播放头（Playback head） 指示在网页中显示的是哪一帧。动画通道（Animation channels）显示动画层的地方。动画条（Animation