鹿木乡中学网站设计与开发毕业论文.doc

《鹿木乡中学网站设计与开发毕业论文.doc》由会员分享，可在线阅读，更多相关《鹿木乡中学网站设计与开发毕业论文.doc（44页珍藏版）》请在三一文库上搜索。

1、一 浙江工贸职业技术学院信息传媒学院 毕 业 设 计 （论 文）课题名称： 鹿木乡中学网站设计与开发加上某某网站“设计与开发”。论文中的图和代码不宜太多，用例图，请用UML来画。系统界面截图不宜超过3个，代码最多二页。 论文中的图和代码不宜太多，用例图，请用UML来画。系统界面截图不宜超过3个，代码最多二页学生姓名: 苏丽丽 专 业: 计算机应用技术(网络) 学生学号:1110301230 学生班级:计算机1102 指导教师: 范渊 鹿木乡中学网站设计与开发下面空一行，下面的空行为小四字号苏丽丽信息传媒学院 班级：计算机1102 指导老师：苏丽丽中间不要加逗号，下面空一行。摘 要“摘要”二字为

2、黑体小四左对齐：学校网站是学生了解其信息的重要来源，网络的快捷，无距离随时随地的特性对于教学网站的建设很重要。在互联网络高速发展的今天，网站正成为学校、公司、企业、政府及团体进行形象展示、信息发布、业务拓展、客户服务、内部沟通的重要阵地，它不但具有快捷、无距离及随时随地均可更新的特性，更能提供一些互动性的功能，如留言板、会员制、讨论区等等，使得网站充满生气，让人倍感亲切。学校网站建设是学校教育信息化建设的重要方面，是适应现代教育技术和信息技术的发展，加大学校对外交流与宣传力度，提高教学、科研、管理效率的重要途径；学校网站是学校对外宣传的窗口，也是展示全校师生才能，加强对校外联系，互相学习，共同

3、发展的阵地，学校网站建设的目的是促进师生与学校共同发展，因此，需要全校师生共同参与，同心合力把学校网站建设好.网站开发采用了div+css开发技术，有网站首页、登录页、出售消息、求购消息、用户中心、后台管理等页面，界面设计以蓝色为主，极强的表现了网络化生活。网站版块多以书的形状作为基础设计，紧贴网站主题。布局清爽大方，符合交互要求。网站结合Sql server数据库的使用完成了注册登录、搜索、个人书架、留言板、后台管理等功能。论文摘要又称概要、内容提要。摘要是以提供论文内容梗概为目的，不加评论和补充解释，简明、确切地记述论文重要内容的短文。其基本要素包括研究目的、方法、结果和结论。这几行都为宋

4、体小四，1.5倍行距关键词关键字三字黑体小四左对齐：div+css 二手书网站 SQL数据库关键字内容宋体小四，两词之间应留出一个汉字的空间，不加任何标点符号 目 录三号，黑体，居中，两个字之间空一格，下面空一行，下面空一行的字体大小设置为小四1 引言11.1 温州市高校二手书交易站的开发背景11.2 温州市高校二手书交易站的意义与设计目的12 开发工具及环境介绍22.1 温州市高校二手书交易网的开发环境22.2 本项目应用的主要开发工具22.2.1 Microsoft SQL Server 200822.2.2 Adobe Photoshop CS432.2.3 Dreamweaver 83

5、2.2.4 Microsoft Visual Studio 201042.2.5 动软42.2.6 IE Tester42.3 本项目应用的主要开发技术52.3.1 C# 语言52.3.2 DIV+CSS53 项目概述63.1 项目概述63.2 项目风险63.3 项目进度计划74 项目需求分析84.1 业务分析84.1.1 业务组织结构84.1.2 业务工作角色分析84.2 概要设计104.2.1 网站结构图104.2.2 网站概要设计说明114.3 现行研究存在的问题及解决办法135 数据库设计145.1 数据库结构145.2 数据库表145.3 数据库表关系图165.4 数据库设计命名规范

