网页制作教程.doc

通识课之课程设计课程名称 网页制作教程 （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表格）75.2源代码.76交互式网页中数据在数据库中的存取.96.1页面效果截屏（2个页面截屏放于12表格）.96.2源代码.97虚拟网站首页设计制作117.1页面效果截屏(无代码)117.2网站的盈利模式与创新说明1210 / 121页面控制1.1页面效果截屏1.2 源代码两年来第一次计算机上的作业这是第一个作业，我得好好做表明我端正的学习态度先弄个表格,开始第一步我原本是山中一颗包治百病的板蓝根我太累了，太辛苦了这是一只 心痛的 皮卡丘备注：请输入备注2 CSS布局2.1页面效果截屏2.2 源代码div.containerwidth:100%;margin:0px;border:1px solid red;line-height:100%;div.header,fiv.footerpadding: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-repeat:repeat-zptext-indent:2em;color:blue;font-size:12px;听说，微软的windows系统已经发到第十版本了，可是，我还在用win7，呜啊阿。为了让我与时代近一点，就用windows的图片做背景吧，ps一只爱犬此处省略一万字，未完待续啊啊啊但是，我跟你说啊，虽然我看起来土一点其实，我是一个有背景的人，所以我不爱随波逐流，不信你点进来看看我的身世，反正点也没用其实这才是我的个人主页，上面那个是逗傻子你的，聪明的你：就点击这里3 多媒体设计与制作 4 JS控制4.1页面效果截屏4.2源代码皮卡丘/漂浮广告的初始位置var x=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.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(floatAD(),delay);背景音乐这是一只 心痛的 皮卡丘Leaf皮卡丘是一只矮矮胖胖圆乎乎的类啮齿型神奇宝贝，全身的皮毛都是黄色的。它的耳朵很长，尖端是黑色的。它有小小的嘴巴，侧面看起来像一个数字3，还有黑色的眼睛。它的脸颊上有两个红色的圆。它的尾巴是像锯齿状的闪电，与身体相接的部分也有一片棕色的皮毛。尽管它确切来说是四足动物，更多时候它是站着并用两只后脚走路7 。住在森林中的它们通常以树果为食。它们用小小的电击把树果从树上打下来，这样就不必爬树，还可以顺带将其烤熟5交互式网页中数据在页面间的传递5.1页面效果截屏5.1源代码?phpif ($_GETaction=register) echo window.location.href=index.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: 黑体;用户名密码6交互式网页中数据在数据库中的存取6.1页面效果截屏登录界面：登录成功：6.2源代码?phpinclude connect.php;if (isset($_GETme) $username=$_POSTusername;$password=$_POSTpassword;$query = mysql_query(select * from user where username=$username and password=$password);$row=mysql_fetch_array($query,MYSQL_ASSOC);if($rowusername=admin)$username=$rowusername;echo window.location.href=index.php?username=$username;? !-登录登录UsernamePassword登录登录成功：7虚拟网站首页设计制作7.1页面效果截图7.2网站的盈利模式与创新说明网站名：你的要求我来设计这是一个给设计师与普通客户提供交流的一个平台，通过这个平台，客户可以将自己需要的东西，用规范性的语言描述后放到这个平台上，并悬赏设计师设计，如果有设计师接了这个单子，设计师设计完成后将产品模型数据发给客户。而此时网站起一个作用就是判断设计师的数据能不能满足客户的需要，如果满足，则交易达成，网站从中收取一笔手续中介费用。当然设计师也可以主动将自己的产品放到网上展示，如果有客户相中的话，交易达成后网站从中收取手续费用。创新点：这个网站的创新点在于它给客户提供了一个主动权，客户要求设计师去设计自己需要的东西，而不是以往的我们都等设计师设计好了再去挑我们能用着的东西，而这样的情况很多时候客户的满意度达不到100%，让设计师根据客户的要求去生产，既能提高客户的满意度，又能节省资源，因为产品都是根据客户要求生产的，极大的降低了浪费。