《网页设计与制作》
实 验 报 告
院系名称： 管理学院 专业班级： 电子商务XXXX
学生姓名： XXX 学 号： XXXXXXXX
项目 | 实验一 （25分） | 实验二 （35分） | 实验三 （40分） | 总分 （100分） |
得分 | ||||
2016年 5 月
实验一：HTML语言实验
一、实验目的
1、掌握利用HTML语言编写网页的能力；
2、掌握利用HTML语言编写表格的能力；
3、掌握利用HTML语言编写表单的能力。
二、实验课时
2学时
三、实验内容
1、表格实验的结果
<html>
<head><title>表格</title>
</head>
<body>
<table border="1" width="600" height="300" align="center">
<tr>
<td rowspan="2" colspan="2" bgcolor="#FF0000">A</td>
<td width="29%">B</td>
<td width="24%" align="center">C</td>
</tr>
<tr>
<td colspan="2" align="center">D</td>
</tr>
<tr>
<td width="24%" align="right" rowspan="2">E</td>
<td width="19%" align="right" rowspan="2">F</td>
<td width="29%" rowspan="2">G</td>
<td width="24%">H</td>
</tr>
<tr>
<td width="24%">I</td>
</tr>
</table>
</body>
</html>
2、表单实验的结果
<html>
<head><title>表单</title>
</head>
<body>
<form method="POST" action="">
<table border="1" width="500" height="300" align="center">
<tr>
<td width="189" align="center">姓名：</td>
<td>
<p><input type="text" name="xingming" size="20"></p>
</td>
</tr>
<tr>
<td width="189" align="center">密码：</td>
<td>
<input type="password" name="mima" size="20">
</td>
</tr>
<tr>
<td width="189" align="center">性别：</td>
<td>
<input type="radio" value="xingbie" checked name="female">女
<input type="radio" name="xingbie" value="male">男
</td>
</tr>
<tr>
<td width="189" align="center">爱好：</td>
<td>
<input type="checkbox" name="aihao1" value="js">篮球
<input type="checkbox" name="aihao2" value="ds" checked>足球
<input type="checkbox" name="aihao3" value="sw">乒乓球
</td>
</tr>
<tr>
<td width="189" align="center">籍贯：</td>
<td><select size="1" name="jiguan">
<option>郑州</option>
<option>洛阳</option>
<option selected>开封</option>
</select>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" value="提交" name="B1">
<input type="reset" value="重置" name="B2">
</td>
</tr>
</table>
</form>
</body>
</html>
四、实验小结
HTML语言是网页制作的基础，而利用表格布局是重中之重。在这两个实验中，第一个是要注重表格的宽高以及colspan和rowspan的设置，第二个是要注重表单的样式，其中要注意默认选项的设置，单选框name属性值相同，而复选框name属性值应该不同。
本次实验也让我更加注重细节，一遍遍的修改也使我更熟悉HTML语言以及编码的设置，这对于网页制作这门学科来说是一个铺垫。
实验二：FireWorks和CSS实验
一、实验目的
1、掌握为给定效果图规划切图方式的能力；
2、掌握利用FireWorks切图的能力；
3、掌握利用CSS+DIV制作网页的能力。
二、实验课时
4学时
三、实验内容
1、规划切图方式的思路
了解网页布局结构，将网页划分为几部分，其中导航条为一部分，将其各项分开切图。其余部分根据实际划分开。
2、利用FireWorks切图的步骤
第一步：打开FireWorks切图软件，打开网页图片。
第二步：点击切片工具将图片切为所需大小和比例。
第三步：点击文件选项卡下的导出，选择导出为CSS层（htm），勾选修剪图像和将图像放入子文件夹，点击导出。
3、CSS+DIV制作网页的结果
<html>
<head><title>效果图.jpg</title>
html网页设计实验心得 <body bgcolor="#ffffff">
<style type="text/css">
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论