西邮动态网站设计毕业论文.doc 39页

'自动化学院网站新闻发布及学生工作子模块设计西邮动态网站设计毕业论文目录摘要IAbstractII1引言11.1课题背景及意义11.2本文内容安排32课题分析42.1需求分析42.2新闻系统的性能需求52.3运行环境要求62.4系统功能模块63网站设计技术介绍83.1网站后台系统选取83.1开发工具的选用及介绍84网站新闻发布及学生工作模块模板设计104.1新闻发布及学生工作模块栏目设置104.1.1新闻发布模块栏目104.1.2学生工作模块栏目114.2网站静态模板设计113 自动化学院网站新闻发布及学生工作子模块设计4.2.1网站首页模板设计114.2.2新闻中心模板设计214.2.3学生工作模板设计245网站系统后台配置255.1网站基本信息设置255.1.1网站信息设置255.1.2网站栏目设置及栏目模板绑定255.1.3网站前台内容调用266网站调试及运行276.1网站运行环境配置276.1.1安装IIS6.0286.1.2网站所需组件安装286.1.3网站安全设置296.2网站内容管理306.3网站问题解决317网站的特点32结论33致谢34参考文献353 自动化学院网站新闻发布及学生工作子模块设计3自动化学院网站新闻发布及学生工作子模块设计摘要我们从建站的实际情况出发，经过对原有网站新闻发布事项的一番考察和分析，确立了新闻发布系统的具体实现功能。并阐述系统的结构设计和功能设计，实现新闻的分类显示，最近新闻的提示，新闻滚动功能等。经过授权的用户可以通过Web浏览器，以人机交互式的客户端程序实现对学校新闻的发布、管理、实时的进行行为统计和记录。本系统是自动化学院的一个子系统，具有很好的外部接口，能够很好的配合站点的其它子模块服务于网站的新闻发布.该系统是一个基于新闻发布和内容管理的全站管理系统；基于开源的KesionCMS系统，本系统可以将杂乱无章的信息（包括文字、图片和影音）经过组织，合理而且有序地呈现在大家面前。简单的说,新闻发布系统就是充当一个网络新闻媒介的功能。同时，我们采用了程序和模板的分离技术，易于后期对网站的升级。关键词：KesionCMS；模板分离技术；美工；网页三剑客；新闻发布IV 自动化学院网站新闻发布及学生工作子模块设计Abstractweembarkfromthestationconstructionactualsituation,passthroughtotheoriginalwebsitenewsissueiteminspectionandtheanalysis,hasestablishedthenewsissuesystemconcreterealizationfunction.Andtheelaborationsystemstructuraldesignandthefunctionaldesign,realizethenewsclassificationtodemonstratethat,therecentnewsprompt,thenewsrollsthefunctionandsoon.AftertheauthorizedusermaythroughtheWebbrowser,bytheman-machineinteractivecustomerendprocedurerealizationtotheschoolnewsissue,themanagement,real-timecarryonthebehaviorstatisticsandtherecord.Thissystemisasub-systemofschoolofautomation,hastheverygoodexteriorconnection,cantheverygoodcoordinatestandothersubsystemsservethewebsitenewsissueThissystemisbasedonthenewsissueandthecontentmanagemententirestationmanagementsystemmanagementsystem;BasedonopensourceKesionCMSsystem,thissystemmaythechaoticinformation(includingwriting,pictureandvideoandmusic)theprocessorganization,reasonablyhastheforewordtopresentinfrontofeverybody.Simplesaying,thenewsissuedthesystemisactsasaNetNewsmediumthefunction,andtheTechnologyofdepartprosceniumandbackstagemakesupdatethewebsiteeasily.KeyWords:KesionCMS;Technologyofdepartprosceniumandbackstage;artdesigning;dreamweaver、fireworks、flash;newsreleaseIV自动化学院网站新闻发布及学生工作子模块设计IV 自动化学院网站新闻发布及学生工作子模块设计1引言1.1课题背景及意义在网络飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用.因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。而学校网站是学校的"商标"，每一所学校都有自己的特色，每一所学校都有自己的个性。在这个高度信息化的社会里，建立自己学校网站是最直接的宣传手段。网站的超时空特性，不仅能让地区内的人们了解学校，更可让世界了解你的学校。凭藉学校网站，学校就可成为教育百花园中一朵鲜艳的花朵。　　现在的学生很喜欢上网，他们交际广泛，而且他们毕业后将走向全国东西南北，所以学校网站，会对学校起到相当大的宣传作用。比如说在学校建站初期搞一次全校学生参与美工设计大赛，这对学生和网站建设都是一种很好的支持；另外，学校网站还开设学校的学习论坛，邀请学生做适合自己兴趣爱好栏目的版主；不定期举办比赛通过这一系列的活动可以让更多的学生了解学校网站并参与其中，达到不错的宣传作用。一个优秀的学校离不开广大校友的支持和帮助，一所学校，特别是有几十年甚至近百年历史的学校，在国内外有无数的校友，很明显在信息飞速发展的今天，校友与学校之间以及校友与校友之间仍然主要通过普通信件或电话进行联系的方式已经落后，作为母校，有义务也有责任加强校友录的建设工作，以进一步加强校友与学校以及校友自身之间的联系。校友，在很多情况下一提到这个问题便让人想起仅仅是在学校搞校庆时拉赞助的对象，其实，广大的校友带给母校的往往是一些更可贵的看不见的无形资产，他们经常会为母校的发展献计献策，他们的成功也会推动母校的发展，对在校学生起到一个良好的示范作用，所以校友是学校发展不可缺少的力量。最好今后的毕业照全部上网(以前的毕业照也最好逐步整理上网)，同时发给学生的毕业照都印上学校网址，以加强校友与母校的联系。　　校园快讯以及校园风采图库的建设非常的重要，它们在一定程度上可以反映学校的办学思想、教学观念以及师生在校园的学习生活情况，经常查看这些栏目的除了在校师生外我想主要还有以下一些群体：一是已经毕业校友，他们关心学校的发展，所以会经常“回来”看看，试想，如果一位已经工作几十年的老校友再“回到”35 自动化学院网站新闻发布及学生工作子模块设计母校能看到自己当初的照片依然还放在学校网站上，那种心情是何等的激动，毕竟母校还没有忘记他们；二是，各级教育部门和学生家长，他们需要及时了解一些学校的教育教学工作情况，并及时的向学校有关部门反馈他们的意见或建议。现在学校各类活动，都可以分类的把它们放在网站的校园风采图库内，以记录着学校的历史！学校网站能提供教学互动的全新方式学校网站使得教师与教师、教师与学生、学生与学生之间的交流有了全新的方式，它不再受到传统课堂的制约。它可以使广州与北京、城市与乡村的学校同处一室，共同讨论，共同共享。地理上的界限在这里模糊和消失了，学校网站是真正没有围墙的学校。　　学校网站能够提供个性化学习的平台，不同的学生理解世界的方式各不相同，认知世界有诸多方式。网络提供的丰富资源可以使学生寻觅不同的教育方式，各取所需。学校网站允许不同的学生沿着自己的途径，按自己的速度接受教育与学习，学生将有机会享受最佳的教育机会，充分发掘自己的内在潜力，培植独特的个性和人格。学校网站是实现教育资源分配的桥梁网络有巨大的教育资源库，它集全社会的力量，使教育资源无限增长。这对于发达地区和欠发达地区，高投入学校和条件差的学校在获取教育资源的权力上达成平等，使每一位教师和学生都能均等的得到培训和受教育的机会，不再会受到学校水平、教材、教师能力的限制。不仅能极大的提高教学效率，而且能实现教育公平的社会理想。学校网站是最佳的教学研究室，学校网站与教育类专门网站的有效链接，给学校教学研究带来了一片新天地，各种优秀教案、专家论坛、网络观摩课、各科素材、多媒体课件制作等内容为教师教研提供了极佳的平台。有效地降低教研成本、提高效率。这次我们所设计的课题正是互联网与社会生活之间的紧密关系的体现，现今的社会，人们已经离不开了网络，网络已经成为人与人之间交流的一种形式，他能够把事情的复杂化转为简单化。自动化学院网站建设和改版不仅能够使满足学生对学院信息获取的需要，也是适应现代化信息建设的需要，同时，随着系部向学院的转变，原有的系部网站已经不能满足现在学院的需要，而且在版面设置，在美工设计上也存在了一定的落后。新版本的网站模块设计将根据自动化学院专业风格和特性进行设计，使其更贴近电子类网站风格。而我的课题主要侧重在新闻发布和学生工作模块上，新闻发布模块是一个网站不可或缺的部分，它将直接展示学院动态，学生工作模块在高校网站也具有同样的地位，新的设计将充分考虑其展示方式，具体包括图文，影音等内容。而两个模块归结起来是基于内容管理系统。35 自动化学院网站新闻发布及学生工作子模块设计1.2本文内容安排本文共分为七章，各章节的安排如下：第一章为绪论，介绍了课题的背景及意义，并对学校网站对学校及社会的意义简要叙述；然后在现在的网站支撑的现状基础上，提出课题主要研究内容。第二章主要对课题进行了分析，包括网站的需求，功能环境等，最后对网站的内容模块进行了研究。第三章介绍网站制作后台的选取和相关的一些开发工具。第四章介绍了新闻发布模块和学生工作模块的栏目设置要求，然后具体地介绍了网站首页静态模板的制作以及新闻中心学生工作等相关页面的模板设计。第五章介绍了网站后台设置的相关内容，已经前台和后台衔接的方法。第六章首先介绍了网站运行环境的配置和安装，然后详细介绍了网站后台内容添加的方法，最后介绍了在网站在运行中遇到的一些问题和解决方案。第七章简要介绍了该网站的一些特点。35 自动化学院网站新闻发布及学生工作子模块设计2课题分析2.1需求分析该网站为二级学院网站，需要经常发布一些新闻，学生工作等内容，如何能有效地管理和发布这些内容呢？最初用户的需求为：“该网站系统具有一般新闻系统的功能，同时具有新闻审核和不同管理员不同管理权限的功能”。而学生工作模块也是基于新闻发布系统，故下面针对新闻系统进行分析。通过对其它一些新闻系统的调查发现，一般新闻系统功能如下：前台按分类显示新闻；搜索新闻；后台管理：●添加、删除和修改新闻●添加、删除和修改用户●添加、删除和修改新闻分类●添加新闻（添加成功后的新闻根据管理员权限分为可发布新闻和待审核新闻）需要新闻审核，说明添加后的新闻分为两种：直接发布新闻和待审核新闻，同时待审核的新闻通过管理员或审核员经审核后才可以上传到网站，管理员有不同的权限，需要有个管理权限的功能，在系统中应该有个超级管理员，具有所有权限，能够对系统进行全面管理，同时管理员可以修改自己的一些信息。根据学院网站新闻发布管理的实际需求，在首页中能显示最热门新闻、头条新闻和最近发布的几条新闻等，同时在后台发布新闻时可以添加图片，也可以添加HTML语法，在前台能自动根据所显示的图片和HTML语法来显示新闻。在后台管理中，因为有权限的管理员才能登录管理后台，所以需要有个登录验证模块，而且需要根据用户权限的不同显示不同的管理目录，在管理新闻和用户时，当数据少时管理起来还比较方便，如果一多则想找到某条新闻或某个用户就很难，所以需要有个查找（新闻标题、用户）模块用于查找新闻或用户。根据以上需求分析，该系统要实现的主要功能为：35 自动化学院网站新闻发布及学生工作子模块设计前台显示新闻部分●用户登录区●显示最热门的前几条新闻●显示推荐的前几条新闻●显示最新的前几条新闻●搜索新闻功能●显示所有新闻分类（即部门）●按分类/部门显示其下的所有新闻●新闻详细信息浏览阅读●图片新闻（自动生成缩略图）以滚动形式在首页显示且只显示前几条●网站友情链接（可在管理中添加设置）●网站公告可显示发布了新闻但没通过审核的一些相关通知等后台管理部分●登录验证●根据权限显示相应的管理目录●添加、修改和删除新闻●管理发布新闻●管理审核新闻●分类管理●用户管理●网站风格设置、系统设置等2.2新闻系统的性能需求该系统在性能功能上应达到如下需求：操作简单、界面友好:简约的页面布局，使得新闻的录入工作更简便，许多选项包括新闻分类35 自动化学院网站新闻发布及学生工作子模块设计、来源部门等只需要点击鼠标就可以完成；另外，跟踪出现的提示信息也让用户随时清楚自己的操作情况。对常见网站的新闻管理的各个方面：新闻录入、浏览、删除、修改、搜索等方面都大体实现，实现了网站对即时新闻的管理要求；即时可见:对新闻的处理（包括录入、修改、删除）将立即在主页的对应栏目显示出来，达到“即时发布、即时见效”的功能；系统运行应该快速、稳定、高效和可靠；在结构上应具有很好的可扩展性，便于将来的功能扩展和维护。2.3运行环境要求客户端操作系统：Windows98/NT/2000/XP或更高版本浏览器：IE6.0及以上，Firefox，Opera等服务器操作系统：Windows2000Server或者Windows2003ServerWeb服务器：MSIIS应用服务器：IIS、COM+等企业级应用服务器数据库：ACCESS2.4系统功能模块工作流程为：打开该系统网站，普通浏览者能浏览、阅读和搜索新闻，能进行注册，注册后为新闻输入员，登录进入新闻后台管理区,只有添加新闻的权限；如为系统管理员，其有新闻后台管理区内的所有权限，除具有新闻审核员所有的权限外，还有添加和管理新闻分类、添加和管理用户、系统、风格和友情链接设置。35 自动化学院网站新闻发布及学生工作子模块设计在添加新闻时，除常规的添加新闻标题、新闻内容、新闻作者和新闻简介外，还可选择是否为首页新闻、是否为推荐新闻和是否在首页滚动图片(上传图片)等，对新闻内容的字体、字号和字体颜色可以调整，类似Word的一些简单的编辑功能，还可设置超链接和插入表格等。如添加新闻者为新闻输入员，其所添加的新闻需要系统管理员或审核员经审核后才能发布到网上；如是管理员或者审核员添加新闻的话，不需要再经谁审核，直接可以发布到网上。管理新闻功能包括对任一条新闻内容可作相应修改，也可删除任何一条不再需要保留的新闻。管理新闻分类包括对新闻分类名称作修改，也可将任一分类名删除，删除后其分类下的所有新闻也将被删除。添加用户时，用户等级可为管理员、审核员或者输入员之一，管理用户包括修改用户名、密码和用户等级，也可将任一用户删除。系统设置包括设置网站标题、网站地址、首页图片、网站公告(可用来显示当前有哪些新闻输入员所添加的新闻没有通过审核，具体的原因理由等)、网站链接(此文本内容可更改)和底部信息(可放置一些与站点相关的文本内容等)，对系统设置里的内容，随时可做相应的修改，这权限只有系统管理员才拥有。风格设置指从系统八种风格里任选一种作为当前网站的默认风格。浏览网站普通浏览者浏览阅读新闻搜索新闻注册用户登录后经权限判断新闻输入员添加新闻系统管理员新闻审核员添加新闻审核新闻管理新闻添加新闻分类管理新闻分类添加用户管理用户系统设置风格设置友情链接设置图2-4-1系统功能模块图示35 自动化学院网站新闻发布及学生工作子模块设计3网站设计技术介绍3.1网站后台系统选取基于我们上面对网站需求和结构的分析，我们选定开源系统KesionCMS为网站后台支撑，其原因如下：①系统采用模块化开发，100%开源，拓展性更强,二次开发更方便。②支持无限级栏目，可绑定二级域名，加载速度更是神速。③整个系统都可以生成静态HTML，有效的提高了系统的性能，不仅减轻服务器的负载提高搜索收录率，增加网站收录。同时也可以实现内容收费和访问权限控制。④网站模板与程序分离，支持DIVCSS，通过模板设计便可实现个性化网站⑤支持多级管理权限控制，让网站多人维护更轻松。⑥多重安全机制和权限控制，为网站安全保驾护航。该系统如上的六个有点正好符合我们网站的建设需求和后台选取标准。而且KesionCMS是一个专业，开放式的网站管理系统，KesionCMS人性化的操作方式，强大的后台管理功能，极其方便的管理模式和可根据需求随意自定义样式的万能标签，让非专业人士也专业，专业人士管理网站更省时，提高工作效率；系统没有任何文件加密,完全开源的程序拥有无限的扩展和伸缩性，灵活的二次开发架构，可快速整合第三方软件，系统更以其人性化的管理界面和操作方式及丰富的功能特性完全解决了网站建设后可能出现的问题。科汛开发人员在开发过程中无处不充分考虑用户的使用习惯，尽最大可能降低用户的使用门槛，让用户关注于内容维护本身，而不需要投入过多的时间来学习系统的使用技巧，在细节处下大工夫。基于对自动化学院网站完成后的使用和维护的考虑，我们选择了KesionCMS作为网站的后台。3.1开发工具的选用及介绍①、MacromediaDreamweaverCS4的简介：Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Dreamweaver是唯一提供Roundtrip35 自动化学院网站新闻发布及学生工作子模块设计HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP，Apache，BroadVision，ColdFusion，iCAT，Tango与自行发展的应用软体。当您正使用Dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。梦幻样版和XMLDreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出XML内容。②、Fireworks的简介：Fireworks是Macromedia公司发布的一款专为网络图形设计的图形编辑软件，它大大简化了网络图形设计的工作难度，无论是专业设计家还是业余爱好者，使用Fireworks都不仅可以轻松地制作出十分动感的GIF动画，还可以轻易地完成大图切割、动态按钮、动态翻转图等。Fireworks很完整的支持网页16进制的色彩模式，提供安全色盘的使用和转换，要切割图形、做影像对应(ImageMap)、背景透明，要图又小又漂亮，在Fireworks中做起来都非常方便，修改图形也是很容易的。在本课题中，主要采用fireworks对一设计好的网页进行切片处理。③、Photoshop的简介Photoshop是Adobe公司旗下最为出名的图像处理软件之一，集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件，深受广大平面设计人员和电脑美术爱好者的喜爱。在本课题中，主要采用photoshop对网站的前台进行前期美工设计。④、CSS样式的运用：中文译作“层叠样式表单”，在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。35 自动化学院网站新闻发布及学生工作子模块设计3网站新闻发布及学生工作模块模板设计4.1新闻发布及学生工作模块栏目设置根据对以前信控系网站的结构分析和对现在自动化学院对网站结构要求的调查，初步为网站新闻发布和学生工作模块设置栏目并提出栏目要求。4.1.1新闻发布模块栏目图4-1-1-1新闻发布模块栏目设置综合新闻：在新闻频道显示，在首页显示最新新闻列表，相关新闻以图片幻灯显示。教学新闻：在新闻频道显示。党群活动：在新闻频道显示。通知公告：在新闻频道显示，在首页显示最新通知公告文章列表。35 自动化学院网站新闻发布及学生工作子模块设计4.1.2学生工作模块栏目辅导员队伍：在学生工作频道显示。规章制度：在学生工作频道显示。学生活动：在学生工作频道显示，在首页显示最新学生活动文章列表。学生组织：在学生工作频道显示。优秀学子：在学生工作频道显示。学院院报：在学生工作频道显示。奖困贷补：在学生工作频道显示。安全教育：在学生工作频道显示。4.2网站静态模板设计4.2.1网站首页模板设计因为KesionCMS采用的是模板和程序分离的方式（这也为以后网站风格更换提供了便利），所以我们首先制作网站的静态模板。从网站首页开始。网站主页采用静、动相结合的方式，即静态的主画面和动态的图片或flash相结合，体现学院的勃勃生气，首页主要展示自动化学院及自动化学院学生的一些动态，就得利用ＡＳＰ与数据库结合的技术建立数据库查询管理系统，采用交互式的动态的web画面来实现。首先我们根据需要采用photoshop对网站首页进行设计。35 自动化学院网站新闻发布及学生工作子模块设计4.2.1.1网站首页内容版式设计①使用Photoshop对网站首页内容分块排版，并以不同颜色区分。如下图：图4-2-1-1-1网站首页内容分布图内容分布说明：内容①：网站首页banner，主要说明网站标题，以图片显示为主。内容②：网站首页导航条。内容③：网站首页banner，主要展示自动化学院相关活动或重大事件，以图片动画或flash展示为主。内容④：网站搜索框。35 自动化学院网站新闻发布及学生工作子模块设计内容⑤：网站新闻幻灯图片显示区。内容⑥：网站综合新闻列表显示区。内容⑦：网站通知公告列表显示区。内容⑦1：网站党建工作列表显示区。内容⑧：网站学生活动列表显示区。内容⑨：网站就业信息列表显示区。内容⑩：网站服务快捷链接显示区。内容11：网站友情链接显示区。内容12：学院联系方式版权信息显示区。②根据上面首页的内容排版，使用photoshop添加模拟内容。效果如下：图4-2-1-1-2网站首页版式设计模拟内容效果图35 自动化学院网站新闻发布及学生工作子模块设计4.2.1.2网站首页文件切片①使用Fireworks对上面处理好的首页文件进行切片处理。我们这里所说的切片（Slice）就是将一幅大图像分割为一些小的图像切片，然后在网页中通过没有间距和宽度的表格重新将这些小的图像没有缝隙的拼接起来，成为一幅完整的图像。这样做可以减低图像的大小，减少网页的下载时间，并且能创造交互的效果，如翻转图像等，还能将图像的一些区域用html来代替。其过程为打开图像，选择工具箱上的的切片工具，在图像的适当位置上按下鼠标左键并拖动绘制一个矩形区域，当矩形大小适当时释放鼠标，这样就生成了一个切片，下图所示。该切片区域被半透明的绿色所覆盖，称为切片对象，另外Fireworks根据切片对象的位置以红色分割线对图像进行了分割，称为切片向导。切片的标准参考网站首页内容分布图。图4-2-1-2-1网站首页切片原始文件效果图②导出首页切片文件生成基本html我们将制作好的切片文件导出，生成首页基本的html静态模板文件，其过程如下：在fireworks菜单中点击“文件”选择“导出”，然后设定导出路径，设定导出静态模板文件的名称。如图4-2-1-2-2所示35 自动化学院网站新闻发布及学生工作子模块设计图4-2-1-2-2导出网页切片文件导出文件后，我们在浏览器中打开导出的文件，发现网站首页已经基本形成。图4-2-1-2-3切片后导出的网页文件35 自动化学院网站新闻发布及学生工作子模块设计4.2.1.3网站首页内容编辑虽然Fireworks已经成功导出切片文件形成了网站的首页，但是现在有html完全不能满足我们对网站的设计需求，所以，我们会将生成的文件在专业的网站设计工具Dreamweaver里面再次编辑修改以达到我们的设计要求。①网页位置调整在导出的html中，所有的切片文件会被许多的表格控制位置，而整体位置也是有一个表格控制，在源文件中参数为……首先我们选中表格，在对齐方式中选择居中，是整个网站是浏览器的中间显示。同样我们可以选择修改代码的方式使其达到居中效果，代码为，在我们完成居中操作后，我们再将表格顶端对齐。方法如下：点击菜单栏中的“工具”，选中“页面属性”，在弹出的编辑框中将上边距设置为0px。图4-2-1-3-1网页位置调整后效果图②首页内容布局及调用35 自动化学院网站新闻发布及学生工作子模块设计网页位置调整后，整个总体布局已经完成，但是上面所显示的内容却是我们最开始添加的模拟内容，经过切片处理后，现在也只是表格中定位的图片，现在，我们将这些图片删除，留出空间，放入网站内容调用代码，同时，使用photoshop对部分切片图片进行细节处理。如图4-2-1-3-2所示图4-2-1-3-2网站调用代码加入③友情链接制作在首页文件最下方，我们将插入下拉菜单式的友情链接，首先删除将放置友情链接的切片文件，然后设置表格的背景。然后选中表格插入跳转菜单，设置相应的参数，最终生成代码如下：----------校内链接----------西安邮电学院招生就业网站成绩管理系统网络教学平台西邮图文中心35 自动化学院网站新闻发布及学生工作子模块设计同样对其余两个表格中的友情链接做同样的处理，最终效果如下：图4-2-1-3-3首页友情链接效果图④设置首页页面参数基于后台系统的选择，我们将首页页面的语言编码设置为GB2312，代码如下同时，我们设置网页的介绍和关键词，在html源码中加入调用代码：⑤对首页文字标题格式进行统一控制CSS采用导入的形式，可以有效给网页减肥，从而提高网页的访问速度网站的访问速度提高了，对搜索引擎也更友好，也就是更利于SEO，同时也方便对首页文章列表进行统一格式控制。在首页源文件中，我们插入代码载入CSS文件，CSS文件部分内容为BODY{MARGIN:0px;TEXT-ALIGN:center}TD{FONT-SIZE:12px;LINE-HEIGHT:2em}#jsmlA:link{FONT-SIZE:12px;COLOR:#ff0000;TEXT-DECORATION:none}#jsmlA:visited{FONT-SIZE:12px;COLOR:#ff0000;TEXT-DECORATION:none}.huise{FONT-SIZE:12px;COLOR:#999999}.news-title{FONT-WEIGHT:bold;FONT-SIZE:18px;COLOR:#000000;LINE-HEIGHT:1.5em;35 自动化学院网站新闻发布及学生工作子模块设计TEXT-DECORATION:none}A:link{FONT-SIZE:12px;COLOR:#333333;TEXT-DECORATION:none}A:visited{COLOR:#333333;TEXT-DECORATION:none}A:hover{COLOR:#ff0000;TEXT-DECORATION:underline}.top{VERTICAL-ALIGN:top;WIDTH:1000px;HEIGHT:130px;BACKGROUND-COLOR:#eaf2fb}.left{BACKGROUND-IMAGE:url(../images/index_12.jpg);VERTICAL-ALIGN:top;BACKGROUND-REPEAT:no-repeat;TEXT-ALIGN:center}#menu{PADDING-RIGHT:20px;BACKGROUND-POSITION:centercenter;FONT-SIZE:14px;BACKGROUND-IMAGE:url(../images/menu-bg1.gif);COLOR:#88a8d7;BACKGROUND-REPEAT:no-repeat;HEIGHT:29px;TEXT-ALIGN:right}⑥flashbanner设置制作在首页的flashbanner制作中，我们没有选用复杂的adobleflash来设置，而是采用FlashSlideshowMaker软件来设置，因为他制作更简单，效果多样，不需要太多的专业知识。图4-2-1-3-4flashbanner设计软件界面35 自动化学院网站新闻发布及学生工作子模块设计我们flashbanner的主要内容是自动化学院成立以来的几件大事。其中包括自动化化学院授牌，自动化学院第一次党员大会，自动化学院参加运动会等内容，在首页上直接展示出了自动化学院的风采风貌。图4-2-1-3-5flashbanner显示效果由此，网站首页静态模板已经完成，效果图如图4-2-1-4-1图4-2-1-4-1网站首页模板完成效果图35 自动化学院网站新闻发布及学生工作子模块设计4.2.2新闻中心模板设计完成网站首页模板设计后，我们已经确定了整个网站风格，因为新闻中心和学生工作是同一个网站的二级模块，所以风格版式完全相同，根据首页设计的方式，我们下面开始设计新闻中心栏目的模板。①新闻中心频道首页内容分布图4-2-2-1新闻频道首页内容分布区域①：网站通用风格顶部。区域②：网站左侧栏目导航。区域③④⑤⑥：新闻频道栏目文章列表②新闻中心频道首页内容模拟填充使用Photoshop对网站新闻频道首页内容进行内容模拟填充，同制作网站首页方式相同。效果如图4-2-2-235 自动化学院网站新闻发布及学生工作子模块设计图4-2-2-2新闻频道首页内容模拟填充效果图③对新闻频道首页进行后期处理在后期处理中，主要参照网站首页制作过程，对频道首页进行切片，编辑，加入内容调用代码，加入栏目超链接。效果如图4-2-2-3图4-2-2-3新闻频道首页最终效果35 自动化学院网站新闻发布及学生工作子模块设计④使用同样的设计流程，完成栏目文章列表，内容页面模板设计根据上述流程，完成栏目文章列表，内容页面模板设计，效果如下：图4-2-2-4新闻栏目列表页模板效果图4-2-2-5文章内容页面模板效果35 自动化学院网站新闻发布及学生工作子模块设计4.2.3学生工作模板设计在前面我们已经设计出了网站首页模板和新闻中心模板，为保证网站风格的同一，我们采用前面的方法设置出学生工作模板，最终效果如下：图4-2-3-1学生工作模块最终效果图到此，整个网站新闻发布及学生工作前台模板已经设计完成，后面将针对前台和网站栏目设置对网站后台进行设置。35 自动化学院网站新闻发布及学生工作子模块设计5网站系统后台配置网站前台模板制作完成后，后期主要对网站前台和后台进行衔接，这其中的主要工作为网站系统信息配置，网站栏目设置，网站模板绑定以及网站标签设置。5.1网站基本信息设置5.1.1网站信息设置进入系统后台，依次点击“设置”→“基本信息设置”，设置相关网站信息，并根据实际使用情况将允许上传的文件内容修改成xls|ppt|doc|html|jpg|bmp|gif|png|swf|mid|mp3|wmv|asf|avi|mpg|ram|rm|ra|rar|zip|wps|rmvb以满足网站实际运行的需要。图5-1-1-1网站信息设置5.1.2网站栏目设置及栏目模板绑定进入网站后台，依此点击“主系统”→“文章系统”→“文章栏目管理”，在此添加新闻中心，学生工作栏目及其子栏目，并对每个栏目进行模板绑定。35 自动化学院网站新闻发布及学生工作子模块设计图5-1-2-1网站栏目设置图5-1-2-2网站栏目模板绑定5.1.3网站前台内容调用KesionCMS系统的特殊行在于他的模板和程序分离，绑定系统模板后，只需要在前台添加后台相应的调用代码就可以调用数据库内容，这个在制作网站模板的时候我们已经添加了，现在主要是对网站后台标签（即前台内容调用代码）的设置，KesionCMS的后台标签是封装过的SQL语言，简化的网站的建设工作。标签制作过程为：进入系统后台，依次进入“标签”→“系统函数标签”→“新建标签”在弹出的窗口中设置标签名称，和相关前台显示风格。35 自动化学院网站新闻发布及学生工作子模块设计图5-1-3-1网站标签设置在标签设置中并没有频道文章列表标签，这个时候，我们需要使用SQL语句调用数据库内容，SQL语句为：selectid,title,keywords,hits,intro,adddate,author,(selectcount(id)fromks_commentwherechannelid=1andinfoid=ks_article.id)ascommenttotalfromKS_Articlewheretidin({$CurrClassChildID})anddeltf=0andverific=1orderbyiddesc6网站调试及运行通过上面的工作，网站的前台和后台都已经完成，并对该网站其他模块进行整合，现在对网站进行整体测试。6.1网站运行环境配置35 自动化学院网站新闻发布及学生工作子模块设计KesionCMS是基于ASP动态语言的，为了保证网站运行正常，我们将使用windows2003+IIS为服务器环境。6.1.1安装IIS6.0IIS的安装是创建ASP运行环境的关键一步，安装好它以后，计算机就是一台Web服务器了。步骤：放入光盘，点击控制面板->添加或删除程序->添加或删除windows组件，如图8-1所示选择INTERNET信息服务单击下一步。安装好IIS后，进入控制面板下的管理工具找到INTERNET信息服务双击即可打开。然后建立虚拟目录，把自己首页的目录写上去，然后取一个别名，主要是为了方便，再在默认文档中，写上主页的文件名就可以了，以后在IE浏览器中只要打127.0.0.1就会显示自己的主页。图6-1-1-1IIS组建安装6.1.2网站所需组件安装考虑到网站对于内容的保护，我们需要将上传的图片上面加上水印，这个功能需要安装aspjpeg组件。运行aspjpeg安装文件，按照普通软件安装方法安装即可，最后重启IIS使组件生效。35 自动化学院网站新闻发布及学生工作子模块设计图6-1-2-1相关组件安装6.1.3网站安全设置网站的安全是网站建设一个不容忽视的问题，同样，我们也将对网站进行安全配置。主要是对网站文件夹运行权限设置。我们以upfile文件夹为例。打开ＩＩＳ管理器，如下图右键upfiles目录,并点击属性，然后在执行权限里选择＂无＂。图6-1-3-1网站安全设置35 自动化学院网站新闻发布及学生工作子模块设计图6-1-3-2网站安全设置这样即使有木马上传到upfiles目录下，也没有发挥作用的余地了。6.2网站内容管理进入网站后台，点击文章系统，进入文章系统的管理界面，在左边的操作窗口，我们可以添加文章，签收文章，能方便的管理栏目，“关闭，展开”这两项功能，右边操作窗口右上角还有快速跳转至某栏目，可以方便的进行栏目切换。并可以按属性查看文章，按推荐，幻灯，热门等这些属性可以查看这些属性的文章；选择文章标题前面的复选框，可对选中的文章进行批量删除，批量绑定模板，批量设置属性等；添加内容方式为：点击“添加”按钮，我们进入文章(新闻)的添加，我们看到右边有基本信息，属性选项，权限选项，相关信息四项操作；系统默认的情况下是直接进入基本信息界面，我们输入简短标题，如果另外需要有完整标题，可以再另外输入一个完整标题，归属栏目是指这条信息是属于哪一个栏目下的内容，文章属性分推荐，滚动，头条，热门，固顶，幻灯这些，当我们在标签中需要调用推荐的文章时，这篇文章就要具有推荐的属性她才能被调用到推荐文章里边，当调用幻灯片时，这篇文章里头必须有图片，而且文章属性必须是幻灯才行，转向链接是指我们这篇文章不是直接的，而是直接链接到别的页面的时候使用的，对“使用转向链接”这前面的复选框打上勾即可。关键字Tags这项功能是指这篇文章（新闻）的关键字，系统可以自动生成Tags，生成的关键字Tags与相关信息文章是有联系的；文章作者，来源，我们看到后面有一个下拉列表，如果我们这些资料比较固定，也可以在设置中预先进行设置；文章导读这个有时候我们在前台需要用到，系统会根据文章自动截取内容的200个字作为导读内容；附件上传，点击浏览，选择好要上传的文件，我们可以上传一些文档之类的附件；文章信息就在我们的编辑器中直接输入或者拷贝的直接复制进去就行了。35 自动化学院网站新闻发布及学生工作子模块设计图6-2-1网站内容添加6.3网站问题解决①上传问题解决在网站整体调试中，我们遇到了“Request对象错误"ASP0104:80004005"的解决方法Request对象错误"ASP0104:80004005"不允许操作”错误，经过我们对问题的研究，是由windows2003服务器系统对上传文件大小限制引起的，解决方法为：先打开Internet信息服务（IIS）管理器（本地计算机）----属性----允许直接编辑配置数据库(N)，勾先“允许直接编辑配置数据库(N)”然后在服务里关闭iisadminservice服务找到windowssystem32inesrv下的metabase.xml,用计事本打开metabase.xml，找到ASPMaxRequestEntityAllowed把他修改为需要的值，默认为204800，即200K把它修改为51200000（50M）然后重启iisadminservice服务。②浮动广告无法在flash上层显示我们在网站首页放置上浮动的招聘广告是，当浮动框穿过flashbanner时，会消失，针对这个问题，我们的解决方法是在flash参数中加入如下代码35 自动化学院网站新闻发布及学生工作子模块设计7网站的特点整个网站采用开源的CMS为后台，避免了个人因经验不足，专业知识缺乏所编写程序安全认识上的缺乏，从而保证的网站的安全性，同时，系统有专业人士开发，可以随时更新，最大程度地保证了网站的安全性和可用性。网站整个采用程序与模板分离的设计模式，这为后续网站前台设计更换提供了便利，以后更换美工时，只需要重新设计静态模板即可。本系统拥有强大的会员管理系统和在线留言系统，虽然在本论文中没有介绍，但是在我们实际制作中却产生了很大的作用。图7-1网站最终运行图35 自动化学院网站新闻发布及学生工作子模块设计结论经过老师耐心细致的指导，及设计小组同学们的密切合作，同时翻阅了大量的资料(包括网上资料，书本及学校的一些相关资料)经过近三个月的努力，网站的设计制作告一段落。总结这次“自动化学院网站设计”开发制作过程，我们综合使用了目前因特网上的各种静态制作方法及交互式动态网站的制作设计手段，并对利用开源后台程序完成了网站的动态响应与生成网页的技术。同时也从中学习了对静态页面的处理风格，色彩搭配，页面导航方面有了一定经验。对用Javascript语言制作动态效果也有了更进一步的认识。目前网站的制作技术与要求，都已经告别了因特网初期网站制作的“幼稚”期，随着各类网站的迅速增加与浏览者需求的提高，无不要求网站从立意，策划，页面设计到后台程序的全面提高。无论是个人网站还是企业网站都必须被要求从浏览者角度出发，最大限度的满足用户的要求，这也是以后各类网站发展竞争的真正实质所在。本次设计由于设计时间较紧，且相关模块比较多，加之设计经验的不足，在网站的整体设计及各模块功能可能设计的不完全，有待于进一步的完善和改进。35 自动化学院网站新闻发布及学生工作子模块设计致谢最后要感谢在整个论文写作过程中帮助过我的每一位人。首先，也是最主要感谢的是我的指导老师，重庆春熙文化传播有限公司副教授。在整个过程中他给了我很大的帮助，在论文题目制定时，他首先肯定了我的题目大方向，但是同时又帮我具体分析使我最后选择新闻发布模块模板制作这个具体目标，让我在写作时有了具体方向。在论文提纲制定时，我的思路不是很清晰，经过老师的帮忙，让我具体写作时思路顿时清晰。在完成初稿后，老师认真查看了我的文章，指出了我存在的很多问题。在此十分感谢袁老师的细心指导，才能让我顺利完成毕业论文。其次，要感谢我同组的崔光远和陈焕堂同学，在整个过程中，他们都给予了我莫大的帮助。35 自动化学院网站新闻发布及学生工作子模块设计参考文献[1]赵增敏,朱粹丹,赵朱曦．ASP动态网页设计．北京：电子工业出版社，2002.[2]朱如龙．SQLServer数据库应用系统开发技术．北京：机械工业出版社，2003.[3]龙马工作室．DreamweaverMX2004．北京：人民邮电出版社，2002.[4]李世杰ActiveServerPages(ASP)3.0网页设计手册北京：清华大学出版社1999[5]前沿电脑．Dreamweaver、Fireworks、Flash制作网页北京：人民邮电出版社．[6]小志．ASP入门与实例演练薄．北京：中国青年出版社．[7]石志国．ASP动态网站编程．北京：清华大学出版社出版，2001．[8]杨威．ASP3.0网络开发技术．北京：人民邮电出版社出版，2000．[9]邓问渊，陈惠贞，陈俊荣．ASP与网页数据库设计．北京：中国铁道出版社出版，2001．[10]丁贵广．ASP编程基础与实例．北京：机械工业出版社，2002．[11]ChristophWille，ChristianKoller．24小时学通ASP．北京：人民邮电出版社出版．[12]马志勇．HTML4.0实用编程技术．北京：中国水利水电出版社出版，2000．[13]宋朝东．巧学巧用HTMLCSSJAVASCRIPT制作网页．北京：人民邮电出版社出版，2007[14]李烨．别具光芒DIV+CSS网页布局与美化．北京：人民邮电出版社出版，2007．[15]林义证、黄世阳．HTML&ASP网页制作教程．北京：北京中国铁道出社，2000.8．[16]冯英健．网络营销基础与实践．北京：清华大学出版社，2007.2．[17]张浦生．数据库的应用技术．北京：北京机械工业出版社，2007.1．[18]唐建平、陈建军．ASP程序设计实用教程．北京：人民邮电出版社出版，2005.[19]TomNegrino．cssvisualquickprojectguide．北京：机械工业出版社2009.[20]科汛官网．http://www.kesion.com35'