6、166 网站实现176.1 网站后台界面设计与布局176.1.1 后台登入界面176.1.2 信息管理界面186.2 网站前台界面设计与布局196.2.1 首页196.2.2 前台登录界面226.2.3 内容页256.3 说明316.3.1 项目文件命名规范316.3.2 项目文件结构说明316.4 动软生成解决方案326.5 Web.Config 文件配置327 测试337.1 测试337.2 测试例子及其结果347.2.1 页面效果测试347.2.2 后台添加测试348 总结与展望36致谢37参考文献38请认真看目录说明一级标题加粗，小四，其他正常，致谢和参考文献不要加序号，目录表文字宋体

7、小四居左，三级目录，目录格式“来自模板”，目录1宋体，小四，粗体，目录2，目录3都为宋体，小四，正常体：目录最多设置到三级，如7.1.1，不能到四级目录，如7.1.1.11 引言引言序号为1，一级标题，小二号黑体字左对齐，题序和标题之间要紧靠，不要有空格，下同1.1 温州市高校二手书交易站的开发背景二级标题，小三号黑体左对齐，题序和标题之间要紧靠，不要有空格，下同目前中国进入经济高速发展阶段，人口远远超出土地承载力、资源极度缺乏、环境容量极度狭小，循环使用教科书或各种书籍是利国、利民、利社会的善事。正文内容设置格式为宋体小四首行缩进2中文字符， 全文采用1.5倍行距。而随着市场经济的发展和人们

8、生活水平的提高，二手书的市场是一个环保和低成本看书的选择。在学校里，二手书商店就带给同学们一个供需平台。但是，对于二手书籍的管理和销售，普通的旧书市场不能有效的进行。而且不是每个学校都有提供学生们这样一个二手书循环利用的平台。而随着Internet的普及，网上购买商品或获取信息已成为现代人的一种生活习惯。而上网更是大学生活不可或缺的一部分，所以一个独立的能够满足用户需求的校园二手图书交易网站的设计与开发是十分有必要也是可行的。我所做的高校二手书交易网站平台，可以让我们温州市内所有的高校生更加容易的便捷的参与到书籍循环利用，让更多的书发挥更高的价值，也保护了我们所赖以生存的环境。1.2 温州市高

9、校二手书交易站的意义与设计目的近几年来，我们对“役期满”的成捆教材送往废品站的现象已经见惯不怪，对装帧越来越豪华，印刷越来越精美的教材已几近麻木；在大学生就读期间，一年中也有很多精装的教材是一个学期都没有碰过几次的，有些甚至于没有开封过。隐匿其后的巨大资源浪费和节俭美德的剥蚀却很少有人认真思考过。如果我们将大家不用的教科书和课外书给需要的人，我们每年将节约多少造纸用的木材，将少砍伐多少亩森林、将节约多少林地、又将减少多少造纸和印刷（包括油墨生产）过程中的污染！真是不算不知道，一算吓一跳，一本看似不起眼的教材，都与国计民生紧紧相连。教材循环使用远不止于经济意义，高年级同学将自己用过的教材传给新生

10、，蕴藉了“薪火相传”的人文精神，不仅是学业的延续，更是一种风范的树立；而新生们从学兄学姐手里接过的，不仅仅是他们的成长历程和做学问的记录，更重要的是“润物细无声”的节约意识，这对于正在成长中的青少年们尤为珍贵。所以建立一个高校间二手书买卖或无偿捐送的管理网站刻不容缓。2 开发工具及环境介绍每章开始要另取一页，即在上一页中加上分符2.1 温州市高校二手书交易网的开发环境，如表2.1表2.1 开发环境表名放在表头，表2.1代表第2章，第一个表，下面依次类推，整个表格要居中对齐（不是指表中的内容），表说明要宋体，五号字体约束名称约束要求cpu最低要求：600 兆赫 (MHz) Pentium 处理器

11、或同类AMD处理器推荐：建议采用 1 千兆赫 (GHz) Pentium 处理器或同类AMD处理器内存512MB以上硬盘80G以上开发环境Microsoft SQL SERVER 2008 (数据库)Microsoft Visual Studio 2008（项目开发工具）Microsoft Office Word 2003操作系统Windows XP 、Windows 2000等Windows系列辅助工具Rational Rose Enterprise Edition(建模工具) Microsoft Office Visio 2003 (画图工具)动软.Net代码生成器Adobe Photos

