电子商务专业网页制作实验报告.doc

资源描述

《网页设计与制作》实验报告院系名称：管理学院专业班级：电子商务 10级02班学生姓名：相栓霞学号： 201046900629 2012年 5 月 11 日实验一：HTML语言实验一、实验目的 1、掌握利用HTML语言编写网页的能力； 2、掌握利用HTML语言编写表格的能力； 3、掌握利用HTML语言编写表单的能力。二、实验课时 2学时三、实验内容 1、表格实验的结果（1）实验步骤编制代码如下： <html> <head><titel>表格示例</titel> <body><table border="1"> <tr><td bgcolor="#ff0000" width="200" height="50" rowspan="2" colspan="2">A</td> <td width="100" height="25">B</td> <td width="100" height="25" align="center">C</td></tr> <tr><td colspan="2" align="center">D</td></tr> <tr><td rowspan="2" align="right">E</td> <td rowspan="2" align="right">F</td> <td rowspan="2">G</td> <td>H</td></tr> <tr><td>I</td></tr> </body> </head> </html> （2）运行结果： 2、表单实验的结果（1）实验步骤编制代码如下： <html> <head> <title>表单</title> </head> <body> <form method="POST" action="URL"> <table border="1"> <p><tr> <td width="100" height="30" align="center">姓名：</td> <td width="200" height="30" > <input type="text" name="xingming" size="20"></td> </tr></p> <p><tr> <td width="100" height="30" align="center"> 密码：</td> <td width="200" height="30" ><input type="password" name="mima" size="20"></td> </tr></p> <p><tr> <td width="100" height="30" align="center">性别：</td> <td width="200" height="30" > <input type="radio" name="xingbie" value="remale" checked >女 <input type="radio" value="male" name="xingbie">男</td> </tr></p> <p><tr> <td width="100" height="30" align="center">爱好：</td> <td width="200" height="30" > <input type="checkbox" name="checkbox" value="basketble" checked>篮球 <input type="checkbox" name="aihao" value="footble">足球 <input type="checkbox" name="aihao" value="pingpang">乒乓</td> </tr></p> <p><tr> <td width="100" height="30" align="center">籍贯：</td> <td width="200" height="30" ><select size="1" name="jiguan"> <option selected>开封</option> <option>郑州</option> <option>驻马店</option> <option>信阳</option> </select></td> </tr></p> <p><tr> <td width="100" height="30" ></td> <td width="200" height="30" ><input type="submit" value="提交" name="tijiao"> <input type="reset" value="重置" name="chongzhi"></td> </tr></p></table> </form> </body> </html> （2）运行结果：四、实验小结通过本次试验让我感觉到实践的重要性，书本知识固然重要，但如果不把它转化为实践，就会成为一纸空谈。在这次试验中，我通过不断地编写，调试终于掌握了编写表格，表单、表单的能力，让我对html有了初步了解。实验二：FireWorks和CSS实验一、实验目的 1、掌握为给定效果图规划切图方式的能力； 2、掌握利用FireWorks切图的能力； 3、掌握利用CSS+DIV制作网页的能力。二、实验课时 2课时三、实验内容 1、规划切图方式的思路（1）选中一个图片作为将要切割的对象（2）仔细观察图片结构，将其分为Logo 图案、导航栏、正文和版权信息几个区域（3）观察图片中色彩单调的图片区域的规律 2、利用切图的步骤运用FireWorks将图片切为自己所需要的部分和比例，如图所示： 3、 CSS+DIV制作网页的结果（1）在dreamweaver里面编制代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>网页设计</title> <style type="text/css">  </style> </head> <body> <div id="apDiv1"></div> <div id="apDiv2"><img src="images/效果图_r4_c1.png" width="253" height="344" /></div> <div id="apDiv3"><img src="images/图片1_r4_c3.png" width="243" height="35" /><img src="images/效果图_r3_c2.png" width="105" height="35" /> <img src="images/效果图_r3_c3.png" width="106" height="35" /> <img src="images/效果图_r3_c4.png" width="106" height="35" /> <img src="images/效果图_r3_c5.png" width="106" height="35" /> <img src="images/效果图_r3_c6.png" width="106" height="35" /> <img src="images/效果图_r3_c7.png" width="106" height="36" /> <img src="images/效果图_r3_c7.png" width="106" height="35" /> <img src="images/效果图_r3_c8.png" width="106" height="35" /> <img src="images/图片1_r4_c3.png" width="247" height="35" /></div> <div id="apDiv4"> <img src="images/效果图_r4_c1.png" width="253" height="344" /></div> <div id="apDiv5"> <p> 课程简介</p> <p>电气工程学院是高等工业学校本科非电工科类的一门重要的技术基础课，通过本课程的学习使学生受到辩证唯物主义和爱国主义教育，获得电气技术领域中有关电工技术、电子技术的必要基本理论、基本知识和基本技能，了解他们的应用和发展趋势，为学习后续课程以及从事与本专业有关的工程技术科学研究工作打下一定基础。河南工业大学电气学院电工学课程组广大教师团结合作、严谨治学、教书育人...........</p> </div> <div id="apDiv6"><img src="图片8.jpg" width="842" height="190" /></div> <div id="apDiv7"><img src="images/untitled.jpg" width="1367" height="101" /></div> <img src="images/效果图_r1_c1.png" width="1352" height="83" /><li></li> </body> </html> （2）效果显示图如下：四、实验小结通过这次试验，让我懂得了如何利用软件工具来实现网页的编制，通过对图的切割和组合，经过了多次的失败，但最总通过不懈的坚持终于小获成功，体验到成功的快乐。也对网页制作加深了认识和兴趣。实验三： JavaScript实验一、实验目的 1、掌握利用JavaScript编写网页动态效果的能力； 2、掌握在网页中使用JavaScript脚本的两种方法。二、实验课时 2课时三、实验内容 1、计算整数阶乘实验的结果（1）编制代码如下： <html> <head><title>求数值的阶乘</title> <script language="javascript" type="text/javascript">  </script> </head> <body> <h2>请在文本框中输入一个整数，然后单击“计算”<br>按钮，计算该整数的阶乘。</h2> <form name="myform"> <input name="factorial" value=""><p> <input type="button" value="计算" onclick="ss()"><p> </form> </body> </ html> （2）效果如下： 2、下拉菜单实验的结果 (1) 编写hthl代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>河南工业大学</title> <link rel="stylesheet" href="header.css" type="text/css" /> </head> <body> <div id="header"> <div id="logo"> <img src="image/logo.jpg" alt="河南工业大学" width="857" height="82"/> </div> <div id="menu"> <ul> <li><a href="#">网站首页</a></li> <li><a href="#">课程简介</a></li> <li> <a>课程大纲</a> <ul> <li><a href="#">教学大纲</a></li> <li><a href="#">授课计划</a></li> <li><a href="#">实践实训</a></li> </ul> </li> <li> <a>电子课堂</a> <ul> <li><a href="#">电子课件</a></li> <li><a href="#">电子教材</a></li> <li><a href="#">电子教案</a></li> </ul> </li> <li> <a>师资队伍</a> <ul> <li><a href="#">课程负责人</a></li> <li><a href="#">师资队伍</a></li> <li><a href="#">课题研究</a></li> </ul> </li> <li><a href="#">教学录像</a></li> <li> <a>习题试题</a> <ul> <li><a href="#">习题集锦</a></li> <li><a href="#">自测题</a></li> <li><a href="#">试题库</a></li> <li><a href="#">例题精讲</a></li> </ul> </li> <li><a href="#">参考文献</a></li> <li><a href="#">课程申报</a></li> </ul> </div> <div id="pic"> <img src="image/pic.jpg" width="951"; height="222" alt="" /> </div> </div> <div class="middle"> <p align="center"> 课程简介</p> <p>本课程作为学校校级精品课程，学校在政策、资金方面都给与本课程相应支持，并已推荐本课程申报省级级精品课程。</p> <p>本课程作为学校校级精品课程已得到1万元的建设经费，在所申报课程被评为精品课程后，从经费投入、技术平台支持等方面继续加大对精品课程建设的过程管理和质量监督，同时鼓励品课程优质资源的开放和共享，并结合教育高地、特色专业与优秀教学团队建设，整合相关资源形成真正特色鲜明、队伍结构合理、教学水平一流、辐射效果好的示范课程。</p> </div> <div class="bottom"><img src="image/bottom.png" border="0"/ ></div> </div> </body> </html> (2) 编写css文件如下： @charset "utf-8"; /* CSS Document */ *{font-size:16px; font-family:微软雅黑; color:#333; margin:0; padding:0; } Body { background:url(image/pd_r7_c2.png) repeat-y; width: 100%; height:auto } a:link,a:visited,a:active,a:hover{ text-decoration:none; cursor:pointer; } .clear{ clear:both; } /*header部分*/ #logo{ width:100%; height:83px; background:url(image/head_bg.gif) repeat-x; text-align:center; } #logo img{ margin:0 auto; } #menu{ height:41px; width:100%; background:url(image/nav_bg2.gif) repeat-x; } #menu ul{ list-style:none; margin-left:auto; margin-right:auto; width:954px; } #menu ul li{ float:left;width:106px; height:34px; margin-top:7px; position:relative; } #menu ul li a{ background:url(image/nav_bg1.gif) no-repeat bottom; font: bold 16px "微软雅黑"; line-height:30px; color:#fff; display:block; text-align:center; } #menu ul li a:hover{ background:url(image/nav_hover.gif) no-repeat;} #menu ul li ul{ display:none;} #menu ul li:hover ul{ display:block; position:absolute; } #menu ul li:hover ul li { float:none; width:105px; height:28px; margin:0px;} #menu ul li:hover ul li a{ background:url(image/sec_navbg.gif) no-repeat; font:14px "微软雅黑"; color:#FFCC00; display:block; line-height:28px; } #menu ul li:hover ul li a:hover{background:url(image/nav_hover.gif) no-repeat; } #pic{ width:100%; height:222px; background:#025893; text-align:center; } #pic img{ margin:0 auto;} .middle{ margin: 0px auto; padding-top: 26px; width: 70%; height: auto; text-align: left; color: #CC0000; font-size: 18px; line-height: 1.5; text-indent:30px;} .bottom{margin: 0px auto; width: 1351px; height:80px;} （3）效果如下： 3、表单验证实验的结果（1）代码如下： <html> <head> <title>登记表</title> <script language="javascript"> function checkIt(){ var email = document.getElementById("email"); var mobileNo = document.getElementById("mobileNo"); var phoneNo=document.getElementById("phoneNo"); var IDNo=document.getElementById("IDNo"); //邮箱验证 if(email.value==null||email.value==""){ document.getElementById("emailError").innerHTML="<font color=red>请输入E-mail地址！</font>"; email.focus(); return false; }else{ document.getElementById("emailError").innerHTML=""; } var regExpression = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/; var objExp = new RegExp(regExpression); if(objExp.test(email.value)==false){ document.getElementById("emailError").innerHTML="<font color=red>您输入的E-mail地址不正确！</font>"; email.focus(); return false; }else{ document.getElementById("emailError").innerHTML=""; } //手机号码验证 var regExpression = /^(86)?((13\d{9})|(15[0,1,2,3,5,6,7,8,9]\d{8})|(18[0,5,6,7,8,9]\d{8}))$/; if(!regExpression.test(mobileNo.value)){ document.getElementById("mobileNoError").innerHTML="<font color=red>您输入的手机号码有误！</font>"; mobileNo.focus(); return false; }else{ document.getElementById("mobileNoError").innerHTML=""; } //固话验证 var regExpression=/^((\d{3})-)?((\d{7})|(\d{8}))$/; if(!regExpression.test(phoneNo.value)){ document.getElementById("phoneNoError").innerHTML="<font color=red>您输入的固定号码有误！</font>"; phoneNo.focus(); return false; }else{ document.getElementById("phoneNoError").innerHTML=""; } //身份证验证 var regExpression=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[A-Z])$/; if(!regExpression.test(IDNo.value)) { document.getElementById("IDNoError").innerHTML="<font color=red>您输入的身份证号码有误!</font>"; IDNo.focus(); return false; }else { document.getElementById("IDNoError").innerHTML=""; } } </script> </head> <body> <form action="" id="myform"> <table align="center"> <tr><td font_size="100">登记表</td></tr> <tr> <td>用户名：</td> <td><input type="text" id="name"></td> </tr> <tr> <td>性别：</td> <td><input type="radio" name="sex" id="man" value="m"/>男 <input type="radio" name="sex" id="women" value="f"/>女 </td> </tr> <tr> <td>电子邮箱：</td> <td><input type="text" id="email"><span id="emailError"></span></td> </tr> <tr> <td>手机号码：</td> <td><input type="text" id="mobileNo"><span id="mobileNoError"></span></td> </tr> <td>固定电话：</td> <td><input type="text" id="phoneNo"><span id="phoneNoError"></span></td> <tr> </tr> <tr> <td>身份证号</td> <td><input type="text" id="IDNo"><span id="IDNoError"></span></td> </tr> <tr> <td align="center" colspan="2"><input type="submit" value="提交" onclick=" return checkIt()"></td> </tr> </table> </form> </body> </html> （2）效果如下：四、实验小结通过这次试验，让我学会了把html、css、jsp语言相结合来制作网页动态效果，并初步掌握了正测表达式。也让我认识到要想真正掌握网页设计这门课程，必须要认证对待，还要有严谨的思路。最重要的是要对网页的总体结构进行设计和基础知识的掌握。虽然本次试验让我学到很多，但这只是万里长征第一步，只有在课下通过不断的学习和实践，才能真正学好这项技能。 17

展开阅读全文