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

网页设计与制作实 验 报 告院系名称： 管理学院 专业班级： 电子商务XXXX 学生姓名： XXX 学 号： XXXXXXXX 项目实验一（25分）实验二（35分）实验三（40分）总分（100分）得分2016年 5 月实验一：HTML语言实验一、实验目的1、掌握利用HTML语言编写网页的能力；2、掌握利用HTML语言编写表格的能力；3、掌握利用HTML语言编写表单的能力。二、实验课时2学时三、实验内容1、表格实验的结果表格ABCDEFGH I2、表单实验的结果表单姓名：密码：性别：女  男爱好：篮球  足球  乒乓球 籍贯：郑州洛阳开封       四、实验小结HTML语言是网页制作的基础，而利用表格布局是重中之重。在这两个实验中，第一个是要注重表格的宽高以及colspan和rowspan的设置，第二个是要注重表单的样式，其中要注意默认选项的设置，单选框name属性值相同，而复选框name属性值应该不同。本次实验也让我更加注重细节，一遍遍的修改也使我更熟悉HTML语言以及编码的设置，这对于网页制作这门学科来说是一个铺垫。实验二：FireWorks和CSS实验一、实验目的1、掌握为给定效果图规划切图方式的能力；2、掌握利用FireWorks切图的能力；3、掌握利用CSS+DIV制作网页的能力。二、实验课时4学时三、实验内容 1、规划切图方式的思路了解网页布局结构，将网页划分为几部分，其中导航条为一部分，将其各项分开切图。其余部分根据实际划分开。2、利用FireWorks切图的步骤第一步：打开FireWorks切图软件，打开网页图片。第二步：点击切片工具将图片切为所需大小和比例。第三步：点击文件选项卡下的导出，选择导出为CSS层（htm），勾选修剪图像和将图像放入子文件夹，点击导出。3、CSS+DIV制作网页的结果 效果图.jpg body .topmargin:0 auto 0 0;border:0 auto;text-align:center;width: 1008px;height:83px .topmainmargin:0 auto 0 0;width:px;height:83px;text-align:center .topmain ulmargin:0 auto 0 0;padding:0px;text-align:center .topmain ul liwidth:83px;height:45px;list-style-type:none;float:left .topmain ul li awidth:83px;height:45px .topmain.onewidth:77px;height:45px;float:left .topmain.twowidth:106px;height:45px;float:left .content1margin:0 auto 0 0;border:0px;text-align:center; width:1008px;height:257px .content2margin:0 auto 0 0;padding:10px;border:0px;text-align:left;color:#000;font-size:20px;line-height:30px;width:1008px;height:384px .content2_listmargin:0 auto 0 0;padding:10px 20px;border:0px; .bottommargin:0 auto 0 0;border:0px;width:1008px;height:52px 团学工作          管理团委实践报告     2016-01-19管理之星           管理团委工作报告     2016-01-24班级风采   ；       管理团委宣传报告      2016-01-30奖励资助职业发展社会实践学生组织学生活动资料下载 四、实验小结在这次试验中，用fireworks切图以及用CSS+DIV布局看似简单实则不易。切图是否细致严重影响着页面布局，而对于网页的布局又要细化到各个部分的宽高。用CSS+DIV布局时不能使用绝对定位，文字布局可以使用新闻列表，要注意padding、border以及margin属性的区别与联系。尽管试了很多次，也失败了很多次，但在这个过程中我对CSS+DIV规划网页有了更深刻的认知和体验。实验三： JavaScript实验一、实验目的1、掌握利用JavaScript编写网页动态效果的能力；2、掌握在网页中使用JavaScript脚本的两种方法。二、实验课时2学时三、实验内容1、计算整数阶乘实验的结果 实验3 !- function abc() var sum=1; var re; re=document.getElementById(name).value; for(var i=1;i 请在文本框中输入一个整数，然后单击“计算”按钮，计算该整数的阶乘。 2、下拉菜单实验的结果 下拉菜单 #sddmmargin:0 auto; padding: 0; z-index: 30; background-color:#1e4f9c; height:25px; #sddm li margin: 0; padding: 0; list-style: none; float: left; font: bold 12px arial #sddm li a display: block; margin: 0 1px 0 0; padding: 4px 10px; width: 60px; background:#1e4f9c; color: #FFF; text-align: center; text-decoration: none #sddm li a:hover background: #1e4f9c #sddm div position: absolute; visibility: hidden; margin: 0; padding: 0; background: #1e4f9c; border: 1px solid #1e4f9c #sddm div a position: relative; display: block; margin: 0; padding: 5px 10px; width: auto; white-space: nowrap; text-align: left; text-decoration: none; background: #1e4f9c; color: #2875DE; font: 12px arial #sddm div a:hover background: #1e4f9c; color: #FFF 学院概况学院简介院长致辞学院领导机构设置学院领导机构设置发展规划学科建设师资队伍名师风采教学团队人才引进人才培养本科生硕士研究生双学位MBA科学研究科学项目科研成果科研平台科研动态招生就业招生信息就业指导就业资讯党群工作党校建设组织建设党建理论团学工作学工队伍规章制度学生活动合作交流合作研究教师互动学生交流校友风采校友捐赠校友留言校友动态社会服务管理咨询企业服务明德论坛工商讨论区物流管理讨论区考研之家3、表单验证实验的结果 验证身份证号 请输入身份证号   验证固定电话 请输入电话号码   验证E-mail是否正确 请输入E-Mail地址   验证手机号码是否正确 请输入手机号码   四、实验小结通过本次实验对Javascript脚本语言有了更深程度的把握，第一个求阶乘的实验利用getElementById注重函数取值。第二个下拉菜单中JS代码是固定的，只需要修改其中style样式，修改时注意超链接未被访问、正被访问、鼠标悬停等不同状态对应的设置。第三个表单验证主要侧重于对正则表达式的应用，反复修改了很多次发觉考虑仍不是那么周全，要考虑方方面面可能会出现的验证问题。22