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

《电子商务专业网页制作实验报告5256.pdf》由会员分享，可在线阅读，更多相关《电子商务专业网页制作实验报告5256.pdf（16页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、 网页设计与制作 实 验 报 告 院系名称：管理学院 专业班级：电子商务 10 级 02 班 学生姓名：相栓霞 学 号：0629 2012 年 5 月 11 日 实验一：HTML 语言实验 一、实验目的 1、掌握利用 HTML 语言编写网页的能力；2、掌握利用 HTML 语言编写表格的能力；3、掌握利用 HTML 语言编写表单的能力。二、实验课时 2 学时 三、实验内容 1、表格实验的结果（1）实验步骤编制代码如下：表格示例 A B C D E F G H I （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编写网页动态效果

4、的能力；2、掌握在网页中使用JavaScript脚本的两种方法。二、实验课时 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 widt

5、h:100%;height:83px;background: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:relativ

6、e;#menu 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 float:none

7、;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;#pic img margin:0 a

8、uto;.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);var mobileNo=(mobileNo);var phoneNo=(phoneN

9、o);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;else (emailError).innerHTML=;nnerHTML=您输入的手机号码有误！;();retur

10、n false;else (mobileNoError).innerHTML=;nnerHTML=您输入的固定号码有误！;();return false;else (phoneNoError).innerHTML=;nnerHTML=您输入的身份证号码有误!;();return false;else (IDNoError).innerHTML=;登记表 用户名：性别：男 女 电子邮箱：手机号码：固定电话：身份证号 （2）效果如下：四、实验小结 通过这次试验，让我学会了把 html、css、jsp 语言相结合来制作网页动态效果，并初步掌握了正测表达式。也让我认识到要想真正掌握网页设计这门课程，必须要认证对待，还要有严谨的思路。最重要的是要对网页的总体结构进行设计和基础知识的掌握。虽然本次试验让我学到很多，但这只是万里长征第一步，只有在课下通过不断的学习和实践，才能真正学好这项技能。