《Web程序设计》课程设计报告Word格式.docx

1、3、网站页面和超链接应形成清晰合理的框架；4、首页上加入日期时间显示；5、正确规划网站的栏目结构，合理建立站点目录，见设计指导书。设计参数1、 整个网站页面个数不少于5个；2、 采用CSS+DIV进行页面布局，整个网站采用统一的CSS；3、 站点目录规划合理，比如，图片放在images下，CSS文件放在css目录下，各栏目放在对应的栏目文件下；4、 至少一段JavaScript代码；5、 建议色彩搭配不多余5种。进度要求12月29日：了解设计任务、收集资料、考虑网站栏目设计12月30日：素材设计与制作或收集；12月31日-1月3日：页面设计与制作；1月4日：撰写课程实践总结，作品检查、提交、答

2、辩参考资料1 房爱莲网页设计与制作案例教程M北京：清华大学出版社，2009年2文谦、赵位等网页制作综合技术教程M北京：人民邮电出版社，2010年3 4 其它说明.本表应在每次实施前一周由负责教师填写二份，院系审批后交院系办备案，一份由负责教师留用。.若填写内容较多可另纸附后。3.一题多名学生共用的，在设计内容、参数、要求等方面应有所区别。教研室主任： 指导教师： 年 月 日1、 网站的结构规划C语言教程网，主要分为课程简介、教学课件、视频教学、单元习题、常见问题分析、个人成果展示、学生留言以及会员注册七部分。规划详图见图1.图1 规划详图2、 素材的准备根据规划图，依次准备了如下素材。图1.

3、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.folder-open.gif3、 站点建立 先建一个项目文件夹“C语言程序设计网”，然后在里边建一个站点mysite。打开该站点文件夹，在里边建各种文件的文件夹如下：html image jscri

4、pt css_css.最后在html文件夹中存放各种网页包括框架业，在images文件夹中存放各种图片素材,在jscript文件夹中存放使用的java脚本文件，在css_css文件夹中存放使用的css样式文件。图15站点文件夹：C语言程序设计网.mysite.图3-1.站点文件夹4、 主页面的制作4.1主页面结构图如下： 图16.主页面布局图4.2主页面主要div如下：.body background-color: #EEE; text-align: center;a:link color: #036; text-decoration: none;visited #00F;hover unde

5、rline; #000;active #container margin: 0px; padding: width: 1000px; float:#banner height: 200px; background-image: url（image/1.jpg）#link 1000px; font-size:18px;center; font-weight: bold;#link ul 0px; list-style-type:#link ul li left; #4DA6FF;#link ul li a125px;25px;none; display:block;#333;#link ul l

6、i a:hover #369;img border:#left 14px; #CCC; left; 510px;#left a:blink; hover underline; redvisited green#left3 150px; padding-top: 10px; url（image/bg2.png）;#left1 351px;#left2 45px; margin-top: 15px;#right 511px; 799px;right;#right1 12px; #666;#CCC; word-spacing: normal;20px; 779px; 5px; padding-lef

7、t: 20px;#right2 #039;#999;#right3 li#036; #F9F9F9; 789px; border-bottom-width: thin; border-bottom-style: dashed; border-bottom-color:#footer clear:both; 16px; #333; #CAF2FF; right;990px; 11px; padding-right: font-style: italic; 5、 二级页面的制作5.1登录注册页面的设计 主要div如下：#loading url（image/loading.jpg）; 625px;

8、130px; padding-bottom:.loading1 30px; line-height: 40px;.loading2 120px;5.2其他子页面的设计 以课程简介为例，其左侧采用树形目录的形式。主要div设置如下：#menu #F7F7F7;#menu li10px;#menu ul li#menu a0px solid #333;#menu a:#06F;#main #E8E8E8;#main1 margin-right: margin-left: 28px;#main2 24px;6、JavaScript功能代码的编写6.1时间日期设置代码function startTim

9、e（） var today=new Date（） var n=today.getYear（） var y=today.getMonth（） var r=today.getDate（） var h=today.getHours（） var m=today.getMinutes（） var s=today.getSeconds（） m=checkTime（m） s=checkTime（s） document.getElementById（txt）.innerHTML=（n+1900）+ 年 +（y+1）+ 月 +r+ 日 +h+ 时 +m+ 分 +s+ 秒 t=setTimeout（startTi

10、me（）,1000）function checkTime（i） if（i10） i=0+i return i6.2注册校验代码function checkname（） var val=form.xm; var errObj=document.getElementById（error_name）; if（val.value.length=0） errObj.innerHTML=用户名不能为空 ; function checkmima（） var val=form.mima1; var vall=form.mima2;error_mima if（val.value!=vall）前后密码要相同 fu

11、nction check（） var val2=form.mima1; var val3=form.mima2; var errObj1=document.getElementById（ val.focus（）; return false; else if（val3.value!=val2.value） errObj1.innerHTML= val3.focus（）; else return true;6.3树形目录代码function init（） var uls=document.getElementsByTagName（ul/取得所有ul元素 for（var i=0;iuls.lengt

12、h;i+）/循环遍历uls数组 ulsi.style.display=none function expandMenu（menu1） /取得li标签（一级菜单）下的第一个ul元素 var ul=menu1.getElementsByTagName（）0; if（ul.style.display=） ul.style.display=block/显示 else /隐藏7.设计效果图7.1主页面效果图图7-1.主页面效果图7.2态时间设置的测试图7-2.动态时间显示图7.3录注册页面效果图图7.3登录注册页面效果图7.4树形页面测试效果图图7.4树形页面测试效果图（1）图7.5形页面测试效果图（2

13、）总 结通过此次C语言程序设计的设计与制作，我不仅能够熟练的运用div布局网页结构，同时也熟练地运用了CSS样式美化网页，尤其是对网页文字的美化，是网页看上去清爽简洁，清晰明了。此外，在这次网站设计中我也运用了JAVA脚本来设计网页，尽管这部分内容较难理解，在初学的时候也没有更多的了解，但是通过此次课程设计我也经能够熟练地运用JAVA脚本的知识去实现网页的许多功能，使自己设计的页面更加合理，也更加的丰富。本次的网页设计基本实现了所要求的一些样式和功能，但还存在很多不完善的地方。本次网站设计的优缺点如下：网站规划合理，结构清晰，页面设计清晰大方，网站风格一致，。但是也存在一些问题，如素材的准备不够丰富；主页在不同的浏览的效果有差别；各框架页设计不详细；网站很大一部分功能尚未实现。以后在网页设计中一定要在多种浏览器中预览，以防止部分浏览器不兼容页面。其次就是学习一些图片视频制作处理软件，保证素材的充足和完美。