网站前台设计与实现.docx

1、网站前台设计与实现 毕 业 设 计题 目（中文）网站前台设计与实现姓 名学 号系别专业、 年级指导教师 湖南大众传媒职业技术学院毕业设计诚信声明本人郑重声明：所呈交的毕业设计，是本人在指导老师的指导下，独立进行研究工作所取得的成果，成果不存在知识产权争议，除设计中已经注明引用的内容外，本设计不含任何其他个人或集体已经发表或撰写过的作品成果。对本设计的研究做出重要贡献的个人和集体均已在文中以明确方式标明。本人完全意识到本声明的法律结果由本人承担。 毕业设计作者签名： 年 月 日一、网络传媒系毕业设计任务书姓 名学 号专业、班级网络技术0802毕业设计选题xxx网站的设计与实现主要设计内容： （一

2、）设计网站风格和框架。网站页面的整体风格必须根据网站所要表达思想表现一致，而整个网站的页面风格必须统一。（二）设计功能模块。主要设计任务：需提交的设计结果：指导老师完成任务期限审核意见： 系主任（签章）： 年 月 日二、网络传媒系毕业设计方案姓 名学 号专业、班级网络技术0802毕业设计选题xxx网站的设计与实现设计目标： 网站包括静态的和动态的页面，管理员能够进行后台维护和管理，要有比较稳定的数据库系统。通过连接代码把网站前台显示系统与后台管理系统连接起来。主要包括。设计内容：1.设计网站的整体风格；2.做好网站的色彩搭配；3.确定前台网站的栏目设置；4.设计网站所需的Logo、flash、

3、banner、图片、按钮等；5.制作网站前台的所有网页并实现各个功能模块。设计进程：指导教师意见： 签名： 年 月 日三、网络传媒系毕业设计指导记录表姓 名专业、班级学号毕业设计选题xxx网站设计与实现设计阶段指 导 意 见毕业设计方案毕业设计方案符合主题要求，网站的基本功能可以实现，风格和色彩搭配符合网站主题。设计进程阶段一明确主题，需求分析和可行性分析考虑合理，初步制定好了网站方案，确立网站任务，收集素材，但前台整体框架的设计还有待改善。设计进程阶段二明确前台基本功能模块，完成了网站总体风格和颜色搭配，初步搭建好了总体框架，制作好效果图，并制作好静态页面。设计进程阶段三及结果连接后台数据库

4、，实现网站中每个子页面和主页面正常运行，网站功能基本实现。设计报告初稿方案条理欠缺清晰，前台系统模块的描述不够。格式有些问题。设计报告修改稿方案条理基本清晰，后台系统与前台系统结合完整，详略得当，格式也按格式要求调整规范。 指导教师： 年 月 日 四、网络传媒系毕业设计答辩记录表毕业设计题 目xxx网站的设计与实现作者姓名所属系、专业、年级指导教师姓名、职称答 辩 会 纪 要时间地点答辩小组成员姓 名职务（职称）姓 名职务（职称）姓 名职务（职称）答辩中提出的主要问题及回答的简要情况记录：会议主持人签名： 记录人签名： 年 月 日 答辩小组意见及评分：评分： 答辩组长签名： 年 月 日五、网络

5、传媒系毕业设计评分表姓名专业、班级学号毕业设计选题xxx网站的设计与实现毕业设计过程（20%） 评分： 指导老师：毕业设计作品（30%）评分： 指导老师：毕业设计报告（30%）评分： 指导老师：毕业设计答辩（20%）评分： 答辩组长：毕业设计总评评分： 指导老师： 年 月 日注：未被抽取参加答辩者，设计作品与设计报告的分值比例各增加10%。xxxx的设计与实现计算机网络技术级摘要 简单的说网站时一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的信息。Internet的迅速普及，正是依靠不计其数、丰富多彩的网站，或者利用网站来提供相关的网络服务，网站是由网页按照一定的链接顺序组成

6、，人们可以通过网页浏览器来访问网站，获取自己需要的信息或者享受网络服务。关键字 ASP技术。Abstract Key word ASP technology 1系统分析1.1网站定位我们把建设的网站定位于：网站面向那些爱xxx，喜欢中国古典文化，以及需要了解xxx的最新动态的网民。该定位的具体含义为：通过网站来达到文化传播的意义，让人们了解到xxx文化在中国历史中的地位，让大家都重视并且学习中国古典文化。让该网站成为宣传xxx网站的有力传播基地。 1.2网站研究背景面对日益加快的生活节奏和信息社会日新月异的变化，网络已经成为一个便利的宣传平台，可以通过最少的投资，达到最大的宣传效果，利用来网络

