1 / 22

“ 极品飞车”动态网站系统设计 作者： 赵凯

“ 极品飞车”动态网站系统设计 作者： 赵凯. 摘要 : 本次毕业设计的主要内容是利用 DREAMWEAVER+ASP （ JAVASCRIPT 、 VBSCRIPT 、 HTML ） +SQL SERVER 2000 ，开发过程中运用了页面模块化、构件化及信息发布的动态生成、静态页面显示等技术综合开发。本论文重点介绍了动态网站前台和后台管理系统界面的登录、系统各模块网上功能实现的设计思想和关键技术。 关键词： 动态网站；数据库；功能模块 引言

cynthia-woodward
Download Presentation

“ 极品飞车”动态网站系统设计 作者： 赵凯

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. “极品飞车”动态网站系统设计作者： 赵凯 • 摘要: • 本次毕业设计的主要内容是利用DREAMWEAVER+ASP（JAVASCRIPT、VBSCRIPT、HTML）+SQL SERVER 2000，开发过程中运用了页面模块化、构件化及信息发布的动态生成、静态页面显示等技术综合开发。本论文重点介绍了动态网站前台和后台管理系统界面的登录、系统各模块网上功能实现的设计思想和关键技术。关键词： 动态网站；数据库；功能模块 • 引言 • 随着Interne的发展，网络技术日新月异，发展迅速。传统的静态网站只能供访问者被动地浏览网站建设者提供的网页内容，已经不能很好地满足人们的需求，更新非常不方便。而动态网站综合利用静态网页、中间件、数据库技术，能够实现网站与用户之间的交互操作，并且可以根据用户的不同要求，为用户提供不同的信息，使访问者与网站之间能够进行信息交流。通过下面的设计和分析，来实现动态的网站，更好的满足人们多网站的更新和管理。

  2. 一、 开发环境 • 利用ASP作为技术环境，在Windows XP下设置IIS 5.1服务器，用VBScript脚本语言进行编写，采用Dreamweaver MX、Flash和Photoshop CS设计输入输出界面，完成系统的开发。 • 1、Active server pags (动态服务器主页，简称ASP)，内含于Internet Information Server(IIS)当中，提供一个服务器端(server-side)的scripting环境，让你产生和执行动态，交互式，高效率的站点服务器的应用程序。 • 你不必担心浏览器是否能执行你设计出来的Active Server Pages,你的站点服务器会自动将Active Server Pages 的程序码，解释为标准HTML格式的主页内容，在送到用户端的浏览器上显示出来。用户端只要使用常规可执行HTML码的浏览器，即可浏览Active Server Pages所设计的主页内容。 • 2、Dreamweaver是Macromedia公司推出的S网页制作产品，它是一个用于可视化设计与管理网页和网 站的管理工具，支持最新Web技术，包含可视网页设计化、图像编辑、全局查找替换、处理Flash等媒体格式和动态HTML。它与Macromedia公司的Flash、Firework、及ShockwaveFreehand配合使用， 功能更为强大，是目前专业人士首选的网页制作工具。Dreamweaver、Flash和Fireworks被称为“ 网页三剑客”或“网页制作梦幻组合”。

  3. 3、Flash 最早期的版本称为Future Splash Animator，当时Future Splash Animator最大的两个用户是微软（Microsoft）和迪斯尼（Disney）。1996年11月，Future Splash Animator卖给了MM（Macromedia.com），同时改名为Flash1.0 。这里不得不提到的人物是乔纳森•盖伊(Jonathan Gay)，是他和他的六人小组首先创造了Future Splash Animator，也就是现在Flash的真正前身了。 • Macromedia 公司在1997年6月推出了Flash 2.0 ，1998年5月推出了Flash3.0。但是这些早期版本的Flash所使用的都是Shockwave 播放器。自 Flash 进入4.0 版以后，原来所使用的 Shockwave 播放器便仅供 Director 使用。Flash 4.0开始有了自己专用的播放器，称为“Flash Player”，但是为了保持向下相容性，Flash仍然沿用了原有的扩展名：.SWF（Shockwave Flash）。 • 4、Photoshop是由Adobe公司开发的图形图像软件，是功能强大，使用范围广泛的图像处理和编辑 软件，是世界标准的图像编辑解决方案。Photoshop因其工作界面、强大的功能、灵活的可扩充性，已成为专业美工人员、广告设计者、平面设计者、广大计算机爱好者、网页制作等必备的软件，是专业图像创作的首选。

  4. 二、设计内容 • 1、首页设计

  5. 1.1首页的图都是使用Photo制作的

  6. 1.2首页的横副动画是使用Flash制作，主要使用遮罩层的作用来实现亮光的效果1.2首页的横副动画是使用Flash制作，主要使用遮罩层的作用来实现亮光的效果 • 1.3插入flash动画，在dreamever中的“insert flash”来插入，插入后显示的代码如下 • <td colspan="10"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="800" height="250" hspace="0" vspace="0" align="middle"> • <param name="movie" value="img/极品飞车.swf"> • <param name="quality" value="high"> • <embed src="img/极品飞车.swf" width="800" height="250" hspace="0" vspace="0" align="middle" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed> • </object></td>

  7. 2、数据库（Access数据库） • 2.1数据库名news.mdb——article, classphoto,photo,user • ewebeditor.mdb——eWebEditor_Style, eWebEditor_Button, eWebEditor_System,eWebEditor_ToolBar • 2.2表_user 管理员 • 2.3表_article 后台媒体信息

  8. 2.4表_photo 后台图片 • 2.5表_ eWebEditor_Style 在线编辑器 • 3、功能代码模块 • 3.1前台数据库连接(conn.asp) • <% • Set conn = Server.CreateObject("ADODB.Connection") • conn.Open "driver={Microsoft Access Driver (*.mdb)};dbq=" & Server.MapPath("../databases/news.mdb") • Set rs = Server.CreateObject("ADODB.Recordset") • lStrSQL = "SELECT * FROM article;" • rs.Open lStrSQL,conn,1,1%>

  9. 3.2前台文章列表嵌入显示 • <iframe • frameborder=0 marginheight=0 marginwidth=0 name=left0 scrolling=no src="gonggao.asp?type=阅读内容 &tw=424&th=200&tn=7&zs=26&fl=1&hj=26" width="424" height="200"> • </iframe>

  10. 3.3图片嵌入前台幻灯显示 • <iframe • frameborder=0 marginheight=0 marginwidth=0 name=left0 scrolling=no src="gonggao_photo.asp?type=图片新闻&tw=250&th=320" width="236" height="320"></iframe>

  11. 3.4后台数据库连接(conn.asp) • <% • Set conn = Server.CreateObject("ADODB.Connection") • conn.Open "driver={Microsoft Access Driver (*.mdb)};dbq=" & Server.MapPath("../../databases/news.mdb") • Set rs = Server.CreateObject("ADODB.Recordset") • lStrSQL = "SELECT * FROM article order by date desc;" • rs.Open lStrSQL,conn,1,1%>

  12. 3.5在线编辑器中添加文章，添加new.asp页面中文章内容里嵌入在线编辑器3.5在线编辑器中添加文章，添加new.asp页面中文章内容里嵌入在线编辑器 • <textarea name="txt"style="display:none"><%=Server.HTMLEncode(html)%></textarea> • <iframe id="eWebEditor1" src="../admin/eWebEditor/ewebeditor.asp?id=txt&style=s_blue" frameborder="0" scrolling="no" width="550" height="350"></iframe> • 3.6实现在线编辑器程序来确定数据库名称：ewebeditor.mdb，其存放路径。路径在Startup.asp文件里的过程Sub DBConnBegin()中 • oConn.Open "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" & Server.MapPath("../../../databases/ewebeditor.mdb")

  13. 3.7编辑文章（modify.asp） • <% dim id,suser,sphoto,stxt • id=request.querystring("id") • set rs=server.createobject("adodb.recordset") • lStrSQL = "SELECT * FROM article where id="&id&";" • rs.Open lStrSQL, conn,1,1 %> • 3.8编辑文章确认（modify_sure.asp）删除文章（delete.asp）

  14. 3.9添加图片管理(AdPaddphoto.asp) • <form name="form1" method="post" action="SAdPphoto.asp" enctype="multipart/form-data" onSubmit="return Juge(this)"> • <table width="98%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#FCF3E4" class="font"> • <tr > <td height="30" colspan="2" align="center"><div align="left">当前位置-&gt;<%=request.cookies("WAdtype")%>-&gt;添加图片</div></td></tr><tr> • <td height="30" colspan="2" ><div align="center"><font color="#CC3333">注:文章配图项可以不填写,如果您要填写请注意图片格式</font></div></td></tr> • <tr> <td width="80" height="22" > <div align="left">*图片标题:</div></td> • <td width="82%" > <input name="title" type=text class="unnamed2" id="title" style="width:300px" ></td></tr> • <tr> <td height="22" align="right" ><div align="left">*图片分类:</div></td><td colspan="2" > • <select name="type"> • <option value="图片新闻">图片新闻</option></select></td></tr> • <tr><td height="22" > • <div align="left">*上传图片:</div></td> • <td><input name="file1" type="file" class="unnamed2" id="file14" style="width:130px"> • 可选填,图片格式:(gif/jpg/jpeg/bmp)</td></tr> • <tr ><td height="93" colspan="2" align="center"> • <input name="submit" type="submit" class="unnamed2" style="width:40px" value="确认"> • <input name="reset" type="reset" class="unnamed2" style="width:40px" value="重置"></td></tr> </table></form></td></tr>

  15. 3.10添加图片管理的页面(AdPaddphoto.asp)

  16. 3.11添加图片管理的确认（SAdPphoto.asp） • <%Server.ScriptTimeout=999%><!--#include file="conn.asp"--><!--#include file="UpLoadClass.asp"--><% function HTMLEncode(fString) • fString=trim(fString)fString = Replace(fString, CHR(13), "")fString = Replace(fString, CHR(10), "<BR>") • HTMLEncode = fStringend function • Set myrequest=new UpLoadClassmyrequest.MaxSize = 20000*1024myrequest.FileType = "gif/jpg/jpeg/bmp"myrequest.Savepath = "../img/photo/" • myrequest.open file1=myrequest.Form("file1") • title=replace(replace(myrequest.Form("title"),"<","["),">","]") • user=replace(replace(myrequest.Form("user"),"<","["),">","]") • type1=replace(replace(myrequest.Form("type"),"<","["),">","]") • txt=HTMLEncode(myrequest.Form("txt")) Set myrequest=nothing set rs=server.createobject("adodb.recordset") lStrSQL = "SELECT * FROM photo;" • rs.Open lStrSQL,conn,1,3 rs.addnew rs("AdNtitle")=title rs("AdNuser")=user rs("AdNtype")=type1 rs("AdNphoto")=file1 • rs("AdNtxt")=txt rs("AdNtime")=now() rs.update rs.close set rs=nothing%>

  17. 3.12编辑图片管理（AdPmodifyphoto.asp） • <p><%dim id,suser,sphoto,stxt • id=request.querystring("id") • set rs=server.createobject("adodb.recordset") • lStrSQL = "SELECT * FROM photo where AdNid="&id&";" • rs.Open lStrSQL, conn,1,1%></p>

  18. 3.13编辑图片管理的确认（SAdPmodifyphoto.asp） • <!--#include file="conn.asp"--> • <!--#include file="UpLoadClass.asp"--> • <% function HTMLEncode(fString) • fString=trim(fString)fString = Replace(fString, CHR(13), "") • fString = Replace(fString, CHR(10), "<BR>") • HTMLEncode = fString end function Set myrequest=new UpLoadClass • myrequest.MaxSize = 20000*1024 • myrequest.FileType = "gif/jpg/jpeg/bmp" • myrequest.Savepath = "../img/photo/“ myrequest.open • file1=myrequest.Form("file1") • id=replace(replace(myrequest.Form("id"),"<","["),">","]") • title=replace(replace(myrequest.Form("title"),"<","["),">","]") • user=replace(replace(myrequest.Form("user"),"<","["),">","]") • type1=replace(replace(myrequest.Form("type"),"<","["),">","]") • txt=HTMLEncode(myrequest.Form("txt")) • Set myrequest=nothing • set rs=server.createobject("adodb.recordset") • lStrSQL = "SELECT * FROM photo where AdNid="&id&";" • rs.Open lStrSQL,conn,1,3 • 3.14删除图片（AdPdelphoto.asp）

  19. 三、设计测试 • 将ASP网站页面设计制作完成并加入相应的代码之后，接下来就是进行运行调试，本网站全为ASP文件，需放到IIS服务器上运行。经过运行、调试、修改、再运行，网站终于能正常运行，实现所需功能。其运行部分结果如下截图所示： • 1、管理员登入后台界面

  20. 2、文章列表和图片管理 • 3、添加文章

  21. 4、图片添加 • 5、图片管理模块

  22. 四、设计结论 • 对本次网站的构思和设计，对制作、编码到运行调试，都经过无数次的测试。最终网站能够顺利运行，并达到预期目标：前台页面能自动从数据库中取出内容并在相应位置展示给用户；登陆后台页面文章管理部分能顺利添加文章、添加图片和上传图片，并完成相应的修改与删除操作；图片管理部分能顺利添加、编辑与删除图片；用户管理部分亦能达到添加、修改和删除管理员的功能。这次设计不仅认识了动态网站，还接触了Flash和Photoshop，对图片进行制作和修改，从而改善网页的整体美观。

More Related