12、hop CS4Adobe Flash CS5各主流浏览器（IE浏览器、火狐、Opera、Google Chrome、Safari） 2.2 本项目应用的主要开发工具2.2.1 Microsoft SQL Server 2008SQL Server 是一个关系数据库管理系统。它最初是由Microsoft、Sybase 和Ashton-Tate三家公司共同开发的，于1988 年推出了第一个OS/2版本。在Windows NT 推出后，Microsoft与Sybase 在SQL Server 的开发上就分道扬镳了，Microsoft 将SQL Server移植到Windows NT系统上，专注于开发

13、推广SQL Server 的Windows NT 版本。Sybase 则较专注于SQL Server在UN操作系统上的应用。SQL Server 2000 是Microsoft 公司推出的SQL Server数据库管理系统，该版本继承了SQL Server 7.0 版本的优点，同时又比它增加了许多更先进的功能。具有使用方便可伸缩性好与相关软件集成程度高等优点，可跨越从运行Microsoft Windows 98 的膝上型电脑到运行Microsoft Windows 2000 的大型多处理器的服务器等多种平台使用。这个平台有以下特点：1） 可信任的使得公司可以以很高的安全性、可靠性和可扩展性来运

14、行他们最关键任务的应用程序。2） 高效的使得公司可以降低开发和管理他们的数据基础设施的时间和成本。3） 智能的提供了一个全面的平台，可以在你的用户需要的时候给他发送观察和信息。2.2.2 Adobe Photoshop CS4Photoshop是Adobe公司旗下最为出名的图像处理软件之一。多数人的对于Photoshop的了解仅限于“一个很好的图像编辑软件”，并不知道它的诸多应用方面，实际上Photoshop的应用领域很广泛，在图像、图形、文字、视频、出版各方面都有涉及。Adobe Photoshop CS4软件通过更直观的用户体验、更大的编辑自由度来大幅提高的工作效率，使您能更轻松地使用其无

15、与伦比的强大功能。 使用全新、顺畅的缩放和遥摄可以定位到图像的任何区域。借助全新的像素网格保持实现缩放到个别像素时的清晰度， 并以最高的放大率实现轻松编辑。通过创新的旋转视图工具随意转动画布， 按任意角度实现无扭曲查看。 Adobe Photoshop CS4软件除了包含Adobe Photoshop CS3的所有功能外，还增加了一些特殊的功能，如支持3D和视频流、动画、深度图像分析等。 此外，Photoshop CS4将支持GPU加速。有了 GPU 加速支持，用 Photoshop 打开一个 2GB、4.42 亿像素的图像文件将非常简单，就像在 Intel Skulltrail 八核心系统上

16、打开一个 500 万像素文件一样迅速，而对图片进行缩放、旋转也不会存在任何延迟；另外还有一个 3D 加速 Photoshop 全景图演示，这项当今最耗时的工作再也不会让人头疼了。 Photoshop CS4 的另一个让人印象深刻的新功能是不但可以导入3D模型，还能在其表面添加文字和图画，并且就像直接渲染在模型表面一样自然。2.2.3 Dreamweaver 8Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件随着Dreamweaver 8的发布，更坚定Dreamweaver在该领域的地位。它集网页设计、网站开发和站点管理功能于一身。具有可视化、支持多平台和跨浏览

17、器的特性是目前网站设计、开发、制作的首选工具。它有以下几点优点：1、灵活的编写方式2、可视化编辑界面3、功能更多的CSS支持CSS可视化设计、CSS检查工具4、动态跨浏览器验证5、强大的WEB站点管理功能6、内建的图形编辑引擎7、Dreamweaver的集成特性8、丰富的媒体支持能力9、超强的扩展能力2.2.4 Microsoft Visual Studio 2010Visual Studio是微软公司推出的开发环境。是目前最流行的Windows平台应用程序开发环境。Visual Studio 2010版本于2010年4月12日上市，其集成开发环境（IDE）的界面被重新设计和组织，变得更加简单