7、宣传xxx文化是一个势在必行的趋势。如何运用现代化信息技术完成这一目标，建立“文化一个传播中心”是本网站要完成的重要任务。网站传播xxx文化为中心，通过运用Dreamweaver技术与HTML语言来实现网的页面设计，从而提高了网站的视觉效果。在实际操作过程中，始终坚持着一个原则：网站设计要与实际相结合，才能创造出新颖便捷的受大众喜爱的网站。这是本网站设计的目标。1.3网站研究意义网站具有文字、图片、色彩、电影、三度空间、虚拟现实等所有广告媒体的功能，通过它，可以让网民非常方便地看到xxx的历史文化、xxx的分类、xxx的各种资讯信息，而且可以加入声音、图片、动画和影像信息，达到真正的声情并茂，

8、达到更好的浏览效果。网站传播与传统的传播不同，不需要打大量的人力和物力，并且可提供全天候的服务而不须增加开支，可以减少浪费。网络还可以满足那些年长或残疾而行动不便的客户的特殊需要，网页的维护及运作由网络服务公司负责，有专业设计的电脑软件24小时全自动处理来往信息、统计、存档，无须增加企业本身的营运或人事成本。提供即时新闻讯息、xxx文化发展、xxx的种类等内容。与传统传播方式相比网页传播一旦放在网页上，不仅立即问世，开始发挥效用，更可随时更新、更正、省时省力，节省了大笔的人力及印刷费用。上网的成本可说极低，比起印刷商品目录和电视广告，其费用更显微不足道，且网络能延伸之全世界每一个角落。1.4网

9、站可行性分析1.4.1技术可行性分析本站使用的是ASP+ACCESS技术，Asp是微软公司开发的代替CGI脚本程序的一种应用程序,它可以与数据库和其它程序进行交互，是一种简单、方便的编程工具.Access数据库作为微软推出的以标准JET为引擎的桌面型数据库系统，由于具有操作简单、界面友好等特点，具有较大的用户群体1.目前， ASP+Access是中小型Internet网站的首选方案，本网站实现功能的目的主要是通过后台调用数据信息显示在前台，使前台数据信息能够及时更新。在制作xxx网的过程中，需要考虑到技术可行性的问题，对制作人员一般都要求掌握计算机技术，具有一定的数据库基础，至少熟悉运用网页制

10、作的软件,并对多媒体软件具有一定的熟悉。1.4.2经济可行性分析本网站制作全过程都有本小组自发制作，因此不需要太多的人力和物力，管理方便，所以无需庞大的费用。所以从经济上完全是可行的。1.4.3操作可行性分析本网站制作简单、界面简洁清晰，对于那些有一般的计算机知识的人员已可以轻松上手。并兼容所有网页浏览的软件。由此可见，该网站的操作是可行的，有必要开发本网站。综合以上方面，本网站具有很高的开发可行性，无论是从技术上，经济上或者社会因素方面还是操作上都是可行的。扩充性网站的整体规划及框架设计是具可扩充性的，前台页面的设计能保证企业网站在增加栏目后不会破坏网站的整体结构。后台数据库的设计具有高度的

11、扩充性，企业能够根据需要对栏目、类别的增、删、修改。2项目分析2.1网站设计目标对于一个宣传网站，企业的品牌形象至关重要。 特别是对于互联网技术高度发展的今天，越来越多的人通过网络来查找资料或进行学习，因此，文化传播业应该紧跟时代发展的步伐，本设计的主要目标是开发xxx文化的文化网站，用户可通过网站浏览一些关于xxx的资信或信息，例如：xxx的发展史、xxx的种类介绍等。按时保质地完成xxx网的设计，并掌握到网站的制做过程与技术。网站的整体设计思路简单，拥有基本的功能，风格简洁、易用、不单调。各个子页面都可正常返回主页以及正确连接到各个子页面，子页面与主页面的风格及颜色相同。数据要求前台正确显

12、示后台要求的数据的更新，及错误处理。为了保证网络的安全，不可以通过前台进入后台，对后台进行操作。本网站主要实现前台通过调用数据库把后台数据在前台显示和更新。管理员在后台可以动态更新首页的内容,使整个网站协调一致。在设计上,注重协调各区域的主次关系。通过网站的制做，学会与同学的合做，培养团队协助能力。2.2网站介绍本网站定位于计算机网络基础课程网，暂时考虑单机环境下的实现；操作系统选择目前常用的Windows xp和Windows server2003。系统性质管理信息系统。本网站前台功能包含首页、xxx与文化、xxx新闻、xxx的种类、xxx的美食、xxx与健康、xxx具。整个网站网页设计简单

