《web程序设计》课程设计报告

《《web程序设计》课程设计报告》由会员分享，可在线阅读，更多相关《《web程序设计》课程设计报告（20页珍藏版）》请在金锄头文库上搜索。

1、重庆科技学院重庆科技学院Web 程序设计基础程序设计基础 课程实践报告课程实践报告学 院:_ _ 专业班级: 学生姓名: 学号: 设计地点（单位）_计算机基础自主学习中心 I304 _ _ 设计题目:_ _C 语言程序设计课件网站设计与制作 完成日期： 2015 年 1 月 4 日 指导教师评语: _ _ _ _ 成绩（五级记分制）:_ _ 指导教师（签字）:_ _ 重庆科技学院Web 程序设计基础课程设计报告1重庆科技学院重庆科技学院 课程设计任务书课程设计任务书设计题目：C 语言程序设计课件网站设计与制作学生姓名课程名称Web 程序设计基础课程实践专业班级地 点I304/I306起止时间2

2、014.12.29-2015.1. 4设 计 内 容 及 要 求为了满足教师教学资源的共享，现要求将教师的C 语言程序设计教学课件通过网 站的形式组织起来，要求： 1、网站左边用树形目录的形式显示，当点击某一个章节，就在右边显示对应的课件内容；2、至少要有 5 个页面以上； 3、网站页面和超链接应形成清晰合理的框架； 4、首页上加入日期时间显示； 5、正确规划网站的栏目结构，合理建立站点目录，见设计指导书。设 计 参 数1、 整个网站页面个数不少于 5 个； 2、 采用 CSS+DIV 进行页面布局，整个网站采用统一的 CSS； 3、 站点目录规划合理，比如，图片放在 images 下，CSS

3、 文件放在 css 目录下，各栏目放 在对应的栏目文件下； 4、 至少一段 JavaScript 代码； 5、 建议色彩搭配不多余 5 种。进 度 要 求12 月 29 日：了解设计任务、收集资料、考虑网站栏目设计 12 月 30 日：素材设计与制作或收集； 12 月 31 日-1 月 3 日：页面设计与制作； 1 月 4 日：撰写课程实践总结，作品检查、提交、答辩参 考 资 料1 房爱莲 网页设计与制作案例教程M北京：清华大学出版社，2009 年 http:/ 2文谦、赵位等 网页制作综合技术教程M北京：人民邮电出版社，2010 年 3 http:/ 4 http:/ 它说明.本表应在每次实

4、施前一周由负责教师填写二份，院系审批后交院系办备案，一份由负 责教师留用。.若填写内容较多可另纸附后。3.一题多名学生共用的，在设计内容、参 数、要求等方面应有所区别。教研室主任： 指导教师： 年 月 日重庆科技学院Web 程序设计基础课程设计报告21、网站的结构规划网站的结构规划C 语言教程网，主要分为课程简介、教学课件、视频教学、单元习题、常见问题分析、个人成果展示、学生留言以及会员注册七部分。规划详图见图 1.网站：C 语言程序设计网网站首页 index.html单 元 习 题教 学 课 件视 频 教 程课 程 简 介留 言 板常 见 问 题用 户 信 息各 章 节 课件 second.

5、html网站注册登 录界面 loading.html图 1 规划详图重庆科技学院Web 程序设计基础课程设计报告32、素材的准备素材的准备根据规划图，依次准备了如下素材。图 1. 1.jpg图 2.bg2.png 图 3.loading.jpg图 4.button1.png 图 5.button2.png图 6.button3,png 图 7.button4.png图 8.button5,png 图 9.button6.png图 10.folder1-close.gif 图 11. folder1-open.gif 图 12.line.gif图 13.folder-close.gif 图 14

6、.folder-open.gif重庆科技学院Web 程序设计基础课程设计报告43、站点建立站点建立先建一个项目文件夹“C 语言程序设计网” ，然后在里边建一个站点 mysite。打开该站点文件夹，在里边建各种文件的文件夹如下：html image jscript css_css.最后在html文件夹中存放各种网页包括框架业，在images文件夹中存放各种图片素材,在jscript文件夹中存放使用的 java 脚本文件，在css_css文件夹中存放使用的 css 样式文件。 图 15 站点文件夹：C 语言程序设计网mysite.图 3-1.站点文件夹重庆科技学院Web 程序设计基础课程设计报告5

7、4、主页面的制作主页面的制作4.14.1 主页面结构主页面结构图如下图如下：containerbannerleftrightbottomfooter图 16.主页面布局图4.24.2 主页面主要主页面主要 divdiv 如下：如下：.body background-color: #EEE; text-align: center; a:link color: #036; text-decoration: none; a:visited text-decoration: none; color: #00F; a:hover text-decoration: underline;重庆科技学院Web

8、程序设计基础课程设计报告6color: #000; a:active text-decoration: none; #container margin: 0px; padding: 0px; width: 1000px; float: none; #banner margin: 0px; padding: 0px; height: 200px; width: 1000px; background-image: url(image/1.jpg) #link width:1000px; font-size:18px; text-align:center; font-weight: bold; #l

9、ink ul margin:0px; padding:0px; list-style-type: none; #link ul li float:left; padding:0px; background-color: #4DA6FF; #link ul li a width:125px;重庆科技学院Web 程序设计基础课程设计报告7height:25px; text-decoration:none; display:block; padding:0px; color:#333; #link ul li a:hover background-color: #369; img border:0p

10、x; #left font-size: 14px; background-color: #CCC; float: left; height: 510px; width: 200px; margin: 0px; padding: 0px; #left a:active text-decoration:blink; #left a:hover text-decoration:underline; color: red #left a:visited text-decoration: none; color: green #left3 float: none; height:150px; width

11、: 200px; padding-top: 10px;重庆科技学院Web 程序设计基础课程设计报告8background-image: url(image/bg2.png); font-weight: bold; #left1 float:left; height: 351px; width: 200px; background-image: url(image/bg2.png); #left2 height: 45px; width: 200px; margin-top: 15px; #right margin: 0px; padding: 0px; height: 511px; width

12、: 799px; float:right; #right1 font-size: 12px; text-align: left; color: #666; background-color:#CCC; word-spacing: normal; height:20px; width: 779px; padding-top: 5px; padding-left: 20px; font-weight: bold; #right2 font-size: 14px; text-align: left;重庆科技学院Web 程序设计基础课程设计报告9color:#039; background-color

13、:#999; word-spacing: normal; height:20px; width: 779px; padding-top: 5px; padding-left: 20px; font-weight: bold; #right3 li font-size: 14px; text-align: left; color:#036; background-color: #F9F9F9; word-spacing: normal; height:25px; width: 789px; padding-top: 5px; padding-left: 10px; border-bottom-width: thin; border-bottom-style: dashed; border-bottom-color: #666; list-style-type:none; #footer clear:both; font-size: 16px; color: #333; background-color: #CAF2FF; text-align: right; height: 45px; width:990px; padding-top: 11px; padding-right: 10px; font-weight: bold; font