asp课程设计新闻发布系统

《asp课程设计新闻发布系统》由会员分享，可在线阅读，更多相关《asp课程设计新闻发布系统（56页珍藏版）》请在装配图网上搜索。

1、贵州航天职业技术学院课题名称：计算机科学系ASP程序设计课程设计报告新闻发布系统姓 名: 学 号: 专业班级： 系（院）: 指导老师： 设计时间： 设计地点：伴随着网络的出现，网页逐渐融入人们的生活。快速及时的新闻浏览，五彩缤纷的网上 信息，使网络与人们的生活息息相关。它打破了地域限制，真正使信息得以共享，改变了人们的工作和生活方式。网站新闻发布系统，是将网站上需要经常变动的信息，类似公司动态、企业新闻、新产品发布、促销活动和行业动态等更新信息集中管理，并通过信息的某些共性进行分类，最后系统化、标准化发布到网站上的一种网站应用程序。本系统采用ASP作为开发环境，ACCESSOOO作为数据库服务

2、器，IIS作为测试服务器， 实现了对新闻类别无限级分类设置、 动态新闻的发布修改删除， 前台页面的模板自定义和生 成，以及后台管理员权限和数据库的备份收缩等一系列的功能，完成了一个动态新闻发布系统的所有功能。系统捕获了绝大多数的异常情况，具有较好的容错性。【关键词】 ASP ACCESS IIS、新闻发布、信息管理、模板55摘 要1目录2.0弓I言3.1新闻发布系统简介4.1.1新闻发布系统4.1.2新闻发布系统的特点4.1.3新闻发布系统的分类4.2 系统分析5.2.1需求分析5.2.2 可行性分析 5.3总体设计6.3.1项目规划6.3.2系统模块以及功能结构图.6.4系统设计7.4.1

3、逻辑结构设计 7.5网站总体架构8.5.1模块功能介绍.8.5.2网站首页的运行结果8.6系统部分重要功能及其代码96.1导航区9.6.2用户登录注册修改 .1.16.3首页主体内容区1.86.4友情链接区266.5总体框架266.6新闻发表35总 结39附录A参考文献42附录B数据表390引言随着中国加入 WTO及全球经济一体化进程的加快，世界经济已由工业化经济逐步进入网络信息化时代。在信息时代来临之季，各企业都紧跟时代的脚步，转变着企业的经营模式、 管理模式，从传统的人工管理体制，向信息自动化管理体制过渡。与此同时，企业的传统式的办公管理模式也在逐步向自动化办公管理模式转变。网络自动化办公

4、系统就是在这样的大背景下应运而生的。信息时代的到来让人们尝到了“信息爆炸”的滋味，信息的大量拥入让企业在信息处理方便应接不暇，传统的办公模式、对信息的处理方法，早已不能满足企业对信息快速、准确的处理的要求。一个企业对信息数据的掌握程度、处理能力，体现了一个企业对市场的敏感程度，数据的真实性、准确性直接决定着企业的发展方向。从传统的办公模式向自动化办公管理模式转变，提高企业的信息处理能力，以增强企业的市场竞争力，成了企业发展过程中的首要问题伴随着网络的出现，网页逐渐融入人们的生活。快速及时的新闻浏览，五彩缤纷的网上 信息，使网络与人们的生活息息相关，于是世界上又出现了第三媒体In ternet

5、。它打破了地域限制，真正使信息得以共享，改变了人们的工作和生活方式。制作网页是企业和个人 的宣传自己的重要手段，同时也是学习者获取学习信息的重要手段。尤其是在教育领域， 在素质教育与终身教育成为必然的今天，人们对信息的需求有了更新，更高的要求，而网页由于本身所具有的信息量大，传递快速，没有时空限制等特点恰好满足这种要求。所以网页也逐渐成为一种新兴的教育资源。也正是由于网络实现网站的数据信息能够进行实时交互，保证网站数据的实时性。随着In ternet的进一步发展，静态Web站点的开发与维护变得越来越困难，一方面信息的不断增加和变化,使站点维护人员不得不经常修改他们的网页，特别是基于数据库驱动的