13、，是一个能够给网民提供xxx消息的网站。2.3客户需求分析该网站是针对那些对xxx和中国历史文化有兴趣的网民，随着中国不断的发展，越来越多的人对中国的文化有兴趣，并且学习中国的文化。xxx不仅对中国有重要的影响对世界的文化业有着重要的，xxx曾踏上丝绸之路风光过，在中国史上有着不可替代的作用和举足轻重的历史地位，学习xxx文化，可以帮助中国文化的学习，本网站就是以推广中国的xxx文化为本，帮助网民查找有关xxx的信息，并且为网民提供一个可供交流的平台，供喜欢xxx以及中国历史文化的网民相互交流和学习。网络的发展速度越来越快，所以这个网站还是很有发展前途的。随着网络的发展，网络已经越来越贴近人民

14、的生活，越来越多的人通过网络来获得他们所需要的信息，所以，通过网络来推广xxx文化是一个趋势，也势在必行。随着经济的发展，人们的在物质生活得到满足的同时，人们还希望得到精神生活上的满足。xxx不仅是一种饮品，更是一种文化，可以满足人们在物质和精神上的满足，所以，xxx在将来还是有很好的发展前途。本网站提供了将xxx的文化和xxx的一些实时消息，帮助网民以最快的速度获得他们想要的信息，网站功能需求表如表2.1：表2. 1 网站的功能性需求功能序号功能名称功能说明1首页整个xxx信心的提供以及一些文化方面的介绍2xxx与文化xxx的历史习俗以及文化方面的文字和图片的介绍3xxx新闻一些xxx的展会

15、消息以及最新的动态资讯4xxx的种类xxx的分类以及其介绍5xxx的美食xxx美食的介绍和做法6xxx与健康教人们要怎么健康饮xxx7xxx具xxx具的欣赏以及一些xxx具的介绍2.4网站界面设计因为本网站是xxx文化的网站，所以这个网站中采用了大量的具有中国文化元素的素材如在制作Logo时选用的素材有中国风格的人物画，棋盘，xxx壶，灯笼等，这些素材的运用突出了网站的主题。从整体上来看，这个网站各个页面的分工明确，页面美观、大方、简洁、易懂。标准、具有一定的兼容性。2.5网站开发环境需求软件环境：兼容当前主流操作系统 Windows XP/server2003等。2.6网站前台总体设计本网站

16、主要是用来进行xxx叶信息的介绍以及其消息的发布，作为一个网站，应该有一些相关及其相对独立的模块耦合而成。本网站系统主要包括以下几个主要页面及几个大的模块，每个页面包含丰富的内容，每个大的模块下又细分为几个的功能模块。本网站主要用来进行教学信息的发布与显示。作为一个网站，应该由一些相关及相对独立的模块耦合而成。本网站系统主要包括以下几个主要页面及几个大的模块，每个页面包含丰富的内容，每个大的模块下又细分为几个的功能模块。制作前台页面模块，包括主页及各个子页面，建立各个页面与数据库中相关数据链接，实现前台通过调用数据库把后台数据在前台显示和更新。整体网站遵循精品课程网站设计思路，拥有完善的功能，

17、风格要求简洁大方不单调。各个子页面都可正常返回主页以及正确连接到各个子页面。功能要求使用简单全面，容易操作。由上面的分析，网站前台的结构设计成，如图2 -1所示:图2-1 网站前台结构设计3开发工具介绍3.1 Dreamwaver CS3介绍 Dreamweaver CS3是由Adobe公司在并购Macromedia之后推出的最新版本，它是一款专业的Web站点开发软件，可用于Web站点、Web页和Web应用程序的设计、编码和开发工作。在业界通常将Dreamweaver、Flash、Fireworks称为网页三剑客。将各种网页制作的相关工具紧密联系起来是Dreamweaver系列的一大亮点，同时

18、良好的插件体系，使Dreamweaver CS3可通过第三方插件进行补充。另外，Dreamweaver CS3还为开发人员提供了动态语言支持与丰富的模板。Dreamweaver CS3在功能强大与易用性之间具有很好的平衡，使用Dreamweaver CS3可以有效地提高Web开发的工作效率 与Dreamwaver 8 比较Dreamwaver CS3新增了许多功能：（1）与Photoshop CS3的关联增强。在Dreamweaver CS3中双击图形、图像文件，即可打开Photoshop CS3进行编辑，也可以将Photoshop CS3中设计的图形、图像文件直接引入到Dreamweaver

