网页制作教程_第1页
网页制作教程_第2页
网页制作教程_第3页
网页制作教程_第4页
网页制作教程_第5页
已阅读5页，还剩9页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、通识课之课程设计 课程名称 网页制作教程 （10019601） 设计名称 你的要求我来设计 学院(系) 机械与能源工程学院 专 业 能源与动力 学生姓名 代海斌 学号 1351986 2016-2017 学年 第 1 学期目 录1静态网页的页面控制11.1页面效果截屏11.2源代码12 CSS布局22.1页面效果截屏22.2源代码23 多媒体设计与制作43.1制作过程截屏（制作中间结果放在2×2表格中,无代码）54 JS控制54.1页面效果截屏.54.2源代码.55 交互式网页中数据在页面间传递75.1页面效果截屏（2个页面截屏放于1×2表格）75.2源代码.76交互式网页

2、中数据在数据库中的存取.96.1页面效果截屏（2个页面截屏放于1×2表格）.96.2源代码.97虚拟网站首页设计制作117.1页面效果截屏(无代码)117.2网站的盈利模式与创新说明121页面控制1.1页面效果截屏1.2 源代码<html><head><title>两年来第一次计算机上的作业</title><head><body background="135.jpg"><front size=50>这是第一个作业，我得好好做表明我端正的学习态度</front><

3、img src="9.png"align=""border="" width="50" height="35" hspace="20" vspace="20"><p><front size=30>先弄个表格,开始第一步</front><p><TABLE border=1 align="center" width="80%" height="150&

4、quot;><TR ALIGN="CENTER"><Td><front size=20>我原本是山中一颗包治百病的板蓝根</front></Td><Td><img src="1.jpg" align="" border="1" width="120" height="75" hspace="20" vspace="20"></Td>&l

5、t;/TR><TR ALIGN="CENTER"><Td><front size=20>我太累了，太辛苦了</front></Td><Td><img src="2.jpg" align="" border="1" width="120" height="75" hspace="20" vspace="20"></Td></TR&g

6、t;</TABLE><marquee scrolldelay="100"><img src="8.jpg" width=150></marquee><marquee>这是一只 心痛的 皮卡丘</marquee><p><A HREF="FONT face.html" target="_top"></A><form action="" method="post">

7、;<p>备注：<textarea name="yj" cols="200" rows="5">请输入备注</textarea><br><input type="submit" value="不发布" name="submit"><input type="reset" value="不重置"></form></body></html>

8、;2 CSS布局2.1页面效果截屏2.2 源代码<html><head><style type="text/css">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;mar

9、gin:10;padding:1em;div.contentmargin-left:1px solid gray;padding:1em;</style></head><style type="text/css">bodybackground-image:url(22.jpg);background-repeat:repeat-zptext-indent:2em;color:blue;font-size:12px;</style></head><body><div class="cont

10、ainer"><div class="header"><h1 class="header">听说，微软的windows系统已经发到第十版本了，可是，我还在用win7，呜啊阿。</h1><div><div class="left"><p>为了让我与时代近一点，就用windows的图片做背景吧，ps一只爱犬</p></div><div class="content"><h2>此处省略一

11、万字，未完待续啊啊啊</h2><p>但是，我跟你说啊，虽然我看起来土一点</p><p><a href="#"class="radio">其实，我是一个有背景的人，所以我不爱随波逐流，不信你点进来看看我的身世，反正点也没用</p></div><div class="footer">其实这才是我的个人主页，上面那个是逗傻子你的，聪明的你：就点击这里</div></div></body></html>

12、;3 多媒体设计与制作 4 JS控制4.1页面效果截屏4.2源代码<head><title>皮卡丘</title><script language="jscript" type="text/javascript">/漂浮广告的初始位置var x=50,y=60;/xin为真,则向右运动,否则向左运动./yin为真,则向右运动,否则向左运协.var xin=true,yin=true;/移动的距离var step=1;/移动的步长var delay=5;function floatAD()/L左边界,T右边界

13、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;/层移动