6、Web站点更是如此，随着In ternet 上信息量的增多和交互性的加强使HTML显得越来越难以胜任。另一方面静态网页由于不能与浏览者进行有效交互，使人们感到越来越乏味，而不愿意再一次地进入同一站点。 所以开发动态网页或动态内容成了越来越多的站点所追求目标。所谓动态内容是由每一个用户按照自己的需求发出请求而特殊制作的Web网页。网络发展前景无限， 及早与网络结合，与信息时代同步，与高科技汇合，定会给社会各行各业的发展注入新鲜的活力。站在网络时代的前夜，我们清晰地听到了网络时代的宣言： 谁掌握了网络，谁就掌握了未来。1新闻发布系统简介1.1新闻发布系统新闻发布系统(News Release Sy

7、stem or Con te nt Man ageme nt System)又叫做内容管理系统，是一个基于新闻和内容管理的全站管理系统，新闻发布系统是基于B/S模式的WEBMIS系统，本系统可以将杂乱无章的信息(包括文字、图片和影音)经过组织，合理有 序地呈现在大家面前。当今社会是一个信息化的社会，新闻作为信息的一部分有着信息量大，类别繁多，形式多样的特点，新闻发布系统的概念就此提出。新闻发布系统的提出使电视不再是唯一的新闻媒体，从此以后网络也充当了一个重要的新闻媒介的功能。简单地说，新闻发布系统就是充当一个网络新闻媒介的功能，主要实现对新闻的分类、上传、审核、发布， 模拟了一般新闻媒介的新闻

8、发布的过程，通过不同权限的账号分别实现以上所说功能，当然这些功能也可以是某一个账号全部具有。1.2新闻发布系统的特点与一般的信息系统相比较，新闻发布系统具有以下特征：1. 是基于B/S模式下的 WEB信息系统，数据库逻辑相对简单，但数据量一般比较庞大;2. 用户数量大，服务器压力大，是系统设计中必须考虑的问题之一，而一般的信息系统相 对压力要少了很多；3. 是一个开放式的系统，前台浏览无须验证。1.3新闻发布系统的分类1. 前台动态显示的新闻发布系统其主要特点是前台采用编程语言动态读取数据库的内容，随时更新，该类系统设计 简单，适合大多数中小企业建站需要，通用性不强，一般需要量身定做，不适合大

9、型新 闻站点，当用户过多时，编程语言动态读取数据库就势必消耗大量的服务器资源，造成 系统运行缓慢，甚至崩溃，同时由于前台新闻是动态从数据库中读取，导致前端用户直 接接触到数据库，很容易造成一些不安全的因素，例如：SQL Injection。2. 前台静态显示的新闻发布系统其主要特点为：前台新闻全部生成HTML静态文件，前台无须读取数据库，浏览器只需要直接下载HTML文件即可浏览新闻，浏览速度得到提高，同时也大大减轻了数据 库服务器的压力，该系统后台设计复杂需要处理复杂的模板标签和个模板之间的逻辑， 一般采用三层模式实现，该类系统灵活性大，可以通过模板自定义实现界面复杂的前台 页面，一般不需要为

10、某一个企业而定做，该系统具有良好的通用性，适合各类新闻站点， 同时，系统把前端用户和数据库分割开来，系统的安全性得到大大的提高。3. 基于文本的新闻发布系统该系统在市场上占有很少的一部分，主要是把前面的数据库换成了TXT格式的文本文件，该系统主要缺点是文本文件是无序的，管理起来非常麻烦，而且安全性不高，很 容易造成数据冗余，因此，目前还没有见到该类系统的商业版本，一般都作为个人用户 使用。4. 基于XML数据岛的新闻发布系统该系统是新闻发布系统的一个发展趋势，它用XML数据岛代替了数据库， XML是一个有序的数据文件， 比数据库的读取速度更快， 但操作起来没有数据库这么方便， 但是 由于开发技

11、术难度大，该类系统现在市场很少见到。2系统分析2.1需求分析通过调查，要求系统需要有以下功能：1. 将新闻、信息栏目和业界动态等信息集中起来发布、管理、查询等2. 网站的操作和控制可以由无 ASP基础的人员来操作！3. 无论企业网站管理人员身处何地，只要能够上网就能对网站信息进行更新及维护。4. 所有的操作可以通过浏览器完成，不需要掌握其他应用软件，用户不需培训。5. 管理系统用户，由于该系统的使用对象多，要求有较好的权限管理。一般用户可以注册 和发布新闻。6. 系统管理员为网站信息管理系统中的最高权限（即具备从后台输入、修改、删除新闻的权限），其他人员只能具备新闻查看权限7. 信息检索模块，

