1、电子商务专业网页制作实验报告 网页设计与制作实 验 报 告院系名称: 管理学院 专业班级: 电子商务 10级02班 学生姓名: 相栓霞 学 号: 0629 2012年 5 月 11 日实验一:HTML语言实验一、实验目的1、掌握利用HTML语言编写网页的能力;2、掌握利用HTML语言编写表格的能力;3、掌握利用HTML语言编写表单的能力。二、实验课时2学时三、实验内容1、表格实验的结果(1)实验步骤编制代码如下:表格示例ABCDEFGHI(2)运行结果:2、表单实验的结果(1)实验步骤编制代码如下:表单 姓名: 密码: 性别: 女 男 爱好: 篮球 足球 乒乓 籍贯: 开封 郑州 驻马店 信阳
2、 (2)运行结果:四、实验小结通过本次试验让我感觉到实践的重要性,书本知识固然重要,但如果不把它转化为实践,就会成为一纸空谈。在这次试验中,我通过不断地编写,调试终于掌握了编写表格,表单、表单的能力,让我对html有了初步了解。实验二:FireWorks和CSS实验一、实验目的1、掌握为给定效果图规划切图方式的能力;2、掌握利用FireWorks切图的能力;3、掌握利用CSS+DIV制作网页的能力。二、实验课时2课时三、实验内容 1、规划切图方式的思路(1)选中一个图片作为将要切割的对象 (2)仔细观察图片结构,将其分为Logo 图案、导航栏、正文和版权信息几个区域 (3)观察图片中色彩单调的
3、图片区域的规律2、利用切图的步骤运用FireWorks将图片切为自己所需要的部分和比例,如图所示:3、CSS+DIV制作网页的结果 (1)在dreamweaver里面编制代码如下 !DOCTYPE html PUBLIC -.(2)效果显示图如下:四、实验小结 通过这次试验,让我懂得了如何利用软件工具来实现网页的编制,通过对图的切割和组合,经过了多次的失败,但最总通过不懈的坚持终于小获成功,体验到成功的快乐。也对网页制作加深了认识和兴趣。实验三: JavaScript实验一、实验目的1、掌握利用JavaScript编写网页动态效果的能力;2、掌握在网页中使用JavaScript脚本的两种方法。
4、二、实验课时2课时三、实验内容1、计算整数阶乘实验的结果(1)编制代码如下:求数值的阶乘!- function factorial(anumber) anumber=(anumber); if (anumber0) return -1; if (anumber=0) return 1; else return(anumber*factorial(anumber-1); function ss() var va= var s=factorial(va); alert(s); lear clear:both; /*header部分*/#logo width:100%; height:83px; b
5、ackground:url(image/ repeat-x; text-align:center; #logo img margin:0 auto; #menu height:41px; width:100%; background:url(image/ 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; #m
6、enu ul li a background:url(image/ no-repeat bottom; font: bold 16px 微软雅黑; line-height:30px; color:#fff; display:block; text-align:center; #menu ul li a:hover background:url(image/ no-repeat;#menu ul li ul display:none;#menu ul li:hover ul display:block; position:absolute; #menu ul li:hover ul li flo
7、at:none; width:105px; height:28px; margin:0px;#menu ul li:hover ul li a background:url(image/ no-repeat; font:14px 微软雅黑; color:#FFCC00; display:block; line-height:28px;#menu ul li:hover ul li a:hoverbackground:url(image/ no-repeat;#pic width:100%; height:222px; background:#025893; text-align:center;
8、#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: ; text-indent:30px; .bottommargin: 0px auto; width: 1351px; height:80px;(3)效果如下:3、表单验证实验的结果(1)代码如下:登记表 function checkIt()var email = (email);
9、var mobileNo = (mobileNo); var phoneNo=(phoneNo); var IDNo=(IDNo);nnerHTML=请输入E-mail地址!; (); return false; else (emailError).innerHTML=; var regExpression = /w+(-+.w+)*w+(-.w+)*.w+(-.w+)*/; var objExp = new RegExp(regExpression); if=false) (emailError).innerHTML=您输入的E-mail地址不正确!; (); return false; e
10、lse (emailError).innerHTML=; nnerHTML=您输入的手机号码有误!; (); return false; else (mobileNoError).innerHTML=; nnerHTML=您输入的固定号码有误!; (); return false; else (phoneNoError).innerHTML=; nnerHTML=您输入的身份证号码有误!; (); return false; else (IDNoError).innerHTML=; 登记表用户名:性别:男女 电子邮箱: 手机号码: 固定电话:身份证号(2)效果如下:4、实验小结 通过这次试验,让我学会了把html、css、jsp语言相结合来制作网页动态效果,并初步掌握了正测表达式。也让我认识到要想真正掌握网页设计这门课程,必须要认证对待,还要有严谨的思路。最重要的是要对网页的总体结构进行设计和基础知识的掌握。虽然本次试验让我学到很多,但这只是万里长征第一步,只有在课下通过不断的学习和实践,才能真正学好这项技能。
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1