网页制作教程.doc
网页制作教程.doc
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
- 网页 制作 教程
- 资源描述：
-
通识课之课程设计 课程名称 网页制作教程 （10019601） 设计名称 你的要求我来设计 学院(系) 机械与能源工程学院 专 业 能源与动力 学生姓名 代海斌 学号 1351986 2016-2017 学年 第 1 学期 目 录 1静态网页的页面控制 1 1.1页面效果截屏 1 1.2源代码 1 2 CSS布局 2 2.1页面效果截屏 2 2.2源代码 2 3 多媒体设计与制作 4 3.1制作过程截屏（制作中间结果放在2×2表格中,无代码） 5 4 JS控制 5 4.1页面效果截屏 .5 4.2源代码 .5 5 交互式网页中数据在页面间传递 7 5.1页面效果截屏（2个页面截屏放于1×2表格） 7 5.2源代码 .7 6交互式网页中数据在数据库中的存取 .9 6.1页面效果截屏（2个页面截屏放于1×2表格） .9 6.2源代码 .9 7虚拟网站首页设计制作 11 7.1页面效果截屏(无代码) 11 7.2网站的盈利模式与创新说明 12 10 / 12 1页面控制 1.1页面效果截屏 1.2 源代码 <html> <head> <title>两年来第一次计算机上的作业</title> <head> <body background="135.jpg"> <front size=50>这是第一个作业，我得好好做表明我端正的学习态度</front> <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"> <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> </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> </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"> <p>备注： <textarea name="yj" cols="200" rows="5">请输入备注</textarea> <br> <input type="submit" value="不发布" name="submit"> <input type="reset" value="不重置"> </form> </body> </html> 2 CSS布局 2.1页面效果截屏 2.2 源代码 <html> <head> <style type="text/css">div.container {width:100%;margin:0px;border:1px solid red;line-height:100%;} div.header,fiv.footer {padding:1em;color:brown;background-color:pink;clear:left;}h1.header {padding:0;margin:0;} div.left {float:left;width:800px;margin:10;padding:1em;} div.content {margin-left:1px solid gray;padding:1em;} </style> </head> <style type="text/css"> body {background-image:url(22.jpg);background-repeat:repeat-z} p{text-indent:2em;color:blue;font-size:12px;} </style> </head> <body> <div class="container"> <div class="header"> <h1 class="header">听说，微软的windows系统已经发到第十版本了，可是，我还在用win7，呜啊阿。。。</h1><div> <div class="left"><p>为了让我与时代近一点，就用windows的图片做背景吧，ps一只爱犬</p></div> <div class="content"> <h2>此处省略一万字，未完待续啊啊啊</h2> <p>但是，我跟你说啊，虽然我看起来土一点</p> <p><a href="#"class="radio">其实，我是一个有背景的人，所以我不爱随波逐流，不信你点进来看看我的身世，反正点也没用</p> </div> <div class="footer">其实这才是我的个人主页，上面那个是逗傻子你的，聪明的你：就点击这里</div> </div> </body> </html> 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右边界 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(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> </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> </head> <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-index: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"> </div> <p style="font:italic small-caps bold 36pt,GlitzyCurl">Leaf</p> 皮卡丘是一只矮矮胖胖圆乎乎的类啮齿型神奇宝贝，全身的皮毛都是黄色的。它的耳朵很长，尖端是黑色的。它有小小的嘴巴，侧面看起来像一个数字3，还有黑色的眼睛。它的脸颊上有两个红色的圆。它的尾巴是像锯齿状的闪电，与身体相接的部分也有一片棕色的皮毛。尽管它确切来说是四足动物，更多时候它是站着并用两只后脚走路[7] 。住在森林中的它们通常以树果为食。它们用小小的电击把树果从树上打下来，这样就不必爬树，还可以顺带将其烤熟 </body> </html> <head> 5交互式网页中数据在页面间的传递 5.1页面效果截屏 5.1源代码 <?php if ($_GET['action']=="register") { echo "<script>window.location.href='index.php?flag=1'</script>"; } ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>考勤系统</title> <style type="text/css"> .container{ margin: 0; padding: 0; width: 100%; height: 100%; } .content{ width: 1000px; height: 400px; margin: 80px auto; line-height: 50px; } .imagecontent{ height: 400px; width: 600px; float: left; } .filed{ height: 400px; width: 400px; float: left; padding-top: 20px; } .filed table{ border: 0 solid; display: block; width: 300px; margin: 100px auto; } .filed input{ border-radius: 5px; font-family: '黑体'; } </style> </head> <body> <div class="container"> <div class="content" style="clear: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> <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> <tr> <td colspan="2"> <input type="submit" value="注册"> </td> </tr> </table> </form> </div> </div> </div> </body> </html> <?php $flag=$_GET['flag']; echo "恭喜页面传输过来数据是：".$flag; ?> 6交互式网页中数据在数据库中的存取 6.1页面效果截屏 登录界面： 登录成功： 6.2源代码 <?php include '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_fetch_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="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/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> <div 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 visible-ie8 visible-ie9">Password</label> <div class="input-icon"> <i class="icon-lock"></i> <input class="form-control placeholder-no-fix" type="password" name="password"/> </div> </div> <div class="form-actions"> <button type="submit" class="btn btn-info pull-right" onclick="sub()"> 登录 </button> </div> </form> </div> </body> </html> 登录成功： <?php echo "用户名：".$_GET['username']; ?> 7虚拟网站首页设计制作 7.1页面效果截图 7.2网站的盈利模式与创新说明 网站名：你的要求我来设计 这是一个给设计师与普通客户提供交流的一个平台，通过这个平台，客户可以将自己需要的东西，用规范性的语言描述后放到这个平台上，并悬赏设计师设计，如果有设计师接了这个单子，设计师设计完成后将产品模型数据发给客户。而此时网站起一个作用就是判断设计师的数据能不能满足客户的需要，如果满足，则交易达成，网站从中收取一笔手续中介费用。当然设计师也可以主动将自己的产品放到网上展示，如果有客户相中的话，交易达成后网站从中收取手续费用。 创新点：这个网站的创新点在于它给客户提供了一个主动权，客户要求设计师去设计自己需要的东西，而不是以往的我们都等设计师设计好了再去挑我们能用着的东西，而这样的情况很多时候客户的满意度达不到100%，让设计师根据客户的要求去生产，既能提高客户的满意度，又能节省资源，因为产品都是根据客户要求生产的，极大的降低了浪费。展开阅读全文
咨信网温馨提示：1、咨信平台为文档C2C交易模式，即用户上传的文档直接被用户下载，收益归上传人（含作者）所有；本站仅是提供信息存储空间和展示预览，仅对用户上传内容的表现方式做保护处理，对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿，我们不确定上传用户享有完全著作权，根据《信息网络传播权保护条例》，如果侵犯了您的版权、权益或隐私，请联系我们，核实后会尽快下架及时删除，并可随时和客服了解处理情况，尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确)，网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据，个别因单元格分列造成显示页码不一将协商解决，平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺，下载前须认真查看，确认无误后再购买，务必慎重购买；若有违法违纪将进行移交司法处理，若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传，付费前请自行鉴别，如您付费，意味着您已接受本站规则且自行承担风险，本站不进行额外附加服务，虚拟产品一经售出概不退款（未进行购买下载可退充值款），文档一经付费（服务费）、不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印，是因预览和防盗链等技术需要对页面进行转换压缩成图而已，我们并不对上传的文档进行任何编辑或修改，文档下载后都不会有水印标识（原文档上传前个别存留的除外），下载后原文更清晰；试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓；PPT和DOC文档可被视为“模板”，允许上传人保留章节、目录结构的情况下删减部份的内容；PDF文档不管是原文档转换或图片扫描而得，本站不作要求视为允许，下载前可先查看【教您几个在下载文档中可以更好的避免被坑】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用；网站提供的党政主题相关内容(国旗、国徽、党徽－－等)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
6、文档遇到问题，请及时联系平台进行协调解决，联系【微信客服】、【QQ客服】，若有其他问题请点击或扫码反馈【服务填表】；文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“【版权申诉】”，意见反馈和侵权处理邮箱：1219186828@qq.com；也可以拔打客服电话：0574-28810668；投诉电话：18658249818。
实名认证
平台协调中心【客服】
自信AI助手
微信客服
客服QQ
发送邮件
意见反馈
链接地址：https://www.zixin.com.cn/doc/3557718.html