12、可按关键字、标题、作者、来源、发布时间。8. 数据计算自动完成，尽量减少人工干预。9. 系统退出。2.2可行性分析1，经济性网站新闻管理系统，又称为信息管理系统，广泛应用于大型专业网站、政府网站、企 业网站等几乎所有的网站上，是将新闻、信息栏目和业界动态等信息集中起来发布、管理、 查询等的一种网站应用程序通过网站对新闻信息进行快速，有效的全面的管理，大大提高了新闻的的快速发布。通过系统可对新闻的数据进行全面的管理和统计。2, 技术性无论企业网站管理人员身处何地，只要能够上网就能对网站信息进行更新及维护。 所有的操作可以通过浏览器完成，不需要掌握其他应用软件，用户不需培训。网络化的办公管理，使企

13、业管理更加规范，实现了通过网络对信息进行发布、传递、 接收等一系列功能。系统中设置的个人办公管理模块，为个人办公提供了一个更为方便的管理平台，大大提高个人办公的工作效率，进而提高整个企业的办公效率。3总体设计3.1项目规划办公自动化管理系统是一个典型的数据库开发应用程序， 块、用户管理模块组成，规划系统功能模块如下：由日常管理模块、业务管理模1.日常管理模块该模块包括收文管理模块、发文管理模块、批示管理模块、 理模块、个人办公管理模块、人事管理模块。会议管理模块、公共信息管2.业务管理模块该模块包括生产报表模块、采购计划模块、库存管理模块、指标情况模块。3.用户管理模块该模块主要包括用户发表新

14、闻。4.系统员管理模块该模块主要包括网站管理员管理用户和新闻。3.2系统模块以及功能结构图表3-2-1模块功能设计表模块详细功能描述新闻管理添加新闻：主要是用于发布新闻（包含新闻）编辑新闻：对已发布的新闻进行修改、删除等操作模板管理模板绑定：对主页、栏目、新闻浏览分别绑定模板，便于生成 模板管理：修改、删除 HTML莫板（已经绑定模板不能删除） 增加模板：增加新的模板系统数据新闻附件管理：对随新闻发布的附件进行有效的管理，删除无用的附件 新闻分类管理：对新闻的栏目进行增加发布、修改、删除，支持无限级分类根据系统需求分析，设计系统总体结构大致如下图所示:7満加箭闻登录方经权限刘断昔通浏贤者注册用

15、户浏览网站图3-2-2系统总体结构图工作流程为：打开该网站，普通浏览者能浏览、阅读和搜索新闻，能进行注册，注册后为新闻输入员， 登录进入新闻后台管理区，只有添加新闻的权限；如登录时为新闻管理员，其不但有添加新 闻的权限，还有审核和管理新闻的权限。在发布新闻的时候，用户必须要注册后才能进行发布新闻，否则你进入发布新闻页面则显示你还没有登录的提示画面，发布的新闻只要标题，分类，内容等方面，如果有写错，可以根 据点击重写按钮重新输入内容，等到全部写完无误后，就可以点击发表按钮发布了！你发布的新闻就在你所选择分类的那一类下面。管理新闻功能包括对任一条新闻内容可作相应修改，也可删除任何一条不再需要保留的

16、新闻。管理新闻分类包括对新闻分类名称作修改，也可将任一分类名删除，删除后其分类下的所有新闻也将被删除。添加用户时，用户等级可为管理员、或者输入员之一，管理用户包括修改用户名、密码和用户等级，也可将任一用户删除。4系统设计4.1逻辑结构设计本系统数据库采用Microsoft Access2003数据库，系统数据库名称为user.mdb。数据库user.mdb中包含9张表。数据库中的数据表请参见附录B。5网站总体架构5.1模块功能介绍系统主要包括以下功能模块：1. 主页浏览模块：主要用于新闻的发布。2. 新闻专栏模块：主要把新闻详细的分栏显示给用户，用户已好根据自己的意愿去访问他关心的新闻内容。3

