网页与制作毕业论文-基于dedecms的买买网的设计_与实现

《网页与制作毕业论文-基于dedecms的买买网的设计_与实现》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

编号淮安信息职业技术学院毕业论文题目基于DedeCMS的买买网的设计与实现学生姓名学号院系专业班级指导教师顾问教师二〇一六年十月 摘要20世纪后期互联网在我国取得了快速的发展，31世纪随着高科技技术的发展计算机早已渗透到生活中的各行各业，它早已在各个领域中扮演重要角色，例如医院医疗、教学科研、金融政治、生活购物等等一系列，随着信息化建设的不断推进，网站的作用超越了传统的信息获取，交流它更能体现传统难以表达的风采，网购是如今的热潮，类似淘宝网那种做工美观的网页更能吸引客户的购买欲。所以，建立一个美观的，易于管理的网站已经势在必行。本文设计开发的买买网信息管理系统是根据现在购物网站特性而编写的，用现代科技优势扩展营销，应用现代化信息管理系统对其进行设计以及科学管理是一个不可或缺的手段，根据需要本系统对品种分类、页面设计、添加删除种类内容、各个页面的跳转的管理等进行加以说明。在页面的布局中，HTML将元素进行定义，CSS对展示的元素进行修改定位，再通过JavaScript实现相应的交互效果，最后通过织梦DEDE后台来进行对数据的增删改查。虽然表面上看来很简单，但是这里面需要理解的东西绝对不会少。在进行开发前，需要弄清楚这些概念，然后才能便于开发。关键词：HTML、CSS、JS、织梦Dede、信息管理系统 AbstractAbstractInlatetwentiethCentury,theInternethasmaderapiddevelopmentinourcountryinthirty-firstCentury,withthedevelopmentofcomputertechnologyhasalreadypenetratedintoallwalksoflife,ithasplayedanimportantroleinvariousfields,suchasmedicaltreatment,teachingandscientificresearch,finance,shoppingandsoonaseriesofpoliticallife,alongwiththecontinuouspromotionofinformationconstruction,thewebsitefunctionbeyondthetraditionalinformationexchange,whichcanbetterreflectthetraditionalstyletoexpress,isnowonlineshoppingboom,similartothatof"beautifulworkmanshiptaobao.comcanattractmorecustomerstobuy.Therefore,theestablishmentofabeautiful,easytomanagethesitehasbeenimperative.Shoppinginformationmanagementsystemdevelopedinthispaperisbasedonthecharacteristicsandthepreparationoftheshoppingwebsitenow,withtheexpansionofmarketingadvantageofmodernscienceandtechnology,moderninformationmanagementsystemforthedesignandapplicationofscientificmanagementisanindispensablemeans,accordingtotheneedsofthesystemofclassification,pagedesign,addanddeletecontent,eachpagejumpthemanagementareillustrated.Inthelayoutofthepage,HTMLwillbedefinedtodisplayelements,CSSelementstomodifythelocation,andthenthroughtheJavaScripttoachievetheeffectofthecorrespondinginteraction,andfinallythroughthedreamofDEDEbackgrounddatacrud.Althoughthesurfaceseemsverysimple,butitneedstounderstandthethingsthatareabsolutelynotless.Beforethedevelopment,weneedtoclarifytheseconcepts,andthentofacilitatethedevelopmentof.Keywords:HTML,CSS,JS,Dede,Informationmanagementsystem. 目录目录摘要IABSTRACTII目录III第一章绪论11.1课题研究的背景11.2购物网规划设计的主要任务11.3可行性分析11.4系统分析2第二章相关软件介绍32.1PhotoShop32.2Dreamweaver32.3织梦内容管理系统32.4WampServer环境3第三章静态页面制作53.1首页静态页面53.1.1头部部分53.1.2主体内容部分63.1.3尾部部分93.2列表静态页面113.3内容静态页面14第四章动态网页后台管理154.1DedeCMS织梦后台环境准备154.2织梦后台栏目及内容添加154.2.1栏目添加154.2.1文章添加164.3DedeCMS标记使用174.3.1首页DedeCMS标记代码插入174.3.2列表页DedeCMS标记代码插入184.3.3内容页DedeCMS标记代码插入19III 目录第五章总结与展望20致谢21参考文献22III 第一章绪论1第一章绪论第一章绪论1.1课题研究的背景如今的互联网已经渗透到我们生活的每一个层面，网站的内容也越来越丰富全面，建设一个网站的时候比较重要的就是网站本身的整体美观度，也就是网页设计的整体的视觉效果，是否能够充分吸引眼球。近几年购物网站吸引了很多卖家和顾客，淘宝网是中国深受欢迎的网购零售平台，拥有近5亿的注册用户数，每天有超过6000万的固定访客，同时每天的在线商品数已经超过了8亿件，平均每分钟售出4.8万件商品。这足以看出购物网在人民生活中占据了多大的地位，购物网可以让人足不出户就可以以理想的价格买到理想的品质，这样一来，一个购物网的美观就至关重要了，吸引顾客的目光，让顾客满意是作为一个购物网站必须要做到的。1.2购物网规划设计的主要任务网站规划是指在网站建设前对市场进行分析、确定网站的目的和功能，并根据需要对网站建设中的技术、内容、费用、测试、维护等作出规划。网站规划对网站建设起到计划和指导的作用，对网站的内容和维护起到定位作用。所以，要规划设计一个购物网站，要做到以下几点：1.要针对购物网站的特点以及需求，确定市场定位、风格、功能。2.确定技术路线和平台。包括栏目、美工、网页、程序。3.做好网站前端网页的PS效果规划图，这样不仅可以看到整个网页的大概描述，更便于修改。4.在有了效果图的基础上，对网页进行明确的划分，包括大整体、头部、中部、尾部的大部分以及大部分之中的小划分等，这样不会动一步动全身。5.网页制作，使用样式表对网页进行定义，设计，定位等操作，使网页更规范。也便于网页的修改。6.使用Javascript作出一些小程序来使网站更精美。1.3可行性分析本系统拟采用HTML（HyperTextMarkupLanguane)、Jacascript、CSS(CascadingStyleSheets)和织梦Dede分别作为前端和后端的开发工具。HTML是利用标记（Tag）来描述网页的字体、大小、颜色及页面布局的语言，使用任何文本剪辑器都可以对它进行编辑。HTML与VB、C++等编程语言有着本质的区别，使用一些网页编辑软件（如Dreamweaver）可以快速生成HTML代码。1 第一章绪论Javacript是一种脚本语言，通过嵌入或整合在标准HTML中实现，也就是说，JavaScript的程序直接加入在HTML文档里，当浏览器读取到HTML文件中的JavaScript程序，就立即解释并执行有关的操作，无需编译器。利用JavaScript技术可以制作动态按钮、滚动字幕等网页特效。CSS是一种数据表文件，在改数据表中存储了网页结构语言的各种样式以及显示方式等内容，并通过表的ID、标签以及类等选择器供XHTML调用，利用CSS技术，可以有效地对页面的布局，字体、颜色、背景和其他效果实现更加精密的控制。对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者改变不同页数页面的外观和格式。在W3C网页标准中，CSS属于网页的表现技术。因此从技术方面讲开发此系统是可行的。1.4系统分析完整的网站设计大体可以分两大部分，静态（界面）部分和动态（互动功能）部分，网站在确定了其栏目、链接结构和网站整体风格之后，就可以正式动手制作页面了。本系统使用的是“三”字型布局，页面上横两条色块，将页面整体分割为4个部分，色块中放广告条。首先设计PS效果图，其次在效果图做好后便是根据效果图来制作页面了，使用DIV+CSS来完成页面的制作。主页index.html制作好之后，还要制article_article.html以及list_article.html页面，这两个页面就是后面要显示的内容列表页（list_article.html）和内容页（article_article.html）。在静态页面都制作好之后，就是动态网站页面的制作了。本次任务主要完成买买网静态页面模板导入DedeCMS环境，掌握DedeCMS标记的使用，并将标记应用到买买网网站设计中；掌握买买网网站后台模板的管理及应用，并利用买买网网站管理平台添加网站内容。1 第二章相关软件介绍3第二章相关软件介绍第二章相关软件介绍本系统采用HTML+CSS+JS+PHP进行开发，其中前台用CSS+JS嵌入HTML进行页面开发和设计，提示信息完善，界面友好有亲和力；后台采用PHP（织梦后台系统），下面介绍这个系统所用到的软件。2.1PhotoShopAdobePhotoshop，简称“PS”，是由AdobeSystems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。在此系统中，使用Photoshop主要是为了进行设计PS网页静态效果图，以及对做网站所需要的素材进行处理的功能。2.2DreamweaverAdobeDreamweaver，简称“DW”，中文名称"梦想编织者"，是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，DW是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。AdobeDreamweaver使用所见即所得的接口，亦有HTML（标准通用标记语言下的一个应用）编辑的功能。2.3织梦内容管理系统织梦内容管理系统（DedeCMS）以简单、实用、开源而闻名，是国内最知名的PHP开源网站管理系统，也是实用用户最多的PHP类CMS系统，DedeCMS免费版的主要目标用户锁定在个人站长，功能更专注于个人网站或中小型门户的构建，当然也不乏企业用户和学校等使用本系统。织梦内容管理系统（DedeCMS）基于PHP+MYSQL的技术架构，完全开源加上强大稳定的技术架构，使用户无论是目前打算做个小型网站，还是想让网站在不断壮大后仍能的刀随意扩充都有充分的保证。此次网购系统中，使用织梦内容管理系统来完成子页面的内容链接以及内容的增删改查等操作。2.4WampServer环境WampServer是一款由法国人开发的ApacheWeb服务器、PHP解释器以及MySQL数据库的整合软件包。在windows下将Apache+PHP+Mysql集成环境，拥有简单的图形和菜单安装和配置环境。PHP扩展、Apache模块，开启/关闭鼠标3 第三章静态页面布局点点就搞定，再也不用亲自去修改配置文件了，WAMP它会去做。再也不用到处询问php的安装问题了，wampserver一切都搞定了。3 第三章静态页面布局第三章静态页面制作网站首页的展示直面影响着顾客对整个网站的好感度以及观赏欲。首先，分析一下买买网效果图，主页效果图可以划分出相应的布局区域，共划分为head首部、main中间部分、foot尾部。接着需要内容页以及列表页还有一个index_article页来进行后台代码处理。使用DIV+CSS布局方式构建网页。3.1首页静态页面首页主要分为3个部分，其中每个的布局都采用的不同的样式，最重要的就是中部main页面，运用的脚本语言方式比较多。3.1.1头部部分头部部分包括logo、导航、过渡三个部分，在导航部分中添加下拉框特效，代码如图3-1head布局：图3-1head布局css样式：#head{width:1024px;background-color:#FFFFFF;float:left;}.logo{position:relative;height:65px;}.logoimg{position:absolute;top:9px;left:7px;}.clear{clear:both;}.dh{float:left;height:35px;margin-top:3px;margin-bottom:3px;}.menu{width:1020px;float:left;height:35px;margin-top:3px;margin-bottom:3px;background-color:f83b4d;}.menuul{float:left;line-height:37px;}.menuulli{float:left;line-height:37px;margin-left:45px;}.menuullia{color:#FFF;text-decoration:none;padding-left:10px;}.mainmenu{float:left;width:110px;height:35px;list-style-type:none;margin-right:5px;margin-top:5px;}li.mainmenuul{margin:0;width:90px;}li.mainmenu{width:200px;display:block;text-decoration:none;background:#f83b4d;color:#fff;padding:0.5em;border-bottom:1pxsolid#fff;}ul#dropdownmenulia:hover{background:#FFCCCC;}li{list-style:none;}21 第三章静态页面布局.mainmenuul{position:relative;left:50px;}.fla{width:1022px;height:400px;float:left;}预览如下图3-2head部分预览效果显示：图3-2head部分预览效果3.1.2主体内容部分中间主体部分是整个页面的内容部分，一个网页的精髓展示便在这里，所以这个部分也是比较麻烦的。这个部分分为了top、center、bottom三个部分。Top部分布局部分代码-如下所示：今日品牌更多品牌特卖>