《网页设计与制作》实验报告-.pdf

《《网页设计与制作》实验报告-.pdf》由会员分享，可在线阅读，更多相关《《网页设计与制作》实验报告-.pdf（37页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、实训指导书页脚内容 0网页设计与制作实 验 报 告院系名称：管理学院专业班级：电子商务 10级 3班学生姓名：#学号：#2012 年5 月 25 日实训指导书页脚内容 1实验一：HTML 语言实验一、实验目的1、掌握利用 HTML 语言编写网页的能力；2、掌握利用 HTML 语言编写表格的能力；3、掌握利用 HTML 语言编写表单的能力。二、实验课时2 学时三、实验内容1、表格实验的结果 按行合并 实训指导书页脚内容 2ABCD EFGHI实训指导书页脚内容 32、表单实验的结果 实验二 姓名:密码:实训指导书页脚内容 4 性别:女 男 爱好:篮球足球 乒乓球 籍贯:实训指导书页脚内容 5 开

2、封 洛阳 郑州   四、实验小结实训指导书页脚内容 6很诚实的说，这次试验是我个人独立完成的，通过做实验才知道，做出一个表格和表单是多么的不容易，更不用说复杂的网页和网站了。我更深刻的了解了要想做出一个网站不仅要知道那些代码的含义，还要知道什么样式用什么代码，这就需要我们平时记忆和训练啦！俗话说：“熟能生巧”，要想很快的做出一个网页，需要的是平时的积累和上机操作。我用了三个两个小时的时间完成这次试验，小小的实验给了我很大启发，也提高了我对网站课程的兴趣，指明了我努力的方向。在以后的日子里，我会更加用心的学习网页设计这门课程，上课认真听讲，课下多在计算机上操作，争取取得应

3、有的收获。实验二：FireWorks 和 CSS 实验一、实验目的1、掌握为给定效果图规划切图方式的能力；2、掌握利用 FireWorks 切图的能力；3、掌握利用 CSS+DIV 制作网页的能力。二、实验课时2 课时三、实验内容1、规划切图方式的思路（1）选择一个网页，并将其保存下来；（2）利用 fireworks将其切成若干小图并保存成jpg 格式实训指导书页脚内容 7（3）应用 CSS+DIV 将切成的小图整合成网页。2、利用 FireWorks 切图的步骤（1）导入图片（2）切片，设置图片质量实训指导书页脚内容 8（3）导出切片3、CSS+DIV 制作网页的结果实训指导书页脚内容 9

4、效果图 实训指导书页脚内容 11四、实验小结在 ppt的指导下，顺利的完成了效果图的切片，掌握了 css+div制作网页的方法。通过这次试验，我了解到制作网站的艰巨性。它不仅需要技术和软件的支撑，还需要一种锲而不舍的精神和耐力。实验三：JavaScript 实验一、实验目的1、掌握利用 JavaScript 编写网页动态效果的能力；2、掌握在网页中使用JavaScript 脚本的两种方法。二、实验课时2 课时三、实验内容1、计算整数阶乘实验的结果实训指导书页脚内容 14 计算阶乘/判断输入的是否是数字function isDigit(s)var patrn=/0-91,20$/;if(!pat

5、rn.exec(s)return false;else return true;/计算阶乘函数function jiecheng()实训指导书页脚内容 15var inputvalue=document.getElementById(jiecheng);if(!isDigit(inputvalue.value)alert(你输入的不是整数或者格式错误，请重新输入);return;elsevar value=inputvalue.value;var sum=1;for(var i=1;i=value;i+)sum=sum*i;alert(sum);实训指导书页脚内容 16 请在文本框里输入一个整

6、数，然后单击“计算”按钮，计算该整数的阶乘 2、下拉菜单实验的结果 下拉菜单 实训指导书页脚内容 17实训指导书页脚内容 18 校长致辞 学校沿革 历任领导 现任领导 组织机构 统计资料 实训指导书页脚内容 19 概况 杰出人才 实训指导书页脚内容 20 本科生教育 研 究 生 教 育 留 学 生 教 育 继续教育 科研项目 科研机构 科研合作 科研成果实训指导书页脚内容 21与知识产权 学术交流 本科生招生 研 究 生 招 生 留 学 生 招 生实训指导书页脚内容 22 招聘信息 我要应聘 实训指导书页脚内容 23 校园生活 校园风光 实用信息 实训指导书页脚内容 24实训指导书页脚内容 2

7、6站点 地图实训指导书页脚内容 27 学 校 概 况 校 长 致 辞 学 校 沿 革 历 任 领 导 现 任 领 导 组 织 机 构 统 计 资 料 院 系 设 置实训指导书页脚内容 28 师 资 队 伍 概况 杰 出 人 才 教 育 教 学 本 科 生教 育 研究 生教 育 留学 生教 育 继 续 教 育实训指导书页脚内容 29 科 学 研 究 科 研 项 目 科 研 机 构 科 研 合 作 科研成果与知识产权 学 术 交 流 招 生 信 息实训指导书页脚内容 30 本科 生招生 研究 生招生 留学 生招生 人 才 招 聘 招 聘 信 息 我要应聘 走 进 清 华 校 园 生 活实训指导书页

8、脚内容 31 校 园 风 光 实 用 信 息 3、表单验证实验的结果 验证问题 function checkTel()var str=form1.tel.value;实训指导书页脚内容 32var objExp=/(d3-)?d8)$|(d4-)?d7,8)$/;if(objExp.test(str)=true)alert(您输入的电话号码合法！);elsealert(您输入的电话号码不合法！);请输入电话号码：function getBirthday()var str=form2.IDCard.value;var objExp=/d6(12d3)(01d)(0123d)d4/;实训指导书页脚

9、内容 33arr=objExp.exec(str);if(arr!=null)alert(您的身份证号合法);elsealert(您输入的身份证号码不合法！);请输入身份证号码：function checkEmail()实训指导书页脚内容 34var email=document.getElementById(email);if(email.value=null|email.value=)alert(请输入 E-mail地址！);email.focus();return;var regExpression=/w+(-+.w+)*w+(-.w+)*.w+(-.w+)*/;var objExp=n

10、ew RegExp(regExpression);if(objExp.test(email.value)=false)alert(您输入的 E-mail地址不正确！);email.focus();return;document.getElementById(myform).submit();实训指导书页脚内容 35请输入邮箱号码：请输入手机号码 function checkPhone()var mobileNo=document.getElementById(mobileNo);var regExpression=/(86)?(13d9)|(15 0,1,2,3,5,6,7,8,9d8)|(1

11、80,5,6,7,8,9d8)$/;if(!regExpression.test(mobileNo.value)alert(您输入的手机号码有误！);mobileNo.focus();return;实训指导书页脚内容 36document.getElementById(myform).submit();四、实验小结通过本次试验，我掌握利用JavaScript 编写网页动态效果的能力和在网页中使用JavaScript 脚本的两种方法，使自己的动手能力得到了很大的提高。并且认识到了仅仅掌握课本知识是不够的，还要增强自己的实际操作能力，这就需要提高自我的自学能力了，还要与老师及时沟通。我从这三次试验中收获颇多，获益很大。