《基于wEB编程》 课程设计指导书
《基于 WEB 编程》 课程设计指导书
课程设计安排 1、设计目的: Internet在短短的的十几年内,经历了飞速的发展,互联网几乎浪潮席卷了全球的每个 角落。很多企业已经将互联网作为形象宣传、产品推销的主要手段。因此社会需要大量的网 络和网站建设的人才,这给即将踏出校门的计算机专业的毕业生提供了巨大的就业机会。那 么学生能不能把握这些机会,关键就要看学生有没有这样的能力。为此,信息工程系开设网 站建设课程设计,目的就是要使学生在已经学习和掌握相关课程的基础上,将自己的专业知 识综合运用,并将其运用于实践中,以努力提高学生在这方面的动手能力 2、设计目标: 目标是衡量学生是否取得效果的重要标志,这次课程设计的目标就是培养学生具有专业 网站初步的规划、设计、制作能力。具体表现在网站内容、功能、安全等方面合理策划和规 划:培养具有主页和二级页面的创意、设计、美工等方面的技术处理能力和具有强大的动态 效果制作能力。培养学生具有基于后台数据库的编程技术,实现客户一服务器端交互式动态 网页的制作能力 3、设计内容: WEB站点服务器的创建、配置、调试;网页制作三剑客即 Deamweaver、 Flash、 Firework 软件的运用,HIML标记语言、 JavaScript和 VbScript编程;ASP内建对象和可安装组件; SQL- Server数据库的安装与配置;结构化数据库语言SQL等 4、设计课题 制作专业性网站,学生可以从以下课题中选择自己感兴趣的课题或者自选课题。 序号 课题 要求 1、 Flash首页1个;2、静态页面制作5幅:3、网 企业网站 站计数器1个:4、产品价格的录入与查询:5、用 户的信息反馈;6、管理页面 1、 Flash首页1个;2、静态页面制作10幅;3、网 站计数器1个:4、商品价格的录入与查询:5、管 商业网站 页面: 1、 Flash首页1个:2、静态页面制作5幅;3、 站计数器1个;4、会员注册系统1个:5、留言本 政府网站 个;6、管理页面; 1、Fash首页1个:2、静态页面制作5幅:3、网 4 图书网站 站计数器1个:4、会员注册系统1个:5、图书录入 和借阅管理;6、读者意见箱一个;7、管理页面;
一、课程设计安排 1、设计目的： Internet 在短短的的十几年内，经历了飞速的发展，互联网几乎浪潮席卷了全球的每个 角落。很多企业已经将互联网作为形象宣传、产品推销的主要手段。因此社会需要大量的网 络和网站建设的人才，这给即将踏出校门的计算机专业的毕业生提供了巨大的就业机会。那 么学生能不能把握这些机会，关键就要看学生有没有这样的能力。为此，信息工程系开设网 站建设课程设计，目的就是要使学生在已经学习和掌握相关课程的基础上，将自己的专业知 识综合运用，并将其运用于实践中，以努力提高学生在这方面的动手能力。 2、设计目标： 目标是衡量学生是否取得效果的重要标志，这次课程设计的目标就是培养学生具有专业 网站初步的规划、设计、制作能力。具体表现在网站内容、功能、安全等方面合理策划和规 划；培养具有主页和二级页面的创意、设计、美工等方面的技术处理能力和具有强大的动态 效果制作能力。培养学生具有基于后台数据库的编程技术，实现客户—服务器端交互式动态 网页的制作能力。 3、设计内容： WEB 站点服务器的创建、配置、调试；网页制作三剑客即 Deamweaver、Flash、Firework 软件的运用，HTML 标记语言、JavaScript 和 VbScript 编程；ASP 内建对象和可安装组件； SQL-Server 数据库的安装与配置；结构化数据库语言 SQL 等。 4、设计课题： 制作专业性网站，学生可以从以下课题中选择自己感兴趣的课题或者自选课题。 序号 课 题 要 求 1 企业网站 1、 Flash 首页 1 个；2、静态页面制作 5 幅 ；3、 网 站计数器 1 个；4、产品价格的录入与查询； 5、用 户的信息反馈；6、管理页面 2 商业网站 1、 Flash 首页 1 个；2、静态页面制作 10 幅 ；3、 网 站计数器 1 个；4、商品价格的录入与查询；5、管理 页面； 3 政府网站 1、 Flash 首页 1 个；2、静态页面制作 5 幅 ；3、 网 站计数器 1 个；4、会员注册系统 1 个；5、留言本一 个；6、管理页面； 4 图书网站 1、 Flash 首页 1 个；2、静态页面制作 5 幅 ；3、 网 站计数器 1 个；4、会员注册系统 1 个；5、图书录入 和借阅管理；6、读者意见箱一个；7、管理页面；
1、 Flash首页1个:2、静态页面制作5幅;3、网 站计数器1个;4、会员注册系统1个:5、网上考试 教育网站 页面一个:6、管理页面 1、Fash首页1个:2、静态页面制作10幅:3、网 站计数器1个:4、会员注册系统1个:5、影视欣赏 6 娱乐网站 页面一个:6、管理页面 二、课程设计基本工作步骤 要想设计和制作出一个非常出色的网站,必须用心去把握网站建设步骤中每一个环节, 基本上可分为以下几个步骤。 l、确定网站的主题、内容、功能; 在网站设计工作之前一定要明确网站的主题(如:学习、体育、娱乐、慈善、儿童、女 性、军事、生活等等),要搞清 楚该网站应该包含哪些方面的具体内容,必须具备哪些功能等:否则就不能做到有的放 矢,制作一个出色的网站也就无从谈起了 如果是设计自己的个人主页,想要获得很高的点击访问率,确定主题一定要注意以下」 点:1、主题要小而精,千万不要面面俱到,否则给人的感觉就是没有主题,没有特色,样 样有却样样都很肤浅:2、题材最好是你自己擅长或者喜爱的内容。比如:您对足球感兴趣, 可以报道最新的战况,球星动态等;3、主题需要创新,换句话说:也就是要有自己的特色, 对于一些已经具有相当知名度的相同题材的网站,你要超过它是很非常困难的 如果是为他人、企事业单位、社会团体等设计网页,在主题的确定方面同样需要注意以 下几点:1、最好能全面的了解和掌握客户方的背景、文化、业务流程等方面的情况:2、网 站主题、内容、功能方面的需求最好由客户方以书面的形式提供;3、对于客户提出的书面 报告,每一项都要全面而深刻的理解,及时与客户进行沟通交流,切不可自以为是:这样日 后可以少走弯路。 2、网站的整体设计 网站是各个单位、部门在互联网中的门面,一个好的网站能够通过非常出色的整体风格 和版式设计将主题鲜明的表现出来;同时,页面看上去还要非常的美观。在完全了解客户的 需求后,就可以进行网站的整体风格和版式设计阶段。在设计过程中,一定要周到考虑,耐 心细致,绘制出相应的草图并附之以说明,从而形成详细而全面的设计文档资料。网站的整 体风格和版式设计完成之后,将设计资料交由客户方审核;对客户提出的意见要做好记录并 确定修改方案,经过多次的反复修订后,最终客户满意从而形成定稿,就可以开始下一阶段 的工作。 网站的整体风格和版式设计分为以下几个部分:1、网站板式设计;2、网站的目录结构 和导航栏的设计:3、数据库的设计:4、功能设计 3、网页的详细设计 (1)功能设计:功能模块的划分 (2)界面设计: 1)整体效果:区域分配、风格的设计; 2)主界面(留言的显示)的设计:LOGO的设计标题、功能菜单、客户信息、版 权信息显示区
5 教育网站 1、 Flash 首页 1 个；2、静态页面制作 5 幅 ；3、 网 站计数器 1 个；4、会员注册系统 1 个；5、网上考试 页面一个；6、管理页面； 6 娱乐网站 1、 Flash 首页 1 个；2、静态页面制作 10 幅；3、 网 站计数器 1 个；4、会员注册系统 1 个；5、影视欣赏 页面一个；6、管理页面； 二、课程设计基本工作步骤 要想设计和制作出一个非常出色的网站，必须用心去把握网站建设步骤中每一个环节， 基本上可分为以下几个步骤。 1、确定网站的主题、内容、功能； 在网站设计工作之前一定要明确网站的主题（如：学习、体育、娱乐、慈善、儿童、女 性、军事、生活等等），要搞清 楚该网站应该包含哪些方面的具体内容，必须具备哪些功能等；否则就不能做到有的放 矢，制作一个出色的网站也就无从谈起了。 如果是设计自己的个人主页，想要获得很高的点击访问率，确定主题一定要注意以下三 点：1、主题要小而精，千万不要面面俱到，否则给人的感觉就是没有主题，没有特色，样 样有却样样都很肤浅；2、题材最好是你自己擅长或者喜爱的内容。比如：您对足球感兴趣， 可以报道最新的战况，球星动态等；3、主题需要创新，换句话说：也就是要有自己的特色， 对于一些已经具有相当知名度的相同题材的网站，你要超过它是很非常困难的。 如果是为他人、企事业单位、社会团体等设计网页，在主题的确定方面同样需要注意以 下几点：1、最好能全面的了解和掌握客户方的背景、文化、业务流程等方面的情况；2、网 站主题、内容、功能方面的需求最好由客户方以书面的形式提供；3、对于客户提出的书面 报告，每一项都要全面而深刻的理解，及时与客户进行沟通交流，切不可自以为是；这样日 后可以少走弯路。 2、网站的整体设计 网站是各个单位、部门在互联网中的门面，一个好的网站能够通过非常出色的整体风格 和版式设计将主题鲜明的表现出来；同时，页面看上去还要非常的美观。在完全了解客户的 需求后，就可以进行网站的整体风格和版式设计阶段。在设计过程中，一定要周到考虑，耐 心细致，绘制出相应的草图并附之以说明，从而形成详细而全面的设计文档资料。网站的整 体风格和版式设计完成之后，将设计资料交由客户方审核；对客户提出的意见要做好记录并 确定修改方案，经过多次的反复修订后，最终客户满意从而形成定稿，就可以开始下一阶段 的工作。 网站的整体风格和版式设计分为以下几个部分：1、网站板式设计；2、网站的目录结构 和导航栏的设计；3、数据库的设计；4、功能设计。 3、网页的详细设计 （1）功能设计：功能模块的划分 （2）界面设计： 1）整体效果：区域分配、风格的设计; 2）主界面（留言的显示）的设计：LOGO 的设计标题、功能菜单、客户信息、版 权信息显示区;
3)各个子页面的设计 4)后台管理的设计:如管理员的登录界面、系统资料的修改 (3)数据库设计:数据库管理系统采用、表结构的建立: 匚字段名字段类型宽度「字段属性说明 (4)处理过程设计:第一种方案、第二种方案 4、网站的测试与发布 网站完成后在上传到服务器之前应该在安装不同浏览器的环境中进行测试,测试目 的主要是察看:1、网站是否能够在不同的浏览器下能正常打开(如: Flash动画、 JavaScript 程序等);2、测试所有的网页元素是否正常显示(如:字体、图片、色彩等);3、测试网站 中是否存在中断的链接等。如果以上测试都很正常就可以将整个网站上传到服务器中 网站的更新与维护 网站运行一段时间后,通常会出现以下问题:1、网页的内容随着时间的推移会过时: 2、先前没有发现的问题和不足逐步暴露出来。所以网站的更新与维护通常是不可少的;更 新后的网站同样需要经过测试,然后再上传到服务器中覆盖旧的文件 三、设计案例(某学院网站管理系统) 网站的整体与版式设计 (1)设计主页面(栏目的划分) 工业业本 ④团备 Fortes Meds分·mB Aires@ hte ocahosttrdexasp p 安徽工业职业技术学院 Flash动画标题 公普君 省高校学坐工作场训在共市行[2005-6-21 动态主页版式 主页版权区域 □□ Lcc intranet
3）各个子页面的设计 4）后台管理的设计：如管理员的登录界面、系统资料的修改 （3）数据库设计：数据库管理系统采用、表结构的建立： 字段名 字段类型 宽度 字段属性 说明 （4）处理过程设计：第一种方案、第二种方案 4、网站的测试与发布 网站完成后在上传到服务器之前应该在安装不同浏览器的环境中进行测试，测试目 的主要是察看：1、网站是否能够在不同的浏览器下能正常打开（如：Flash 动画、JavaScript 程序等）；2、测试所有的网页元素是否正常显示（如：字体、图片、色彩等）；3、测试网站 中是否存在中断的链接等。如果以上测试都很正常就可以将整个网站上传到服务器中。 5、网站的更新与维护 网站运行一段时间后，通常会出现以下问题：1、网页的内容随着时间的推移会过时； 2、先前没有发现的问题和不足逐步暴露出来。所以网站的更新与维护通常是不可少的；更 新后的网站同样需要经过测试，然后再上传到服务器中覆盖旧的文件。 三、设计案例（某学院网站管理系统） 1、网站的整体与版式设计 （1）设计主页面（栏目的划分） 2、 Flash 动画标题 动态主页版式 主页版权区域
(2)二级页面设计 ●新闻栏目 无标文档 Microsoft InternetExplorer 文件编辑E查看()收藏A)工具D帮助H 地址)同h如/ host/kechengshejlkechengshe利 ow_news,asp?newsid.4 转到链接” 安徹省高校学生工作培训在我市举行 ●后台用户登录 后台管理登录 姓名 密码 认证码 5697 登陆」』取消
（2）二级页面设计 ⚫ 新闻栏目 ⚫ 后台用户登录
●后台管理界面 文件伍编辑(E)查看(收藏(A)工具①)帮助心 后退··搜收Q,因,回色 地址)http://ocalhostkechenashetukechengshejadmnmanager.asp 学院网站管理系统 回到首页|退出 新闻管理 描新闻图片 新闻内容 修改删除 新闻编辑 教学即将读工在今 数学桉即将竣工 辑册除 新闻透加 用户管理 安省高校学生工作李四 省高校学生工作培训在我市举行,来 省60所高校的。。 桥加 标题管理 标题编辑 本地 granet 2、站点的目录结构设计 +-0 admin +0 css *-0 database a bottom. asp conn. asp a ￥ stage,asp ai usermana asp 注释: kechengsheji(站点根目录)、 admin(后台管理程序)、CSS(CSS样式表文件)、 database (后台数据源与数据库)、 Images(网页中的插图与动画)、 bottom. asp(页面的版权区域)、 onn. asp(数据库的链结程序)、 firstpage. asp(主页中的内容页面)、head.asp(页面中标题部 分页面)、 index. asp(网站主页)、 show news.asp(新闻栏目)。 (3)、数据库的设计
⚫ 后台管理界面 2、站点的目录结构设计 注释：kechengsheji(站点根目录)、admin（后台管理程序）、CSS（CSS 样式表文件）、database （后台数据源与数据库）、images（网页中的插图与动画）、bottom.asp（页面的版权区域）、 conn.asp（数据库的链结程序）、firstpage.asp(主页中的内容页面)、head.asp（页面中标题部 分页面）、index.asp（网站主页）、show_news.asp（新闻栏目）。 （3）、数据库的设计
●数据库中表的设计 data:数据库 打开0)M设计四)新0)X|2-建 对象 团使用计器创建表 回使用向导创建表 查询 回通过入数据创建表 里 窗体 里 □根表 里 百页 里 注释: admin(管理员帐户表)、news(新闻内容表)、ssem(站点系统信息表)、type(导 航栏标题表) 表结构的设计 ews表 tiue editor partment 安欲省高校学生工李四安欲省高枚学生工作培训在 2005-6-21 j数据信息系 教核即将或工在王五 数据总务 (自动编号 已录:H4d 共有记录数:2 dmin表 围dmm表 p&ss冒 E工a6 28 gu a486ft05530df6c 42 admin 49b859abbe56e057 〔自动编号 记录:ld」 |b*共有记录数:2
⚫ 数据库中表的设计 注释：admin（管理员帐户表）、news（新闻内容表）、system（站点系统信息表）、type（导 航栏标题表） ⚫ 表结构的设计 news 表 admin 表
system表 -Ox 回文件吧)编辑)视图①插入〔)格式@)记录②)工具①)窗口①)帮助0D ·副舀的启多以处烈泡了的…顾·② ewr1□1o er lego-type banner-type besonndfile P安徽工业积业技术原币长江西路2?05228469山Mp纽Mp//wt二进制数据长二进钊据 inage/gif application/s tp. ni 记录:4「1M共有记录数:1 “数据表”视 表 6招生就业 网站管理 admin/manager. asp 记录:14利「1M共有记录数:6 3、程序实现(部分代码) Index.asp ∥主页部分 style type="text/ a: link i color:#000000
system 表 type 表 3、程序实现（部分代码） index.asp //主页部分 head.asp //主页标题文件 安徽工业职业技术学院 <!-- a:link { color: #000000;
text-decoration none font-size: 12 isited i color:#000000 exIaecorauion. non font-size: 12 } color: #FF0000. ext-decoration: none font-size: 12px a active color:#000000 text-decoration none font-size: 121 font-size: 12px /style> button 4 border: Ipx solid #009999 style> classid=clsid: D27CDB6E-AE6D-11cf-96B8-444553540000 codebase="http://download.macromediacom/pub/shockwave/cabs/flash/swflash.cab#fversion=6,0
text-decoration: none; font-size: 12px; } a:visited { color: #000000; text-decoration: none; font-size: 12px; } a:hover { color: #FF0000; text-decoration: none; font-size: 12px; } a:active { color: #000000; text-decoration: none; font-size: 12px; } .unnamed2 { font-size: 12px; } --> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0
29,0" width="760" height="88"> src="admin/showpic asp?action=banner uality pluginspage="http://www.macromediacom/go/getflashplayer type="application/x-shockwave-flash"width=760" height=88> tablewidth="760"height="28"border=""align="center"celladding="0"celpacing="1" bordercolor=#660000 background=admin/tupian/dhl.gif class="unnamed style="border-collapse: collapse">>   a网站首页 ”> firstpage. asp ∥主页内容部分 style type="text/css"> /style> a link i
29,0" width="760" height="88"> 网站首页 | "> firstpage.asp //主页内容部分 <!-- a:link {