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

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

1、网页设计与制作实 验 报 告院系名称：管理学院专业班级：电子商务 10 级 02 班学生姓名：相栓霞学号： 201046900629 2012 年 5 月 11 日名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 19 页 - - - - - - - - - 精品文档。1欢迎下载实验一： HTML 语言实验一、实验目的1、掌握利用 HTML 语言编写网页的能力；2、掌握利用 HTML 语言编写表格的能力；3、掌握利用 HTML 语言编写表单的能力。二、实验课时2 学时三、实

2、验内容1、表格实验的结果（1）实验步骤编制代码如下： 表格示例 A B C D E F G H I （2）运行结果：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 19 页 - - - - - - - - - 精品文档。2欢迎下载2、表单实验的结果（1）实验步骤编制代码如下： 表单 姓名： 密码： 性别： 女 男 爱好： 篮球名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - -

3、- - 第 3 页，共 19 页 - - - - - - - - - 精品文档。3欢迎下载 足球 乒乓 籍贯： 开封 郑州 驻马店 信阳 （2）运行结果：四、实验小结通过本次试验让我感觉到实践的重要性，书本知识固然重要，但如果不把它转化为实践，就会成为一纸空谈。在这次试验中，我通过不断地编写，调试终于掌握了编写表格，表单、表单的能力，让我对html 有了初步了解。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 19 页 - - - - - - - - - 精品文档。4欢迎

4、下载实验二： FireWorks 和 CSS实验一、实验目的1、掌握为给定效果图规划切图方式的能力；2、掌握利用 FireWorks 切图的能力；3、掌握利用 CSS+DIV 制作网页的能力。二、实验课时2 课时三、实验内容 1 、规划切图方式的思路（1）选中一个图片作为将要切割的对象（2）仔细观察图片结构，将其分为Logo 图案、导航栏、正文和版权信息几个区域（3）观察图片中色彩单调的图片区域的规律2、利用切图的步骤运用 FireWorks 将图片切为自己所需要的部分和比例，如图所示：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - -

5、 - 名师精心整理 - - - - - - - 第 5 页，共 19 页 - - - - - - - - - 精品文档。5欢迎下载3、CSS+DIV 制作网页的结果（1）在 dreamweaver里面编制代码如下 网页设计 课程简介 电气工程学院是高等工业学校本科非电工科类的一门重要的技术基础课，通过本课程的学习使学生受到辩证唯物主义和爱国主义教育，获得电气技术领域中有关电工技术、名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 19 页 - - - - - - - - -

6、 精品文档。7欢迎下载电子技术的必要基本理论、基本知识和基本技能，了解他们的应用和发展趋势，为学习后续课程以及从事与本专业有关的工程技术科学研究工作打下一定基础。河南工业大学电气学院电工学课程组广大教师团结合作、严谨治学、教书育人. （2）效果显示图如下：四、实验小结通过这次试验，让我懂得了如何利用软件工具来实现网页的编制，通过对图的切割和组合，经过了多次的失败，但最总通过不懈的坚持终于小获成功，体验到成功的快乐。也对网页制作加深了认识和兴趣。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - -

7、- 第 8 页，共 19 页 - - - - - - - - - 精品文档。8欢迎下载实验三： JavaScript实验一、实验目的1、掌握利用 JavaScript编写网页动态效果的能力；2、掌握在网页中使用JavaScript脚本的两种方法。二、实验课时2 课时三、实验内容1、计算整数阶乘实验的结果（1）编制代码如下： 求数值的阶乘 !- function factorial(anumber) anumber=Math.floor(anumber); if (anumber 请在文本框中输入一个整数，然后单击“计算”按钮，计算该整数的阶乘。名师资料总结 - - -精品资料欢迎下载 - -

8、- - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 19 页 - - - - - - - - - 精品文档。9欢迎下载 （2）效果如下：2、下拉菜单实验的结果(1) 编写 hthl 代码如下： 河南工业大学 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 19 页 - - - - - - - - - 精品文档。10欢迎下载 网站首页 课程简介 课程大纲 教学大纲 授课计划 实践实训 电子课堂 电子课件

9、 电子教材 电子教案 师资队伍 课程负责人 师资队伍 课题研究 教学录像 习题试题 习题集锦 自测题 试题库 例题精讲 参考文献 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页，共 19 页 - - - - - - - - - 精品文档。11欢迎下载 课程申报 课程简介 本课程作为学校校级精品课程，学校在政策、资金方面都给与本课程相应支持，并已推荐本课程申报省级级精品课程。 本课程作为学校校级精品课程已得到1 万元的建设经费，在所申报课程被评为精品课程后，从经费投入、技术平

10、台支持等方面继续加大对精品课程建设的过程管理和质量监督，同时鼓励品课程优质资源的开放和共享，并结合教育高地、特色专业与优秀教学团队建设，整合相关资源形成真正特色鲜明、队伍结构合理、教学水平一流、辐射效果好的示范课程。 (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:au

11、to a:link,a:visited,a:active,a:hover text-decoration:none; cursor:pointer; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 12 页，共 19 页 - - - - - - - - - 精品文档。12欢迎下载.clear clear:both; /*header 部分*/ #logo width:100%; height:83px; background:url(image/head_bg.gif) repeat

12、-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 bac

13、kground: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:h

14、over 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:hoverbackground:url(image/nav_hover.gif) no-repeat; #pic width:100%; height

15、: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; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 13 页，共 19

16、 页 - - - - - - - - - 精品文档。13欢迎下载text-indent:30px; .bottommargin: 0px auto; width: 1351px; height:80px; （3）效果如下：3、表单验证实验的结果（1）代码如下： 登记表 function checkIt() var email = document.getElementById(email); var mobileNo = document.getElementById(mobileNo); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - -

17、 - - 名师精心整理 - - - - - - - 第 14 页，共 19 页 - - - - - - - - - 精品文档。14欢迎下载 var phoneNo=document.getElementById(phoneNo); var IDNo=document.getElementById(IDNo); / 邮箱验证 if(email.value=null|email.value=) document.getElementById(emailError).innerHTML= 请输入 E-mail 地址！ ; email.focus(); return false; else docum

18、ent.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= 您输入的 E-mail 地址不正确！ ; email.focus(); return false; else document.getElementById(ema

19、ilError).innerHTML=; /手机号码验证 var regExpression = /(86)?(13d9)|(150,1,2,3,5,6,7,8,9d8)|(180,5,6,7,8,9d8)$/; if(!regExpression.test(mobileNo.value) document.getElementById(mobileNoError).innerHTML= 您输入的手机号码有误！ ; mobileNo.focus(); return false; else 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - -

20、- - 名师精心整理 - - - - - - - 第 15 页，共 19 页 - - - - - - - - - 精品文档。15欢迎下载 document.getElementById(mobileNoError).innerHTML=; /固话验证 var regExpression=/(d3)-)?(d7)|(d8)$/; if(!regExpression.test(phoneNo.value) document.getElementById(phoneNoError).innerHTML= 您输入的固定号码有误！ ; phoneNo.focus(); return false; els

21、e document.getElementById(phoneNoError).innerHTML=; / 身份证验证 var regExpression=/1-9d51-9d3(0d)|(10-2)(0|1|2d)|30-1)(d4)|d3A-Z)$/; if(!regExpression.test(IDNo.value) document.getElementById(IDNoError).innerHTML= 您输入的身份证号码有误 !; IDNo.focus(); return false; else document.getElementById(IDNoError).innerHT

22、ML=; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 16 页，共 19 页 - - - - - - - - - 精品文档。16欢迎下载 登记表 用户名： 性别： 男女 电子邮箱： 手机号码： 固定电话： 身份证号 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 17 页，共 19 页 - - - - - - - - - 精品文档。17欢迎下载 （2）效果如下：四、实验

23、小结通过这次试验，让我学会了把html 、css、jsp 语言相结合来制作网页动态效果，并初步掌握了正测表达式。也让我认识到要想真正掌握网页设计这门课程，必须要认证对待，还要有严谨的思路。最重要的是要对网页的总体结构进行设计和基础知识的掌握。虽然本次试验让我学到很多，但这只是万里长征第一步，只有在课下通过不断的学习和实践，才能真正学好这项技能。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 18 页，共 19 页 - - - - - - - - - 精品文档。18欢迎下载欢迎您的下载，资料仅供参考！致力为企业和个人提供合同协议，策划案计划书，学习资料等等打造全网一站式需求名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 19 页，共 19 页 - - - - - - - - -