1、 1 设计题目： 资源共享 班 级： 学 号： 姓 名： 指导教师： 成 绩： 日期：2013-01-05 课 程 设 计 报 告 装 订 线 2 目标与内容： 目标目标： 布局资源共享页面，实现资源共享功能。资源共享分为登录、前台、后台三个界面 （省略登录界面） 。前台实现资源上传，上传至数据库，后台显示上传的资源，并且能进 行修改删除。 (1) 学会网页页面的设计和基本布局. (2) 能够使用代码布局网页. (3) 使用代码实现网页功能. (4) 能够将数据库和页面相连接. (5) 理解网页的基本制作流程. 内容内容： 本次课程设计的我的选题是：资源共享。 实现功能： 1、前台界面点击“搜
2、索”可以搜索共享资源（因页面未设计，此处省略） 。 2、资源共享过程：输入共享的资源名、选择专题名称、输入资源链接、选择共 享资源的分类。单机“资源上传” 。完成资源上传过程。 3、前台完成资源上传过程，后台显示上传的资源信息。单击“修改”可以修改上 传资源的信息。单击“删除”实现删除上传资源功能。后台界面必须分页，避免页面撑 破。 地点与软件环境： 地点：60#504 机房 软件环境： Microsoft Visual Studio 2005 Dreamweaver CS4 Photoshop CS3 SQL Server Management Studio 课程设计主要内容： 问题简析问题
3、简析： 一、页面设计一、页面设计 本次课程设计的主题有资源共享，会员管理，考试生成系统，留言板等。 首先每位同学确定自己的主题，搜集资料，整理素材，设计出符合自己主题的 页面。一般分为登录界面、前台显示界面和后台管理界面。实现前台和后台相 连接的功能。 系统效果图设计系统效果图设计: 3 需实现的资源共享的两个界面： 1、前台显示界面效果图 如图 1 ： 图 1.前台显示界面 （1） 、前台界面点击“搜索”可以搜索共享资源。 （2） 、资源共享过程：输入共享的资源名、选择专题名称、输入资源链接、选择 共享资源的分类。单机“资源上传” 。完成资源上传过程。 2、后台管理界面效果图 如图 2： 图
4、 2.后台管理界面 后台显示上传的资源信息。 可以修改上传资源的信息， 以及实现删除上传资源功能。 4 页面设计结束之后， 同学之间随机交换设计的界面， 做接下来的功能实现部 分。我将要做的是资源共享系统。 二、步骤简析二、步骤简析 布局资源共享页面，实现资源共享功能。资源共享分为登录、前台、后台三个 界面（省略登录界面） 。前台实现资源上传，上传至数据库，后台显示上传的 资源，并且能进行修改删除。 系统设计：系统设计： 一、一、 切图切图 1、首先用 Photoshop CS3 进行界面切图，将实现链接或者其他功能的文字、 图片隐藏。 2、利用切图工具 ，根据需要将页面切成几个小块。 例如：
5、前台显示界面根据需要可以切成如图 3、4、5、6 四个界面 图 3.页面顶部 图 4.显示页面 left 5 图 5.显示页面 right 图 6.页面底部 3、将页面上将要用到的图片切下来。保存到 image 文件夹。 。 二、二、 页面布局页面布局 接下来在 Dreamweaver CS4 中利用 css 将切下来的背景图片拼接在一起。 具体的 css 代码如下： 1、前台页面布局css代码：#a background-image: url(image/1.jpg); width:798px; height:119px; #b background-image: url(image/2.j
6、pg); width:169px; height:441px; #c background-image: url(image/3.jpg); width:621px; height:441px; margin-left:169px; margin-top:-441px; #d background-image: url(image/4.jpg); width:798px; height:40px; 四个层的 id 分别为 a、b、c、d。 再用链接代码将css与页面连接： 2、后台页面布局与前台类似。 后台页面布局css代码：#a background-image: url(images/1.jpg); width:700px; height:54px; #b background-image: url(images/2.jpg); width:535px; height:367px; #c bac