18、明了。Visual Studio 2010同时带来了NET Framework4.0、Microsoft Visual Studio 2010 CTP( Community Technology Preview-CTP)，并且支持开发面向Windows 7的应用程序。除了Microsoft SQL Server，它还支持IBMDB2和Oracle数据库 。2.2.5 动软动软代码生成器 是一款完全自主知识产权研发的为软件项目开发设计的自动代码生成器，也是一个软件项目智能开发平台，它可以生成基于面向对象的思想和三层架构设计的代码，结合了软件开发中经典的思想和设计模式，融入了工厂模式，反射机制等等

19、一些思想。主要实现在对应数据库中表的基类代码的自动生成，包括生成属性、添加、修改、删除、查询、存在性、Model类构造等基础代码片断,支持不同3种架构代码生成，使程序员可以节省大量机械录入的时间和重复劳动，而将精力集中于核心业务逻辑的开发。 动软代码生成器 同时提供便捷的开发管理功能和多项开发工作中常用到的辅助工具功能，您可以很方便轻松地进行项目开发，让软件开发变得轻松而快乐！帮您快速开发项目，缩短开发周期，减少开发成本，大大提高了企业的研发效率，使得软件企业在同样的时间创造出更大的价值。2.2.6 IE TesterIETester是一个免费的WebBrowser控件，让您有渲染和IE8的J

20、avaScript引擎，IE7和IE 6在Windows 7，Vista和XP的IE5.5中，在同一进程中安装的IE浏览器。可以帮我们模拟网页在IE5.5、IE6、IE7与IE8 beta1等浏览器的相容性，让我们看下辛苦作好的CSS样式或网站版面是否可以在各个主要浏览器正常显示。IETester是以“分页标签”的方式，分别在不同的页签中显示你所指定的IE浏览器版本的网页浏览画面，此外类似Office 2007的软体介面呈现方式也相当新潮好用，大部分常用的按钮都直接列在上面。2.3 本项目应用的主要开发技术2.3.1 C# 语言C#综合了VB简单的可视化操作和C+的高运行效率，以其强大的操作能

21、力、优雅的语法风格、创新的语言特性和便捷的面向组件编程的支持成为.NET开发的首选语言。并且C#成为ECMA与ISO标准规范。C#看似基于C+写成，但又融入其它语言如Pascal、Java、VB等。微软c#语言定义主要是从C和C+继承而来的,而且语言中的许多元素也反映了这一点.C#在设计者从C+继承的可选选项方面比Java要广泛一些(比如说struts),它还增加了自己新的特点(比方说源代码版本定义).但它还太不成熟,不可能挤垮Java.C#还需要进化成一种开发者能够接受和采用的语言.而微软当前为它的这种新语言大造声势也是值得注意的.目前大家的反应是:这是对Java的反击. C#更像Java一

22、些,虽然微软在这个问题上保持沉默.这也是意料中的事情,我觉得,因为Java近来很成功而使用Java的公司都报告说它们在生产效率上比C+获得了提高. Java所带来的巨大影响和大家对它的广泛接受已经由工作于这种语言和平台之上的程序员数量明显的说明了。由这种语言写成的应用程序的数量是令人惊讶的并已经渗透了每一个级别的计算,包括无线计算和移动电话。C#能够在用户领域获得这样的礼遇吗?我们必须等待并观望,就像已经由SSI公司的CEO和主席Kalpathi S. Suresh指出来的那样,我发现所有这些都是渐进的.如果C#不存在,我们总能回到Java或C和C+。它们在更大的意义上来说只是大公司制造的市场

23、噱头.我们必须给他们时间安顿下来看看这些是不是真的对IT工业有什么影响。2.3.2 DIV+CSSDIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，DIV+CSS 是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。XHTML是The Extensible HyperText Markup Language（可扩展超文本标识语言）的缩写。XHTML基于可扩展标记语言（XML），是一种在HTML 基础上优化和改进的的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。在XHT