19、 CS3中。（2）对浏览器兼容性的检查。多种浏览器并存的现状给Web开发人员增加了很多额外的工作量，也许Web页面在IE下看到的效果令人非常满意，而放到其他浏览器例如Mozilla Firefox看起来却是一团糟。Dreamweaver CS3提供了对Firefox 1.5、Internet Explorer (Windows) 6.0和7.0、Internet Explorer (Macintosh) 5.2、Netscape Navigator 8.0、Opera 8.0和9.0、Safari 2.0这些浏览器相关CSS的兼容性检测。（3）CSS相关功能的增强。在Dreamweaver C

20、S3中提供了大量的CSS模板与代码块， 开发人员可以依据这些模板和代码块快速建立基于CSS修饰的页面。3.2 Fireworks技术Fireworks CS3是一个强大的网页图形设计工具， 你可以使用它创建和编辑位图、矢量图形，还可以非常轻松的做出各种网页设计中常见的效果，比如翻转图象，下拉菜单等，设计完成以后，如果你要在网页设计中使用，你可以将它输出为html文件， 还能输出为可以在photoshop，illustrator和flash等软件中编辑的格式。Fireworks CS3 软件可以加速 Web 设计与开发, 是一款创建与优化 Web 图像和快速构建网站与 Web 界面原型的理想工具

21、。Fireworks CS3 不仅具备编辑矢量图形与位图图像的灵活性, 还提供了一个预先构建资源的公用库, 并可与 Adobe Photoshop CS3、Adobe Illustrator CS3、Adobe Dreamweaver CS3 和 Adobe Flash CS3 软件省时集成。 在 Fireworks 中将设计迅速转变为模型, 或利用来自 Illustrator、Photoshop 和 Flash 的其它资源。 然后直接置入 Dreamweaver CS3 中轻松地进行开发与部署。矢量编辑与位图编辑创建和编辑矢量图像与位图图像, 并导入和编辑本机 Photoshop Illus

22、trator 文件。图像优化采用预览、跨平台灰度系统预览、选择性JPEG 压缩和大量导出控件, 针对各种交付情况优化图像。高效的 Photoshop 和 Illustrator 集成导入 Photoshop (PSD) 文件, 导入时可保持分层的图层、图层效果和混合模式。将 Fireworks (PNG) 文件保存回 Photoshop (PSD) 格式。导入 Illustrator (AI) 文件, 导入时可保持包括图层、组和颜色信息在内的图形完整性。 3.3 Flash技术Flash是Macromedia公司开发的集动画制作、网页设计和多媒体应用为一体的优秀应用软件为。用Flash可制作交

23、互式的动画和电影，这些动画和电影可以插入到网页中，也可以独立为动态网页，同时，他还自带了功能强大的ActionScript编译器，扩展了动画的功能，与网络应用集成得更加紧密。3.3Microsoft Access介绍Microsoft Access应用程序是一种功能强大且使用方便的关系型数据库管理系统。Microsoft Access是Office系列软件中用来专门管理数据库的应用软件。所谓数据库是指经过组织的、关于特定主题或对象的信息集合。它并不需要数据库管理者具有专业的程序设计水平，任何非专业的用户都可以用它来创建功能强大的数据库管理系统。由于它继承了Windows的特性，它可运行于各种M

24、icrosoft Windows系统环境中。Microsoft Access数据库能汇集各种信息以供查询、存储和检索。Access 的优点在于它能使用数据表示图或自定义窗体收集信息。数据表示图提供了一种类似于 Excel 的电子表格，可以使数据库一目了然。另外，Access 允许创建自定义报表用于打印或输出数据库中的信息。Access也提供数据存储库，可以使用桌面数据库文件把数据库文件置于网络文件服务器，与其他网络用户共享数据库。Access 是一种关系数据库工具，关系数据库是已开发的最通用的数据库之一。 3.4 Photoshop CS4作为世界上最受欢迎的图像处理软件，Photoshop每

