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

网页设计与制作网页设计与制作 实实 验验 报报 告告 院系名称 院系名称 管理学院管理学院 专业班级 专业班级 电子商务电子商务 1010 级级 0202 班班 学生姓名 学生姓名 相栓霞相栓霞 学学 号 号 201046900629201046900629 2012 年年 5 5 月月 1111 日日 精品文档 1欢迎下载 实验一 HTML 语言实验 一 实验目的 1 掌握利用 HTML 语言编写网页的能力 2 掌握利用 HTML 语言编写表格的能力 3 掌握利用 HTML 语言编写表单的能力 二 实验课时 2 学时 三 实验内容 1 表格实验的结果 1 实验步骤编制代码如下 表格示例 A B C D E F G H I 2 运行结果 精品文档 2欢迎下载 2 表单实验的结果 1 实验步骤编制代码如下 表单 姓名 密码 性别 女 男 爱好 篮 球 精品文档 3欢迎下载 足球 乒乓 籍贯 开封 郑州 驻马店 信阳 2 运行结果 四 实验小结 通过本次试验让我感觉到实践的重要性 书本知识固然重要 但如果不把它转化为 实践 就会成为一纸空谈 在这次试验中 我通过不断地编写 调试终于掌握了编写表 格 表单 表单的能力 让我对 html 有了初步了解 精品文档 4欢迎下载 实验二 FireWorks 和 CSS 实验 一 实验目的 1 掌握为给定效果图规划切图方式的能力 2 掌握利用 FireWorks 切图的能力 3 掌握利用 CSS DIV 制作网页的能力 二 实验课时 2 课时 三 实验内容 1 规划切图方式的思路 1 选中一个图片作为将要切割的对象 2 仔细观察图片结构 将其分为 Logo 图案 导航栏 正文和版 权信息几个区域 3 观察图片中色彩单调的图片区域的规律 2 利用切图的步骤 运用 FireWorks 将图片切为自己所需要的部分和比例 如图所示 精品文档 5欢迎下载 3 CSS DIV 制作网页的结果 1 在 dreamweaver 里面编制代码如下 网页设计 课程简介 电气工程学院是高等工业学校本科非电工科类的一门重要的技术基础课 通过本 课程的学习使学生受到辩证唯物主义和爱国主义教育 获得电气技术领域中有关电工技 精品文档 7欢迎下载 术 电子技术的必要基本理论 基本知识和基本技能 了解他们的应用和发展趋势 为 学习后续课程以及从事与本专业有关的工程技术科学研究工作打下一定基础 河南工 业大学电气学院电工学课程组广大教师团结合作 严谨治学 教书育人 2 效果显示图如下 四 实验小结 通过这次试验 让我懂得了如何利用软件工具来实现网页的编制 通过对图的切割 和组合 经过了多次的失败 但最总通过不懈的坚持终于小获成功 体验到成功的快乐 也对网页制作加深了认识和兴趣 精品文档 8欢迎下载 实验三 JavaScript 实验 一 实验目的 1 掌握利用 JavaScript 编写网页动态效果的能力 2 掌握在网页中使用 JavaScript 脚本的两种方法 二 实验课时 2 课时 三 实验内容 1 计算整数阶乘实验的结果 1 编制代码如下 求数值的阶乘 function factorial anumber anumber Math floor anumber if anumber 请在文本框中输入一个整数 然后单击 计算 按钮 计算该整数的阶乘 精品文档 9欢迎下载 2 效果如下 2 下拉菜单实验的结果 1 编写 hthl 代码如下 河南工业大学 精品文档 10欢迎下载 网站首页 课程简介 课程大纲 教学大纲 授课计划 实践实训 电子课堂 电子课件 电子教材 电子教案 师资队伍 课程负责人 师资队伍 课题研究 教学录像 习题试题 习题集锦 自测题 试题库 例题精讲 参考文献 精品文档 11欢迎下载 课程申报 课程简介 本课程作为学校校级精品课程 学校在政策 资金方面都给与本课程相应支持 并已推荐本课程申报省级级精品课程 本课程作为学校校级精品课程已得到 1 万元的建设经费 在所申报课程被评为精品 课程后 从经费投入 技术平台支持等方面继续加大对精品课程建设的过程管理和质量 监督 同时鼓励品课程优质资源的开放和共享 并结合教育高地 特色专业与优秀教学 团队建设 整合相关资源形成真正特色鲜明 队伍结构合理 教学水平一流 辐射效果 好的示范课程 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 auto a link a visited a active a hover text decoration none cursor pointer 精品文档 12欢迎下载 clear clear both header 部分 logo width 100 height 83px background url image head bg gif repeat 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 background 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 hover 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 hover background url image nav hover gif no repeat pic width 100 height 222px background 025893 text align center pic img margin 0 auto middle margin 0px auto padding top 26px width 70 height auto 精品文档 13欢迎下载 text align left color CC0000 font size 18px line height 1 5 text indent 30px bottom margin 0px auto width 1351px height 80px 3 效果如下 3 表单验证实验的结果 1 代码如下 登记表 function checkIt var email document getElementById email var mobileNo document getElementById mobileNo 精品文档 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 document 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 emailError innerHTML 手机号码验证 var regExpression 86 13 d 9 15 0 1 2 3 5 6 7 8 9 d 8 18 0 5 6 7 8 9 d 8 if regExpression test mobileNo value document getElementById mobileNoError innerHTML 您输入的手机号码有误 mobileNo focus 精品文档 15欢迎下载 return false else document getElementById mobileNoError innerHTML 固话验证 var regExpression d 3 d 7 d 8 if regExpression test phoneNo value document getElementById phoneNoError innerHTML 您输入的固定号码有误 phoneNo focus return false else document getElementById phoneNoError innerHTML 身份证验证 var regExpression 1 9 d 5 1 9 d 3 0 d 1 0 2 0 1 2 d 3 0 1 d 4 d 3 A Z if regExpression test IDNo value document getElementById IDNoError innerHTML 您输入的身份证号码有误 IDNo focus return false else document getElementById IDNoError innerHTML 精品文档 16欢迎下载 登记表 用户名 性别 男 女 电子邮箱 手机号码 固定电话 身份证号 精品文档 17欢迎下载 2 效果如下 4 实验小结 通过这次试