17、. 后台管理模块：主要包括网站的全体的新闻发布，修改，和相关的网站管理。4. 用户管理模块：主要包括超级用户、普通用户两种登录情况。超级用户包括用户添加、用户修改（所有用户）、用户注销3部分；普通用户包括用户修改 （个人信息进行修改）、 用户注销2部分。5.2网站首页的运行结果首页：主要功能是显示最热门、最新和推荐的新闻，显示新闻搜索功能、页面风格设置、新闻分类、滚动新闻图片和网站公告等；如图 5-2-1所示:-河摊讥卫:昇* “半化=:Up 三武广高钛我毀入运营Hit畳平就耐白僅1A-直區:RJE.bgei*熬桓I图 5-2-1为了方便阅读将网站页面的各部分说明以列表形式给出，表5-2-2表

18、5-2-2网站首页解析区域名称说明对应文件1导航区用于显示网站的标识、标题top.asp2用户登陆和广告时 事区主要用于用户和系统管理员登陆，以及 广告 日常最新新闻的显示right.asp3主体内容区主要用于把最新新闻分栏的显示在 主页上面body.asp4友情链接版权说明区用于友情链接和相关链接区down.asp5总体框架主要实现把上面的模块应用在一个网页 上Index.asp6系统部分重要功能及其代码6.1导航区1. 导航区的运行结果图 6-1-12. 导航区网页分析区域名称说明对应文件1导航标签区用于显示网站的标识、标题，专栏top.asp2文章收索区主要用于用户对站内文章的收索top

19、.asp3用户登录区主要用于用户的登录Top.asp(denglu.asp)表 6-1-23.导航区网页代码.这里给出top.asp的主要代码下面是主要给出了框架代码，收索区代码。A,top.asp主要框架代码。a href=http:/user.qz on 设为首页 vfont size=-2 color=#FF0000加入收藏 vfont size=-2 color=#FF0000发表新闻 后台管理2下面是top.asp 主要收索区的代码vform method=post actio n=searchi ndex.asp n ame=form11 vselect n ame=zidua n

20、 opti on value=opti on value= opti on value= opti on value= 标题 标题v/option作者 作者v/option来源 来源v/option发布时间 发布时间v/option 6.2用户登录注册修改用户登录注册修改首页解析如表6-2-1区域名称说明对应文件1登陆界面用于用户的登陆right.asp2注册主界面用于用户的注册页面和导航的框架Zhucezhuceindex.asp3注册表单页面主要用于用户填写表单数据Zhucezhucebody.htm4注册信息处理页面用于注册信息的处理Zhucezhuce.htm3信息修改表单页面主要用于

21、用户填写修改表单的数据Zhucexiugai.asp4信息修改处理页面主要用于用户修改信息数据的处理Zhucezhuce1.asp系统登录模块主要用于验证用户登录系统时输入的用户名、密码、验证码是否正确，如果正确用户进入系统，否则将不能进入此系统。系统登录页面的设计效果；如图 6-2-2所示欢速光临扌呼制闻洌图6-2-2系统登录页面的设计效果 系统登录页面所采用的是动态显示功能！ 系统登录页面所涉及到的程序代码如下：den glubody.asp1,登录表单代码！%sessi on (userlabel)=O sessi on (user)=guest unm=request.Form(use

22、r) pwd=request.Form(pwd) if request.QueryStri ng(lb)=1 the nresp on se.Redirect i ndex.aspend ifif un m and pwd the n%sql=select * from user where用户名=&unm& and密码=&pwd&set user仁e nn. execute(sql)if not userl.eof the nsessi on (userlabel)=1sessi on (user)=unmsession(”name)=user1(真实姓名)resp on se.Redire

23、ct i ndex.aspelseresponse.Write 账号或密码错误 response.Write a href=index.asp返回 end ifelseresponse.Write 输入不能为空 response.Write a href=index.asp返回 end if%2,登录处理页面%sessi on (userlabel)=Osessi on (user)=guestunm=request.Form(user)pwd=request.Form(pwd)if request.QueryStri ng(lb)=1 the nresp on se.Redirect i n

24、dex.aspend ifif un m and pwd the n%sql=select * from user where用户名=&unm& and密码=&pwd&set user1=c nn. execute(sql)if not userl.eof the nsessi on (userlabel)=1sessi on (user)=unmsession(”name)=user1(真实姓名)resp on se.Redirect i ndex.aspelseresponse.Write 账号或密码错误 response.Write a href=index.asp返回 end ifel