24、ML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。3 项目概述3.1 项目概述设计一个基于Web的高校二手书交易网站。主要有网站首页、列表页、会员注册、登录页等，其设计的目的是为了买卖二手书或者捐送二手书的高校生有一个直接的交流平台。基于Web的高校二手书管理系统分为二手书管理和会员管理两种形式。一、 二手书管理:1) 信息发布管理：会员可以免费发布买卖书籍的消息，消息包括发布时间、交易的书名、类型、新旧程度和发布消息人的联系方式等信息。可供有意向买卖书籍的人了解信息。2) 二手书分类管理：站内所有二手书籍以教科书、工具书、课外书三大类进行分类，用户可按照他们

25、所需书籍类型进行消息查看。3) 书名检索：按书名对自己所需的书籍进行站内检索，查询到有关此书籍现有的全部信息发布，可进一步了解所需信息详情。二、 会员管理1) 会员资料管理：包括账号、密码、会员名称、联系方式。2) 信息发布记录：包括会员自己发布的购书或售书信息的记录。3) 个人书架：包括会员收藏对自己所关注书籍的记录，所收藏的记录可链接到相关书籍的详细信息页面。查询到有关此书籍现有的全部信息发布，可进一步了解所需信息详情。3.2 项目风险1) 项目进度由于对于做项目的实践次数比较少、经验不够丰富以致无法应付项目开发过程中层出不穷的问题，而且对于项目时间的安排和分析不够准确，因此对项目能否按时

26、交付造成了很大的影响。2) 项目需求不明确项目的开发前期业务需求不明确，参考资料极少，需求分析做的不够刀舞，对于网站的该实现什么效果也在不断的改变，再加上前期需求安排的时间太少。开发过程主要参考其它作品的形式，没有一个明确的目标。3) 技术水平不够技术水平问题大概是每个从事开发人员都会碰到的问题。在该项目中也碰到了各种各样的技术上的问题，尤其是在做网站后台的时候，学到的知识根本不够用，也因为这些各种各种各样的新技术的出现，也使项目的进度受到影响。3.3 项目进度计划温州市高校二手书交易网的设计包括制定计划、需求分析、总体设计、详细设计、实现编码几个阶段，其项目进度安排如图3.1所示图的说明。而

27、且图要居中对齐：图 3.1 项目进度图（甘特图）图说明放在图的下方，居中对齐，宋体，五号字体图3.1表示这是第3章的第一个图4 项目需求分析4.1 业务分析4.1.1 业务组织结构*4.1.2 业务工作角色分析系统共分为3个角色，分别为游客、注册用户和管理员。游客即为未在该网站注册的访问用户，可以使用的网站功能有：查询图书，浏览图书信息，注册账号。1、 查询图书信息：输入想要查询图书的名称关键字，可以查找出该图书的基本信息。2、 浏览图书信息：进入网站浏览模块后，游客可以看到大量的图书信息，当游客找到想要查询的图书后，可以点击查看更加详细的图书信息。3、 注册账号：通过填写基本资料，成为网站的

28、注册用户，获取更多的功能。游客 查询图书信息注册账号浏览图书信息注册用户即为已经在该网站注册过的用户，可以使用的网站功能有：查询图书，浏览图书信息。查看用户信息，发布图书，留言板。1、 查询图书信息：输入想要查询图书的名称关键字，可以查找出该图书的基本信息。2、 浏览图书信息：进入网站浏览模块后，游客可以看到大量的图书信息，当游客找到想要查询的图书后，可以点击查看更加详细的图书信息。3、 查看用户信息：可以进入个人中心，查看自己的书架，确认要购买的图书。4、 发布图书：可以通过填写图书名，规定价格，上传图书照片，对图书进行简介来发布卖出的图书，发布过的图书别的用户可以浏览并且查询到。5、 留言

