《网页设计与制作》实验报告.doc
《《网页设计与制作》实验报告.doc》由会员分享，可在线阅读，更多相关《《网页设计与制作》实验报告.doc（23页珍藏版）》请在咨信网上搜索。
《网页设计与制作》 实 验 报 告 院系名称： 管理学院 专业班级： 电子商务XXXX 学生姓名： XXX 学 号： XXXXXXXX 项目 实验一 （25分） 实验二 （35分） 实验三 （40分） 总分 （100分） 得分 2016年 5 月 实验一：HTML语言实验 一、实验目的 1、掌握利用HTML语言编写网页的能力； 2、掌握利用HTML语言编写表格的能力； 3、掌握利用HTML语言编写表单的能力。 二、实验课时 2学时 三、实验内容 1、表格实验的结果 <html> <head><title>表格</title> </head> <body> <table border="1" width="600" height="300" align="center"> <tr> <td rowspan="2" colspan="2" bgcolor="#FF0000">A</td> <td width="29%">B</td> <td width="24%" align="center">C</td> </tr> <tr> <td colspan="2" align="center">D</td> </tr> <tr> <td width="24%" align="right" rowspan="2">E</td> <td width="19%" align="right" rowspan="2">F</td> <td width="29%" rowspan="2">G</td> <td width="24%">H</td> </tr> <tr> <td width="24%">I</td> </tr> </table> </body> </html> 2、表单实验的结果 <html> <head><title>表单</title> </head> <body> <form method="POST" action=""> <table border="1" width="500" height="300" align="center"> <tr> <td width="189" align="center">姓名：</td> <td> <p><input type="text" name="xingming" size="20"></p> </td> </tr> <tr> <td width="189" align="center">密码：</td> <td> <input type="password" name="mima" size="20"> </td> </tr> <tr> <td width="189" align="center">性别：</td> <td> <input type="radio" value="xingbie" checked name="female">女 <input type="radio" name="xingbie" value="male">男 </td> </tr> <tr> <td width="189" align="center">爱好：</td> <td> <input type="checkbox" name="aihao1" value="js">篮球 <input type="checkbox" name="aihao2" value="ds" checked>足球 <input type="checkbox" name="aihao3" value="sw">乒乓球 </td> </tr> <tr> <td width="189" align="center">籍贯：</td> <td><select size="1" name="jiguan"> <option>郑州</option> <option>洛阳</option> <option selected>开封</option> </select> </td> </tr> <tr> <td align="center" colspan="2"> <input type="submit" value="提交" name="B1"> <input type="reset" value="重置" name="B2"> </td> </tr> </table> </form> </body> </html> 四、实验小结 HTML语言是网页制作的基础，而利用表格布局是重中之重。在这两个实验中，第一个是要注重表格的宽高以及colspan和rowspan的设置，第二个是要注重表单的样式，其中要注意默认选项的设置，单选框name属性值相同，而复选框name属性值应该不同。 本次实验也让我更加注重细节，一遍遍的修改也使我更熟悉HTML语言以及编码的设置，这对于网页制作这门学科来说是一个铺垫。 实验二：FireWorks和CSS实验 一、实验目的 1、掌握为给定效果图规划切图方式的能力； 2、掌握利用FireWorks切图的能力； 3、掌握利用CSS+DIV制作网页的能力。 二、实验课时 4学时 三、实验内容 1、规划切图方式的思路 了解网页布局结构，将网页划分为几部分，其中导航条为一部分，将其各项分开切图。其余部分根据实际划分开。 2、利用FireWorks切图的步骤 第一步：打开FireWorks切图软件，打开网页图片。 第二步：点击切片工具将图片切为所需大小和比例。 第三步：点击文件选项卡下的导出，选择导出为CSS层（htm），勾选修剪图像和将图像放入子文件夹，点击导出。 3、CSS+DIV制作网页的结果 <html> <head><title>效果图.jpg</title> <body bgcolor="#ffffff"> <style type="text/css"> body{} .top{margin:0 auto 0 0;border:0 auto;text-align:center;width: 1008px; height:83px} .topmain{margin:0 auto 0 0;width:px;height:83px;text-align:center} .topmain ul{margin:0 auto 0 0;padding:0px;text-align:center} .topmain ul li{width:83px;height:45px;list-style-type:none;float:left} .topmain ul li a{width:83px;height:45px} .topmain.one{width:77px;height:45px;float:left} .topmain.two{width:106px;height:45px;float:left} .content1{margin:0 auto 0 0;border:0px;text-align:center; width:1008px; height:257px} .content2{margin:0 auto 0 0;padding:10px;border:0px;text-align:left; color:#000;font-size:20px;line-height:30px;width:1008px;height:384px} .content2_list{margin:0 auto 0 0;padding:10px 20px;border:0px;} .bottom{margin:0 auto 0 0;border:0px;width:1008px;height:52px} </style> </head> <body> <div class="top"><img src="images/效果图_r1_c1.jpg" border="0"></div> <div class="topmain"> <ul><li class="one"><a id=aa2 href="#"><img src="images/效果图_r2_c1.jpg" border="0"></a></li> <li><a id=aa3 href="#"><img src="images/效果图_r2_c2.jpg" border="0"> </a></li> <li><a id=aa4 href="#"><img src="images/效果图_r2_c3.jpg" border="0"></a></li> <li><a id=aa5 href="#"><img src="images/效果图_r2_c4.jpg" border="0"> </a></li> <li><a id=aa6 href="#"><img src="images/效果图_r2_c5.jpg" border="0"> </a></li> <li><a id=aa7 href="#"><img src="images/效果图_r2_c6.jpg" border="0"> </a></li> <li><a id=aa8 href="#"><img src="images/效果图_r2_c7.jpg" border="0"> </a></li> <li><a id=aa9 href="#"><img src="images/效果图_r2_c8.jpg" border="0"> </a></li> <li><a id=aa10 href="#"><img src="images/效果图_r2_c9.jpg" border="0"> </a></li> <li><a id=aa11 href="#"><img src="images/效果图_r2_c10.jpg" border="0"> </a></li> <li><a id=aa12 href="#"><img src="images/效果图_r2_c11.jpg" border="0"> </a></li> <li><a id=aa13 href="#"><img src="images/效果图_r2_c12.jpg" border="0"> </a></li> <li class="two"><a id=aa14 href="#"><img src="images/效果图_r2_c13.jpg" border="0"> </a></li> </ul></div> <div class="content1"><img src="images/效果图_r3_c1.jpg" border="0"></div> <div class="content2"><div class="content2_list"><ul type="none"><li>团学 工作 管理团委实践 报告 2016-01-19<li>管理之星 管理团委工作报告 2016-01-24<li>班级风采  ； 管理团委宣传报告 2016-01-30<li>奖励资助<li>职业发展<li>社会实践<li>学生组织<li>学生活动<li>资料下载</div> </div> <div class="bottom"><img src="images/效果图_r5_c1.jpg" border="0"></div> </body> </html> 四、实验小结 在这次试验中，用fireworks切图以及用CSS+DIV布局看似简单实则不易。切图是否细致严重影响着页面布局，而对于网页的布局又要细化到各个部分的宽高。用CSS+DIV布局时不能使用绝对定位，文字布局可以使用新闻列表，要注意padding、border以及margin属性的区别与联系。尽管试了很多次，也失败了很多次，但在这个过程中我对CSS+DIV规划网页有了更深刻的认知和体验。 实验三： JavaScript实验 一、实验目的 1、掌握利用JavaScript编写网页动态效果的能力； 2、掌握在网页中使用JavaScript脚本的两种方法。 二、实验课时 2学时 三、实验内容 1、计算整数阶乘实验的结果 <html> <head><title>实验3</title> <script language="javascript" type="text/javascript"> <!-- function abc(){ var sum=1; var re; re=document.getElementById("name").value; for(var i=1;i<=re;i++){ sum*=i; } alert(sum); } //--> </script> </head> <body> <p><b>请在文本框中输入一个整数，然后单击“计算”按钮，计算该整数的阶乘。</b></p> <p><input type="text" id="name"></p> <p><input type="button" onClick="abc()" value="计算"></p> </body> </html> 2、下拉菜单实验的结果 <html> <head><title>下拉菜单</title> <script type="text/javascript"> <!-- var timeout = 500; var closetimer= 0; var ddmenuitem = 0; function mopen(id) { mcancelclosetime(); if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; ddmenuitem = document.getElementById(id); ddmenuitem.style.visibility = 'visible'; } function mclose() { if(ddmenuitem) ddmenuitem.style.visibility ='hidden'; } function mclosetime() { closetimer = window.setTimeout(mclose,timeout); } function mcancelclosetime() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null;} } document.onclick = mclose; // --> </script> <style type="text/css"> #sddm{margin:0 auto; padding: 0; z-index: 30; background-color:#1e4f9c; height:25px;} #sddm li{ margin: 0; padding: 0; list-style: none; float: left; font: bold 12px arial} #sddm li a { display: block; margin: 0 1px 0 0; padding: 4px 10px; width: 60px; background:#1e4f9c; color: #FFF; text-align: center; text-decoration: none} #sddm li a:hover { background: #1e4f9c} #sddm div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #1e4f9c; border: 1px solid #1e4f9c} #sddm div a { position: relative; display: block; margin: 0; padding: 5px 10px; width: auto; white-space: nowrap; text-align: left; text-decoration: none; background: #1e4f9c; color: #2875DE; font: 12px arial} #sddm div a:hover { background: #1e4f9c; color: #FFF} </style> </head> <body style="text-align:center"> <ul id="sddm"> <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">学院概况</a> <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#">学院简介</a> <a href="#">院长致辞</a> <a href="#">学院领导</a> <a href="#">机构设置</a> <a href="#">学院领导</a> <a href="#">机构设置</a> <a href="#">发展规划</a> <a href="#">学科建设</a> </div></li> <li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">师资队伍</a> <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#">名师风采</a> <a href="#">教学团队</a> <a href="#">人才引进</a> </div></li> <li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">人才培养</a> <div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#">本科生</a> <a href="#">硕士研究生</a> <a href="#">双学位</a> <a href="#">MBA</a> </div></li> <li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">科学研究</a> <div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#">科学项目</a> <a href="#">科研成果</a> <a href="#">科研平台</a> <a href="#">科研动态</a> </div></li> <li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">招生就业</a> <div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#">招生信息</a> <a href="#">就业指导</a> <a href="#">就业资讯</a> </div></li> <li><a href="#" onmouseover="mopen('m6')" onmouseout="mclosetime()">党群工作</a> <div id="m6" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#">党校建设</a> <a href="#">组织建设</a> <a href="#">党建理论</a> </div></li> <li><a href="#" onmouseover="mopen('m7')" onmouseout="mclosetime()">团学工作</a> <div id="m7" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#">学工队伍</a> <a href="#">规章制度</a> <a href="#">学生活动</a> </div></li> <li><a href="#" onmouseover="mopen('m8')" onmouseout="mclosetime()">合作交流</a> <div id="m8" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#">合作研究</a> <a href="#">教师互动</a> <a href="#">学生交流</a> </div></li> <li><a href="#" onmouseover="mopen('m9')" onmouseout="mclosetime()">校友风采</a> <div id="m9" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#">校友捐赠</a> <a href="#">校友留言</a> <a href="#">校友动态</a> </div></li> <li><a href="#" onmouseover="mopen('m10')" onmouseout="mclosetime()">社会服务</a> <div id="m10" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#">管理咨询</a> <a href="#">企业服务</a> </div></li> <li><a href="#" onmouseover="mopen('m11')" onmouseout="mclosetime()">明德论坛</a> <div id="m11" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#">工商讨论区</a> <a href="#">物流管理讨论区</a> <a href="#">考研之家</a> </div></li></ul> </body> </html> 3、表单验证实验的结果 <html> <head><title>验证身份证号</title> <script language="javascript" type="text/javascript"> <!-- function checkidcard() { var idcard=document.getElementById("shenfen"); var str=idcard.value; if(str==null||str=="") { alert("请输入身份证号"); idcard.focus(); } else { Var regExp=/\d{6}([12]\d{3})([01]\d)([0123]\d)(\d{4}|\d{3}[xX])/; var arr=regExp.test(str); if(arr!=true) { alert("身份证号错误"); idcard.focus(); } } } //--> </script> </head> <body> <p><b>请输入身份证号</b></p> <p><input type="text" size="18" id="shenfen"> <input type="button" value="测试" onClick="checkidcard();"></p> </body> </html> <html> <head> <title>验证固定电话</title> <script language="javascript" type="text/javascript"> <!-- function checktelnum() { var telnum=document.getElementById("guhua"); var str=telnum.value; if(str==null||str=="") { alert("请输入电话号码"); telnum.focus(); } else { Var regExp=/^((\d{3}-)?\d{8})$|^((\d{4}-)?\d{7,8})$/; if(regExp.test (str)!=true) { alert("电话号码错误"); telnum.focus(); } } } //--> </script> </head> <body> <p><b>请输入电话号码</b></p> <p><input type="text" size="13" id="guhua"> <input type="button" value="测试" onClick="checktelnum()"></p> </body> </html> <html> <head><title>验证E-mail是否正确</title> <script language="javascript" type="text/javascript"> <!-- function checkemail() { var email=document.getElementById("dianyou"); var str=email.value; if(str==null||str=="") { alert("请输入电子邮件"); email.focus(); } else { //var regExp=/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/; varregExp=/^ ([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; var arr=regExp.test(str); if(arr==false) { alert("电子邮件错误"); email.focus(); } } } --> </script> </head> <body> <p><b>请输入E-Mail地址</b></p> <p><input type="text" id="dianyou"> <input type="button" value="测试" onClick="checkemail();"></p> </body> </html> <html> <head><title>验证手机号码是否正确</title> <script language="javascript" type="text/javascript"> <!-- function checkmobnum() { var mobnum=document.getElementById("shouji"); var str=mobnum.value; if(str==null||str=="") { alert("请输入手机号码"); mobnum.focus(); } else { varregExp=/^(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(!regExp.test(str)) { alert("手机号码错误"); mobnum.focus(); } } } --> </script> </head> <body> <p><b>请输入手机号码</b></p> <p><input type="text" id="shouji"> <input type="button" value="测试" onClick="checkmobnum();"></p> </body> </html> 四、实验小结 通过本次实验对Javascript脚本语言有了更深程度的把握，第一个求阶乘的实验利用getElementById注重函数取值。第二个下拉菜单中JS代码是固定的，只需要修改其中style样式，修改时注意超链接未被访问、正被访问、鼠标悬停等不同状态对应的设置。第三个表单验证主要侧重于对正则表达式的应用，反复修改了很多次发觉考虑仍不是那么周全，要考虑方方面面可能会出现的验证问题。 22
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
- 网页设计与制作 网页 设计 制作 实验 报告
咨信网温馨提示：1、咨信平台为文档C2C交易模式，即用户上传的文档直接被用户下载，收益归上传人（含作者）所有；本站仅是提供信息存储空间和展示预览，仅对用户上传内容的表现方式做保护处理，对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿，我们不确定上传用户享有完全著作权，根据《信息网络传播权保护条例》，如果侵犯了您的版权、权益或隐私，请联系我们，核实后会尽快下架及时删除，并可随时和客服了解处理情况，尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确)，网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据，个别因单元格分列造成显示页码不一将协商解决，平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺，下载前须认真查看，确认无误后再购买，务必慎重购买；若有违法违纪将进行移交司法处理，若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传，付费前请自行鉴别，如您付费，意味着您已接受本站规则且自行承担风险，本站不进行额外附加服务，虚拟产品一经售出概不退款（未进行购买下载可退充值款），文档一经付费（服务费）、不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印，是因预览和防盗链等技术需要对页面进行转换压缩成图而已，我们并不对上传的文档进行任何编辑或修改，文档下载后都不会有水印标识（原文档上传前个别存留的除外），下载后原文更清晰；试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓；PPT和DOC文档可被视为“模板”，允许上传人保留章节、目录结构的情况下删减部份的内容；PDF文档不管是原文档转换或图片扫描而得，本站不作要求视为允许，下载前自行私信或留言给上传者【Fis****915】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用；网站提供的党政主题相关内容(国旗、国徽、党徽－－等)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
6、文档遇到问题，请及时私信或留言给本站上传会员【Fis****915】，需本站解决可联系【 微信客服】、【 QQ客服】，若有其他问题请点击或扫码反馈【 服务填表】；文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“【 版权申诉】”（推荐），意见反馈和侵权处理邮箱：1219186828@qq.com；也可以拔打客服电话：4008-655-100；投诉/维权电话：4009-655-100。
该用户的其他文档 更多>>
AS568O形圈.pdf
职业健康监护技术规范2014（全）.doc
29257绿色水墨创意教育学术报告培训报告PPT.pptx
-
基坑验槽及地基加固处理（土木工程施工讲义第4讲）.ppt
-
吊顶、门窗及幕墙工程施工（土木工程施工讲义第21讲）.ppt
-
脚手架及垂直运输设备（土木工程施工讲义第9讲）.ppt
-
结构吊装施工（土木工程施工讲义第18讲）.ppt
-
施工组织设计实例（土木工程施工讲义第30讲）.ppt
-
起重安装机械（土木工程施工讲义第17讲）.ppt
-
施工组织概论（土木工程施工讲义第24讲）.ppt
-
模板工程施工（土木工程施工讲义第11讲）.ppt
-
流水施工（土木工程施工讲义第25讲）.ppt
-
不同人群预防新型冠状病毒感染口罩选择与使用技术指引.pdf
-
节能拼装式临时道路技术创新.ppt
-
提高轻钢龙骨模板支撑体系一次验收合格率.docx
-
建筑工地复工新型冠状病毒肺炎预防及应急预案.doc
-
节后复工安全教育培训89页.pptx
-
起重事故应急预案.doc
-
提高青安岗在安全管理中的重要作用.ppt
-
陕西省工程建设优秀QC小组活动申报表（节能拼装式临时道路技术创新）.doc
-
石材苯板保温装饰一体化施工.docx
-
陕西省工程建设QC小组活动现场评审表（节能拼装式临时道路技术创新）.doc
-
提高轻钢龙骨模板支撑体系一次验收合格率.ppt
-
石材苯板保温装饰一体化施工.ppt
-
提高青安岗在安全管理中的重要作用.docx
-
劳务纠纷及突发事件应急预案.doc
-
[中建]食物中毒安全事故应急预案.doc
-
防洪度汛演练实施方案.docx
-
管线破坏事故应急预案.doc
-
水库大坝安全应急预案.docx
-
爆炸事故应急预案(1).doc
-
防汛应急救援预案.doc
关于本文
实名认证
查看上传人更多文档
自信AI助手
微信客服
客服QQ
发送邮件
意见反馈
