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网站的盈利模式与创新说明 .1211 页面控制1.1 页面效果截屏1.2 源代码两年来第一次计算机上的作业这是第一个作业，我得好好做表明我端正的学习态度先弄个表格,开始第一步我原本是山中一颗包治百病的板蓝根我太累了，太辛苦了这是一只 心痛的 皮卡丘备注：请输入备注 2 CSS 布局2.1 页面效果截屏2.2 源代码div.containerwidth:100%;margin:0
3、px;border:1px solid red;line-height:100%;div.header,fiv.footer3padding:1em;color:brown;background-color:pink;clear:left;h1.headerpadding: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-repea
4、t:repeat-zptext-indent:2em;color:blue;font-size:12px;听说，微软的 windows 系统已经发到第十版本了，可是，我还在用 win7，呜啊阿。 。为了让我与时代近一点，就用windows 的图片做背景吧，ps 一只爱犬此处省略一万字，未完待续啊啊啊但是，我跟你说啊，虽然我看起来土一点其实，我是一个有背景的人，所以我不爱随波逐流，不信你点进来看看我的身世，反正点也没用其实这才是我的个人主页，上面那个是逗傻子你的，聪明的你：就点击这里43 多媒体设计与制作54 JS 控制4.1 页面效果截屏4.2 源代码皮卡丘/漂浮广告的初始位置var x=50
5、,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.doc
6、ument.getElementById(“fly“).offsetHeight;/层移动后的左边界window.document.getElementById(“fly“).style.left=x;/层移动后的上边界window.document.getElementById(“fly“).style.top=y;6/判断水平方向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(“floatA
7、D()“,delay);背景音乐这是一只 心痛的 皮卡丘Leaf皮卡丘是一只矮矮胖胖圆乎乎的类啮齿型神奇宝贝，全身的皮毛都是黄色的。它的耳朵很长，尖端是黑色的。它有小小的嘴巴，侧面看起来像一个数字 3，还有黑色的眼睛。它的脸颊上有两个红色的圆。它的尾巴是像锯7齿状的闪电，与身体相接的部分也有一片棕色的皮毛。尽管它确切来说是四足动物，更多时候它是站着并用两只后脚走路7 。住在森林中的它们通常以树果为食。它们用小小的电击把树果从树上打下来，这样就不必爬树，还可以顺带将其烤熟5 交互式网页中数据在页面间的传递5.1 页面效果截屏5.1 源代码window.location.href=index.ph
8、p?flag=1“;?考勤系统8.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: 黑体;用户名密 码?php