29、板：填写留言，以对网站或者网站内容进行评价。发布图书查询图书信息注册用户查看个人书架留言板浏览图书信息管理员拥有特定账户密码的网站管理人员，可以对网站的信息进行审核，删除等。1、审核删除信息：可以查看网站注册用户发布的各类信息，对不恰当的信息进行删除。管理员删除违规账号删除违规留言删除违规图书4.2 概要设计4.2.1 网站结构图结构图包括系统的所有功能，如图4.1所示：图 4.1 网站结构图网站页面结构图如图4.2所示图 4.2 网站页面结构图4.2.2 网站概要设计说明本系统一共分为两大部分（前台、后台），它们之间虽然在表面上是相互独立的，但是在对数据库的访问上是紧密相连的，各个模块访问的

30、是同一个数据库，只是所访问的表不同而已。1) 后台登录如图4.2所示图 4.2 后台登陆活动图2) 后台删除信息如图4.3所示图 4.3 后台删除信息活动图3) 后台修改信息如图4.4所示图 4.4 后台修改活动图4) 发布消息如图4.5所示图 4.5 后台修改活动图5) 信息搜索如图4.6所示图 4.6 信息搜索活动图4.3 现行研究存在的问题及解决办法温州市高校二手书交易网站主要以前台界面为主，后台功能很少，还不够完善。目前我发现的主要需解决的问题有：1) 页面有部分控件样式不会定义。2) 网页不是对所有浏览器都兼容的。3) 在网页中使用网页特效（JQuery特效、Flash+Xml）4)

31、 系统的界面还需改成适合1024*768分辨率。解决方法：根据每个需求先理好业务逻辑，然后运用编码实现相应的功能和百度找相应的功能进行修改、研究。5 数据库设计5.1 数据库结构数据只有用数据库来管理才能有自动化管理的可能。数据的结构将影响整个管理机制的应用，而且建立以后要修改常会出现麻烦。所以一开始就要仔细慎重地搭建一个完整而合理的结构。Microsoft SQL Server数据库相对其它的数据库来说要简单容易操作些。数据库如5.1表所示。表 5.1 数据库结构表编号表名称数据库表名说明1用户信息表tbUserInfor用于存储用户帐号、密码等信息2二手书信息tbBooksInfor用于存

32、储二手书的详细信息3个人书架表tbPersonalBookshelf用于存储用户收藏的二手书信息4网站公告tbSiteNotice用于存储网站公告的详细信息5留言信息表tbMessage用于存储用户留言的内容5.2 数据库表用户信息表如5.2表所示表5.2用户信息表字段名数据类型宽度说明UserIDint主键，用户编号UserNamenvarchar50用户名Passwordnvarchar50密码Gendernvarchar50性别E-mailnvarchar50电子邮件CreadTimedatetime创建时间二手书信息表如5.3表所示表5.3用户信息表字段名数据类型宽度说明BooksID

33、int主键，书籍编号UserIDint外键，用户编号Statenvarchar50状态(求购|出售)BooksTitlenvarchar50书籍名称BooksImagenvarchar50书籍图片BooksTypenvarchar50书籍类型Authornvarchar50作者BookConcernnvarchar50出版社PublishDatenvarchar50出版日期Conditionnvarchar50新旧程度CostPricenvarchar50原价Pricenvarchar50价格Amountnvarchar50数量Areanvarchar50所在地区Telephonenvarch

34、ar50联系电话ContentBriefnvarcharMax内容简介CreateTimedatetime创建时间个人书架表如5.4表所示表5.4用户信息表字段名数据类型宽度说明RecordIDint主键，记录编号UserIDInt外键，用户编号BooksIDInt书籍编号BooksTitlenvarchar50书名CreateTimedatetime创建时间网站公告如5.5表所示表5.5用户信息表字段名数据类型宽度说明NoticeIDint主键，公告编号Titlenvarchar50标题NContentnvarcharMax内容CreadTimedatetime创建时间留言信息表如5.6表所

35、示表5.6用户信息表字段名数据类型宽度说明MessageIDint主键，留言编号BooksIDint外键，书籍编号UserIDint用户编号UserNamenvarchar50用户名MContentnvarcharMax留言内容CreadTimedatetime创建时间5.3 数据库表关系图数据库的关系如图5.1所示图 5.1 信息搜索活动图5.4 数据库设计命名规范数据库的设计的命名规则如表5.7所示：表 5.7 数据库命名规范规范名称规范形式数据库涉及字符规范采用26个英文字母（区分大小写）和09这十个自然数，加上下划线_组成，共63个字符。不能出现其他字符（注释除外）。表名称描述名称单词