25、seresponse.Write 输入不能为空 response.Write a href=index.asp返回 end if%3,管理员登录页面：admin.asp如图：6-2-3所示width=825&n bsp;返回首页 4，管理员登录页面处理：admindenglu.asp%sessi on (userlabel)=Osessi on (user)=guestunm=request.form(user)pwd=request.form(pwd)if unm and pwd then%sql=select * from admin where set user仁c nn. execut

26、e(sql) if not user1.eof the n用户=&unm& and 密码=&pwd&”sessi on (userlabel)=2sessi on (user)=unm sessi on (” name)=user1(真实姓名)response.Write 登陆成功 resp on se.Write resp on se.Write a href=./i ndex.asp else判别登陆的用户密码错误进入管理页面返回首页respo nse.Write 用户名或密码错误resp on se.Write resp on se.Write a href=./i ndex.asp返回

27、重新登陆返回首页end ifelseresponse.Write 输入不能为空 response.Write 返回 end if%5,系统注册页面的效果；如图 6-2-4所示用户注珊密码;*重毘密码，*昵称”*出生日期：*性别；男女來所在地址国寧：中国，省粉H 黃州 +个人爰好r图6-2-4系统注册页面运行效果用户注册页面是用于普通用户的注册, 以减轻网站管理员的发表新闻的负担。因为本新闻系统注册用户可以发布新闻,这样可所涉及到的程序代码如下：1.注册表单页面代码： zhuce/zhucebody.htm n ame=user* n ame=pwd1* 重n ame=pwd2* n ame=n

28、 iche nx/in put* 出n ame=she ngri* 性另U :用户注册用户:i nputi nputin putin put 男 inputtype=radio* 所在地址：国家：opti onvalue=省份： opti on value= opti on value= opti on value= opti on value= opti on value= opti on value= opti on value= opti on value= opti on value= opti on value= * 上海 贵州selected=selected 广东 广东 河北 河

29、北 山西 山西 陕西 陕西 安徽 安徽 福建 福建 江西 江西 个人爱好: n ame=aihaox/textarea验证码：img src=./image/.GIFvalue=男 name=xb value=女 女n ame=xb中国 ” selected=selected 中国北京 北京贵州 textarea rows=10 cols=60img src=./image/.GIFimg src=./image/.GIFimg src=./image/.GIF输 入 验 证 码*    2.注册数据处理页面代码：zhuce/zhuce.asp%f re

30、quest.Form(user)= or request.Form(pwd1)= orrequest.Form(” niche n)= or request.Form(she ngri)= the nresponse.write 输入不能 为空！ 返回 重新填 写!end ifif request.Form(user) and request.Form(pwd1) and request.Form(” ni che n)and request.Form(she ngri) the nset cnn=server.createobject(adodb.c onn ecti on)sqrc nn=

