1、.通识课之课程设计课程名称 网页制作教程 （10019601） 设计名称 你的要求我来设计 学院(系) 机械与能源工程学院 专 业 能源与动力 学生姓名 代海斌 学号 1351986 2016-2017 学年 第 1 学期.目 录1 静态网页的页面控制 .11.1页面效果截屏 .11.2源代码 .12 CSS 布局 .22.1页面效果截屏 .22.2源代码 .23 多媒体设计与制作 .43.1制作过程截屏（制作中间结果放在 22 表格中,无代码） .54 JS 控制 .54.1页面效果截屏 .54.2源代码 .55 交互式网页中数据在页面间传递 .75.1页面效果截屏（2 个页面截屏放于 12
2、 表格） .75.2源代码 .76 交互式网页中数据在数据库中的存取 .96.1页面效果截屏（2 个页面截屏放于 12 表格） .96.2源代码 .97 虚拟网站首页设计制作 .117.1页面效果截屏(无代码) .117.2网站的盈利模式与创新说明 .12.1 页面控制1.1 页面效果截屏1.2 源代码两年来第一次计算机上的作业这是第一个作业，我得好好做表明我端正的学习态度先弄个表格,开始第一步我原本是山中一颗包治百病的板蓝根我太累了，太辛苦了.这是一只 心痛的 皮卡丘备注：请输入备注 2 CSS 布局2.1 页面效果截屏2.2 源代码div.containerwidth:100%;margi
3、n:0px;border:1px solid red;line-height:100%;div.header,fiv.footerpadding:1em;color:brown;background-color:pink;clear:left;h1.header.padding:0;margin:0;div.leftfloat:left;width:800px;margin:10;padding:1em;div.contentmargin-left:1px solid gray;padding:1em;bodybackground-image:url(22.jpg);background-re
4、peat:repeat-zptext-indent:2em;color:blue;font-size:12px;听说，微软的 windows 系统已经发到第十版本了，可是，我还在用 win7，呜啊阿。 。为了让我与时代近一点，就用windows 的图片做背景吧，ps 一只爱犬此处省略一万字，未完待续啊啊啊但是，我跟你说啊，虽然我看起来土一点其实，我是一个有背景的人，所以我不爱随波逐流，不信你点进来看看我的身世，反正点也没用其实这才是我的个人主页，上面那个是逗傻子你的，聪明的你：就点击这里.3 多媒体设计与制作.4 JS 控制4.1 页面效果截屏4.2 源代码皮卡丘/漂浮广告的初始位置var x
5、=50,y=60;/xin 为真,则向右运动,否则向左运动./yin 为真,则向右运动,否则向左运协.var xin=true,yin=true;/移动的距离var step=1;/移动的步长var delay=5;function floatAD()/L 左边界,T 右边界var L=T=0;/层移动的右边界var R=window.document.body.offsetWidth-window.document.getElementById(“fly“).offsetWidth;/层移动的下边界var B=window.document.body.offsetHeight-window.
6、document.getElementById(“fly“).offsetHeight;/层移动后的左边界window.document.getElementById(“fly“).style.left=x;/层移动后的上边界window.document.getElementById(“fly“).style.top=y;/判断水平方向.x=x+step*(xin?1:-1);/到达边界后的处理if(xR)xin=false;x=R/判断生直方向y=y+step*(yin?1:-1);/到达边界后的处理if(yB)yin=false;y=B;/隔多少时间调用一次setTimeout(“flo
7、atAD()“,delay);背景音乐这是一只 心痛的 皮卡丘Leaf皮卡丘是一只矮矮胖胖圆乎乎的类啮齿型神奇宝贝，全身的皮毛都是黄色的。它的耳朵很长，尖端是黑色的。它有小小的嘴巴，侧面看起来像一个数字 3，还有黑色的眼睛。它的脸颊上有两个红色的圆。它的尾巴是像锯齿状的闪电，与身体相接的部分也有一片棕色的皮毛。尽管它确切来说是四足动物，更多时候它是站着并用两只后脚走路7 。住在森林中.的它们通常以树果为食。它们用小小的电击把树果从树上打下来，这样就不必爬树，还可以顺带将其烤熟5 交互式网页中数据在页面间的传递5.1 页面效果截屏5.1 源代码window.location.href=index
8、.php?flag=1“;?考勤系统.containermargin: 0;padding: 0;width: 100%;height: 100%;.contentwidth: 1000px;height: 400px;margin: 80px auto;line-height: 50px;.imagecontentheight: 400px;width: 600px;float: left;.filedheight: 400px;width: 400px;float: left;padding-top: 20px;.filed tableborder: 0 solid;display: block;width: 300px;margin: 100px auto;.filed inputborder-radius: 5px;font-family: 黑体;用户名密 码