36、以大写的主题开头表字段名称用英文单词描述字段存储过程名称以表明加“_”加具体操作名数据库设计文档规范所有数据库设计要写成文档，文档以模块化形式表达。SQL语句规范所有SQL关键词基本上都是大写的，比如“SELECT”等6 网站实现6.1 网站后台界面设计与布局6.1.1 后台登入界面1) 后台登入界面设计说明：后台登入界面我主要是根据网站的主题和网站前台风格设计的，前台界面主要是以蓝色系列的色调为主，所以后台登录背景为蓝色，网站为二手书交易网所以以一本书为背景框。在网页制作中，先进行页面设计，效果满意后，再进行图片的切片，最后进行页面的布局，布局好后查看页面效果。2) 后台登入界面，如图6.1

37、所示：图 6.1 后台界面3) 后台界面部分DIV+CSS布局代码统一用五号字体，宋体，源代码代码要左对齐，要用规范的格式写，注意要用缩进格式写 用户名：密码：6.1.2 信息管理界面1) 信息管理界面，使用了与后台登陆相同的背景图，小背景用了半透明的形似两张记事本的灰色模块，使整个页面更加具有科技感，也更紧贴了网站的主题2) 信息管理界面如图6.2所示：图 6.2 发布新闻界面6.2 网站前台界面设计与布局6.2.1 首页1) 温州市高校二手书交易网首页界面设想温州市高校二手书交易网首页主要采用蓝色系，在这里我大胆了运用了多种与蓝色相近的颜色对应页面进行设计，用了类似被翻阅书的页脚做了一个以

38、蓝色为主的logo,头部还放置了一个大号搜索框，以便用户能够快速搜索自己想要的书籍。头部做了jquery图片切换展示，可时时更新本图片，向用户提供了本网站最新最热门的掌柜推荐书籍。网站左侧做了图书分类，精心划分了网站所有的书籍类型，以便用户更加快速的找到自己想要的书籍。网站右侧展示了部分图书类型图片，有了书籍的图片让用户更加确定自己想要买的书，也增加了网站的美观度。在设计期中对于网站首页的构思有多种设想，经过多次的效果图对比，才做到现在大家看到的效果。2) 首页界面设计如图6.3所示：图 6.3 首页3) 首页部分DIV+CSS布局样式bodymargin:0 auto;ul,li,p mar

39、gin:0; padding:0;li list-style-type:none;.hybackground:#41a0fe;height:29px;width:100%;border-bottom:1px solid #218ffd;line-height:29px;text-align:inherit;.font14font:normal 宋体 14px;font-size:14px;.font12font:normal 宋体;font-size:12px;.dkwidth:960px;margin:0 auto;.logowidth:405px;height:96px; .sousuma

40、rgin-top:22px;width:507px;height:59px;float:left;background:url(./Images/sousu_03.gif) no-repeat;6.2.2 前台登录界面1) 用户注册界面、用户登录界面、忘记密码界面，三个界面大致相同，大背景以灰色渐变为主，中间有蓝色较立体图案，增加了界面的立体效果让整个界面更具信息时代效果。2) 界面效果如图6.4、6.5、6.6所示图 6.4 用户注册和登录界面3) 部分DIV+CSS布局样式.bgssbackground-image:url(./Images/ssbg.jpg);.logobackgroun

41、d:url(./Images/LOG-2.png ) no-repeat;height:77px;width:1100px;margin:65px auto 0px auto;.reg_tit width:980px;height:36px;padding: 0px;margin-top:0px;overflow:hidden;.reg_tit_ul1 width:460px;height:36px;padding: 0 0 0 30px;margin: 0;overflow:hidden;float:left;font-size:14px;font-weight: bold;text-align:center;.reg_tit_ul1 li display: inline;.reg_tit_ul1 li a float: left; color: #575757; padding: 13px 0 0 0; margin-right: 3px; h