25、一次发布，都会给我们带来很多惊喜。而随着Adobe正式发布了其最新版Photoshop CS4之后，人们的热情又被重新点燃。和老版相比，新版Photoshop CS4最大的变化，就是加入了GPU支持。原本相当耗费资源的大图片处理，在GPU的辅助下，已经变得异常迅速。而更加专业的3D图像处理，则是新版本的另一个亮点。第一次打开Photoshop CS4，依旧是熟悉的蓝色启动画面。不过，和上一版本相比，新版本在画面配色上更加淡雅，更能卓显出软件特有的专业气质。此外，新版界面也在老版本的基础上，进行了明显改进。和原本华丽的CS3相比。Photoshop CS4依旧采用了人性化十足的点击式界面，不过风

26、格看上去更加明快。同时，几个快捷键也被加入到了菜单栏右侧，除了可以帮助我们快速完成网格、标尺的显示之外。最重要的，还是增加了一个窗口布局功能，以便我们能够快速完成多组图片的快速布局。除此之外，在窗口最右端，Photoshop CS4还特意加入了一项菜单布局功能。能够为不同的使用者，快速排版出适合他们的界面布局。虽然，这项功能在真正的工作中，究竟作用如何，但的确是一项十分贴心的设计。3.5 ASP的特点Active Server Pages（ASP，活动服务器页面）就是一个编程环境，在其中，可以混合使用HTML、脚本语言以及组件来创建服务器端功能强大的Internet应用程序。ASP之所以能受到

27、大家的重视与使用的原因主要在于所产生的执行结果都是标准的HTML格式，而且这些程序是在网络服务器端执行，ASP（Active server page）工作在服务器的一端，通过服务器端的编译来动态的将HTML页面传送给浏览器，而“一般的脚本是直接在客户机端浏览器执行处理，由于脚本的兼容问题，经常出现错误，ASP文件只需后缀.asp扩展，即可实现动态页面的输出，这时当然需要WEB服务器支持ASP的运行。如果你以前创建过一个站点，其中混合了HTML、脚本语言以及组件，你就可以在其中加入ASP程序代码。通过在HTML页面中加入脚本命令，你可以创建一个HTML用户界面，并且，还可以通过使用组件包含一些商

28、业逻辑规则。组件可以被脚本程序调用，也可以由其他的组件调用。当在Web站点中融入ASP功能后，将发生以下事情：1、用户调出站点内容，默认页面的扩展名是.asp。 2、浏览器从服务器上请求ASP文件。3、服务器端脚本开始运行ASP。4、ASP文件按照从上到下的顺序开始处理，执行脚本命令，执行HTML页面内容。 5、页面信息发送到浏览器。4网站前台设计4.1网站素材处理把从网站上收集来的素材通过Fireworks和Photoshop自作静态图片，把图片做成自己网站所需要的大小或者截取图片的某个部分。网站中还有一些可以动的图片是通过flash自作的。通过flash可以使图片具有动态效果，把这样的图片

29、运用在网页中，使网页看起来更加生动。4.2网站颜色的搭配网站的色彩就像是人的外表一样，如果打扮得美观大方，就会给人一种魅力四射的感受，而不修边幅则让人感到粗糙毛草，因此，网页的色彩搭配将直接影响访问者对网站的印象。本网在式以灰色、黑等有古典艺术感颜色色彩搭配使用的，使用了一个淡色背景，在网页中也使用了一些色彩图片使得整个网站看上去不会显的很呆板，又不会失去网站的风格，使整个网站看起来具有中国文化氛围。4.3网站logo设计应为这个网站是以传播xxx文化为主要的传播思想，因此在网站logo的设计中选用了很多具有中国特色、具有文化氛围的素材，比如灯笼棋盘和xxx一样代表的都是一种中国的传统文化，l

30、ogo设计如图4-1。图4-1 logo4.4网站整体布局网页布局大致可分为“国”字型、拐角型、“T”字型、“L”字型、综合框架型、Flash型、变化型，本网站采用的是“国”字型，“也可以称为“同”字型，最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内 容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是网上常见一种结构类型。其实时操作版面，页面布局清晰，摆布对称，主次分明，整体布局如图4-2。Logo导航版权所有图4-2 网站整体布局4.5网站前台页面设计网站主要包括：xxx与文化，xxx新闻，xxx的种类，xxx的美食，xxx与健康，xxx具七个子页面。制作过程如下：4.5.1首页网站制作过程：首先利用fireworks制作了网站的首页效果图，大小问900 *1000。在制作网页的过程中首先是在dreameaver中用布局画出整个网站的大体布局格式，主要是分了三栏，各个栏目有可以分多个小栏目，并且通过css样式来调表格以及图片，文字的位子。主页包括的内容主要有：网站网站的域名，导航条，LOGO，版权。导航条又包含xxx与文化，xxx新闻，xx