14、后的上边界window.document.getElementById("fly").style.top=y;/判断水平方向x=x+step*(xin?1:-1);/到达边界后的处理if(x<L)xin=true;x=L;if(x>R)xin=false;x=R/判断生直方向y=y+step*(yin?1:-1);/到达边界后的处理if(y<T)yin=true;y=T;if(y>B)yin=false;y=B;/隔多少时间调用一次setTimeout("floatAD()",delay);</script></

15、head><body onload="floatAD()"><div id="fly" style="position:absolute; left:260px; top:180px; width:295px; height:176px; z-index:1;"><img src="8.jpg" width="295" height="176"/></div></body></html></h

16、ead><body onload="floatAD()"><body background="皮卡丘.jpg"><body><BGSOUND src="1001.mid" autostart=true loop=infinite>背景音乐</BODY><div id="fly" style="position:absolute; left:16px; top:80px; width:150px; height:100px; z-ind

17、ex:1;"><marquee scrolldelay="100"><img src="8.jpg" width=150></marquee><marquee>这是一只 心痛的 皮卡丘</marquee><p><A HREF="FONT face.html" target="_top"></A><form action="" method="post">

18、</div><p style="font:italic small-caps bold 36pt,GlitzyCurl">Leaf</p>皮卡丘是一只矮矮胖胖圆乎乎的类啮齿型神奇宝贝，全身的皮毛都是黄色的。它的耳朵很长，尖端是黑色的。它有小小的嘴巴，侧面看起来像一个数字3，还有黑色的眼睛。它的脸颊上有两个红色的圆。它的尾巴是像锯齿状的闪电，与身体相接的部分也有一片棕色的皮毛。尽管它确切来说是四足动物，更多时候它是站着并用两只后脚走路7 。住在森林中的它们通常以树果为食。它们用小小的电击把树果从树上打下来，这样就不必爬树，还可以顺带将其烤熟

19、</body></html><head>5交互式网页中数据在页面间的传递5.1页面效果截屏5.1源代码<?phpif ($_GET'action'="register") echo "<script>window.location.href='index.php?flag=1'</script>"?><!DOCTYPE html><html lang="en"><head><meta cha

20、rset="UTF-8"><title>考勤系统</title><style type="text/css">.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;widt

21、h: 400px;float: left;padding-top: 20px;.filed tableborder: 0 solid;display: block;width: 300px;margin: 100px auto;.filed inputborder-radius: 5px;font-family: '黑体'</style></head><body><div class="container"><div class="content" style="clear:

22、both;"><div class="imagecontent"><img src="bgimg.jpg" width="600" height="400" alt=""></div><div class="filed"><form action="?action=register" method="post"><table><tr>&l

23、t;td><strong>用户名</strong></td><td><input type="text" name="username"></td></tr><tr><td><strong>密码</strong></td><td><input type="password" name="password"></td></tr&

24、gt;<tr><td colspan="2"><input type="submit" value="注册"></td></tr></table></form></div></div></div></body></html><?php$flag=$_GET'flag'echo "恭喜页面传输过来数据是：".$flag;?>6交互式网页中数据在数据

25、库中的存取6.1页面效果截屏登录界面：登录成功：6.2源代码<?phpinclude 'connect.php'if (isset($_GET'me') $username=$_POST'username'$password=$_POST'password'$query = mysql_query("select * from user where username='$username' and password='$password'");$row=mysql_fetc

26、h_array($query,MYSQL_ASSOC);if($row'username'="admin")$username=$row'username'echo "<script>window.location.href='index.php?username=$username'</script>"?><!DOCTYPE html><!-if !IE><!-> <html lang="en" class=&qu

27、ot;no-js"> <!-<!endif-><head><meta charset="utf-8" /><title>登录</title><link href="bootstrap.min.css" rel="stylesheet" type="text/css"/><link href="login.css" rel="stylesheet" type="text

28、/css"/></head><body class="login"><div class="logo"></div><div class="content"><form class="login-form" action="?me=dologin" method="post"><h3 class="form-title">登录</h3><d

29、iv class="form-group"><label class="control-label visible-ie8 visible-ie9">Username</label><div class="input-icon"><i class="icon-user"></i><input class="form-control placeholder-no-fix" type="text" name="username"/></div></div><div class="form-group"><label class="control-label visi

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论