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脚本的知识去实现网页的许多功能,使自己设计的页面更加合理,也更加的丰富。本次的网页设计基本实现了所要求的一些样式和功能,但还存在很多不完善的地方。本次网站设计的优缺点如下:网站规划合理,结构清晰,页面设计清晰大方,网站风格一致,。但是也存在一些问题,如素材的准备不够丰富;主页在不同的浏览的效果有差别;各框架页设计不详细;网站很大一部分功能尚未实现。以后在网页设计中一定要在多种浏览器中预览,以防止部分浏览器不兼容页面。其次就是学习一些图片视频制作处理软件,保证素材的充足和完美。
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1