收藏

下载资源 加入VIP,免费下载

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

上传人：b****4 文档编号：24641771 上传时间：2023-05-29 格式：DOCX 页数：14 大小：947.97KB

下载 相关 举报

第1页 / 共14页

第2页 / 共14页

第3页 / 共14页

第4页 / 共14页

第5页 / 共14页

点击查看更多>>

下载资源

资源描述

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

《电子商务专业网页制作实验报告.docx》由会员分享，可在线阅读，更多相关《电子商务专业网页制作实验报告.docx（14页珍藏版）》请在冰豆网上搜索。

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

 

 

《网页设计与制作》

实验报告

 

院系名称：

管理学院专业班级：

电子商务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）实验步骤编制代码如下：

姓名：

密码：

name="mima"size="20">

性别：

女

男

爱好：

篮球

足球

乒乓

籍贯：

开封

郑州

驻马店

信阳

value="提交"name="tijiao">

（2）运行结果：

四、实验小结

通过本次试验让我感觉到实践的重要性，书本知识固然重要，但如果不把它转化为实践，就会成为一纸空谈。

在这次试验中，我通过不断地编写，调试终于掌握了编写表格，表单、表单的能力，让我对html有了初步了解。

实验二：

FireWorks和CSS实验

一、实验目的

1、掌握为给定效果图规划切图方式的能力；

2、掌握利用FireWorks切图的能力；

3、掌握利用CSS+DIV制作网页的能力。

二、实验课时

2课时

三、实验内容

1、规划切图方式的思路

（1）选中一个图片作为将要切割的对象

（2）仔细观察图片结构，将其分为Logo图案、导航栏、正文和版

权信息几个区域

（3）观察图片中色彩单调的图片区域的规律

2、利用切图的步骤

运用FireWorks将图片切为自己所需要的部分和比例，如图所示：

3、CSS+DIV制作网页的结果

（1）在dreamweaver里面编制代码如下

DOCTYPEhtmlPUBLIC"-.........

（2）效果显示图如下：

四、实验小结

通过这次试验，让我懂得了如何利用软件工具来实现网页的编制，通过对图的切割和组合，经过了多次的失败，但最总通过不懈的坚持终于小获成功，体验到成功的快乐。

也对网页制作加深了认识和兴趣。

实验三：

JavaScript实验

一、实验目的

1、掌握利用JavaScript编写网页动态效果的能力；

2、掌握在网页中使用JavaScript脚本的两种方法。

二、实验课时

2课时

三、实验内容

1、计算整数阶乘实验的结果

（1）编制代码如下：

--

functionfactorial（anumber）

{anumber=（anumber）;

if（anumber<0）return-1;

if（anumber==0）return1;

elsereturn（anumber*factorial（anumber-1））;

}

functionss（）

{varva=vars=factorial（va）;

alert（s）;

}

lear{clear:

both;}

/*header部分*/

#logo{

width:

100%;height:

83px;background:

url（image/

repeat-x;text-align:

center;}

#logoimg{margin:

0auto;}

#menu{height:

41px;width:

100%;background:

url（image/

repeat-x;}

#menuul{list-style:

none;margin-left:

auto;margin-right:

auto;

width:

954px;}

#menuulli{float:

left;width:

106px;height:

34px;

margin-top:

7px;position:

relative;}

#menuullia{background:

url（image/no-repeatbottom;

font:

bold16px"微软雅黑";line-height:

30px;

color:

#fff;display:

block;text-align:

center;}

#menuullia:

hover{background:

url（image/no-repeat;}

#menuulliul{display:

none;}

#menuulli:

hoverul{display:

block;position:

absolute;}

#menuulli:

hoverulli{float:

none;width:

105px;height:

28px;margin:

0px;}

#menuulli:

hoverullia{background:

url（image/no-repeat;font:

14px"微软雅黑";color:

#FFCC00;display:

block;line-height:

28px;

}

#menuulli:

hoverullia:

hover{background:

url（image/no-repeat;

}

#pic{width:

100%;height:

222px;background:

#025893;text-align:

center;

}

#picimg{margin:

0auto;}

.middle{

margin:

0pxauto;padding-top:

26px;width:

70%;height:

auto;

text-align:

left;color:

#CC0000;font-size:

18px;line-height:

;

text-indent:

30px;}

.bottom{margin:

0pxauto;width:

1351px;height:

80px;}

（3）效果如下：

3、表单验证实验的结果

（1）代码如下：

functioncheckIt（）{

varemail=（"email"）;

varmobileNo=（"mobileNo"）;

varphoneNo=（"phoneNo"）;

varIDNo=（"IDNo"）;

nnerHTML="请输入E-mail地址！

";

（）;

returnfalse;

}else{

（"emailError"）.innerHTML="";

}

varregExpression=/\w+（[-+.]\w+）*@\w+（[-.]\w+）*\.\w+（[-.]\w+）*/;

varobjExp=newRegExp（regExpression）;

if==false）{

（"emailError"）.innerHTML="您输入的E-mail地址不正确！

";

（）;

returnfalse;

}else{

（"emailError"）.innerHTML="";

}

nnerHTML="您输入的手机号码有误！

";

（）;

returnfalse;

}else{

（"mobileNoError"）.innerHTML="";

}

nnerHTML="您输入的固定号码有误！

";

（）;

returnfalse;

}else{

（"phoneNoError"）.innerHTML="";

}

nnerHTML="您输入的身份证号码有误!

";

（）;

returnfalse;

}else{

（"IDNoError"）.innerHTML="";

}

}

登记表

用户名：

性别：

男

女

电子邮箱：

手机号码：

固定电话：

身份证号

（2）效果如下：

4、实验小结

通过这次试验，让我学会了把html、css、jsp语言相结合来制作网页动态效果，并初步掌握了正测表达式。

也让我认识到要想真正掌握网页设计这门课程，必须要认证对待，还要有严谨的思路。

最重要的是要对网页的总体结构进行设计和基础知识的掌握。

虽然本次试验让我学到很多，但这只是万里长征第一步，只有在课下通过不断的学习和实践，才能真正学好这项技能。

• 登录
• 首页
• 资源分类
• 升级会员
• 通知公告
• 帮助中心