31、Dbq=&server.MapPath(./user.mdb)&;Driver=MicrosoftAccess Driver(*.mdb)cnn. ope n sqrc nndim gn, sqlsql=select * from user where 用户名=& trim(request.Form(user) &set gn=cnn. execute(sql)if gn. eof the nsql=i nsert into user(用户名，密码，昵称，出生日期，性别，所在地址，个人爱好)values(&request.Form(user)& ，”&request.Form(pwd1)& ，

32、”&request.Form(” niche n)& ，”&request.Form(she ngri)&，”&request.Form(xb )&，”&request.Form(dizhi)&-& request.Form(she ngfe n)& ”，”&request.Form(aihao) &)cnn. execute sqlresponse.Write 注册成功！a href=./index.asp点击返回首页 elserespon se.write 该用户名已经被注册！ 返回重新注册！end ifend if%4. 用户信息修改表单主要用于或得用户信息，然后方便用户更改相关信息，该

33、页面主要用至厅注册页面的代码，不同的就是多了个查询用户的相关信息操作。页面代码：zhucexiugai.asp 上面是查询得到的结果然后通过方式显示在表单里面，这样用户就可以根据以前的相关信息更改。5.用户信息修改处理页面代码：zhucexiugai1.asp说明：该页面最开始的想法是用更新的方法及recodeset方法完成，但不知道数据库的什么原因所以 就用把原来用户的记录删除掉，然后重新插入，主要SQL语句如下。set cnn=server.createobject(adodb.c onnection)sqrcnn=Dbq=& server.MapPath(./user.mdb)&;Dri

34、ver=MicrosoftAccess Driver(*.mdb)cnn. ope n sqrc nndim gn, sqlsql=select * from user where用户名=& trim(request.Form(user) &set gn=cnn. execute(sql)if gn. eof the nsql=i nsertinto user(用户名，密码，昵称，出生日期，性别，所在地址，个人爱好)values(&request.Form(user)& ，”&request.Form(pwd1)& ，”&request.Form(” niche n)&，”&request.F

35、orm(she ngri)&，”&request.Form(xb) & ，”&request.Form(dizhi)&-&request.Form(she ngfe n)& ，”&request.Form(aihao)&)cnn. execute sqlresponse.Write 注册成功！ a href=./index.asp点击返回首页elsesql=delete * from user where用户名=& trim(request.Form(user) &cnn. execute(sql)sql=i nsertinto user(用户名，密码，昵称，出生日期，性别，所在地址，个人爱好

36、)values(&request.Form(user)& ，”&request.Form(pwd1)& ，”&request.Form(” niche n)&，”&request.Form(she ngri)&，”&request.Form(xb) & ，”&request.Form(dizhi)&-&request.Form(she ngfe n)& ，”&request.Form(aihao)&)cnn. execute sqlresponse.Write 修改 成功！ a href=./index.asp点击返 回首页end ifend if%6.3首页主体内容区1.首页主体的运行结果如

37、图6-3-1僻站访问量：彌b JAM 血 MLUlt. 咿即片“比显 ：呼 | E.占 声 瞳怙JertMLmZ4 zj f HKJf + itt(n)J? d蛊盘VflJdt 崑说q黑 r 4*1 *c-i/Vm W/ift 计试嬲 *T皀H I 0 RM * K *mmuA n Jain 锤点l養慣的話闻客汕 日 A-. H 鬻 Tin kt 1tHP 即1 1 璋rflfi啊3卜立、 - VA. nJKWUUH?*t itiiM 科号曲卩鼻匕十的叫ZZMBUULHk.悚蠱曾議目址鬥傲恤-isnuriA*ni8sffin& 査 1 /! 4. T 贰,*|M比用fi立口 |歸-f mw b

38、4BWW觸羔ns】也Jf#hl- MLM it -2.主体网页分析区域说明对应文件2用于显示站内文章和用户的相关信息，还 有就是站内的最新文章及动画新闻。Bodyl.asp3站内的相关推荐新闻及网站说明Body2.asp4主要用于把站内所有的最新新闻例举岀 来Downl.aspDown 2.asp3. 每个网页的代码：该页面主要显示用户的统计信息和网站的最新动态。a.下面主要的统计用户的相关信息代码%dim sumpeoplesumpeople=0sql=select * from firstli nk where账户=&trim(session(user)& set rs=cnn. exec

39、ute(sql)游客访问统计if sessi on (user)=guest the nsessi on (guestlast)=sessi on (guestlast)+1end ifif not rs.eof the nlast=rs(访问次数)+1lastlP=rs(IP)lasttime=rs(上次访问时间”)elsesql=insertinto firstlink( 账户,IP,上次访问时间，访问次数)values(&sessio n(useL) &,”&request.servervariables(local_add门&,”&now()&,1)cnn. execute(sql)l

40、ast=1lastIP=request.servervariables(local_addr)lasttime=0end ifsql仁select * from firstl ink set rs1=c nn. execute(sqll)do while not rsl.eof 统计访问人数sumpeople=sumpeople+rs1(访问次数 )rsl.move nextloopset rs仁nothing统计站内文章sql=select coun t(*) from n ewsdata set rs2=c nn. execute(sql)sunn ews=rs2(0)if sunn ew

41、s 0 the nsunn ews=0end if今天的新闻统计sql=select cou nt(*)from n ewsdata where 发布时间=&cstr(date()&resp on se.Write cstr(date()set rs2=c nn. execute(sql)sun=rs2(0)if sun 0 the nsun=0end if统计你发表的新闻数量sql=select coun t(*)from n ewsdata where 账号=&session(user)&resp on se.Write cstr(date()set rs2=c nn. execute(sql)yous un s=rs2(0)if yous uns &n bsp;td width=180 height=20 backgro un d=image/di ng.gi