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

《网页设计与制作》 实 验 报 告 院系名称： 管理学院 专业班级： 电子商务13级3班 学生姓名： 刘志华 学 号： 201317050302 项目 实验一 （25分） 实验二 （35分） 实验三 （40分） 总分 （100分） 得分 2015年 5 月 实验一：HTML语言实验 一、实验目的 1、掌握利用HTML语言编写网页的能力；2、掌握利用HTML语言编写表格的能力；3、掌握利用HTML语言编写表单的能力。 网页源代码：html headtitle电商201317050302LZH/title/head body table border align=center caption style=height:40px;margin-bottom:10px;h2实验一表格实验/h2/caption tr tdrowspan=2colspan=2width=200bgcolor=#FF0000Atd width=200Btd width=200 align=centerC tr td colspan=2 align=centerD tr tdrowspan=2align=rightEtdrowspan=2align=rightFtdrowspan=2GtdH tr tdI /body /html 2、表单实验的结果 网页源代码：html headtitle电商201317050302LZH/title/head body table border width=500 align=center div align=center h2实验一表单实验/h2 hR form tr td align=center姓名： tdinput name=name tr td align=center密码： tdinput type=password name=value=size=maxlength= tr td align=center性别： tdinput type=radio name=gender valeu=1 checked女 input type=radio name=gender valeu=2男 tr td align=center爱好: tdinput type=checkbox name=check1 value=yes篮球 input type=checkbox name=check2 value=yes checked足球 input type=checkbox name=check3 value=yes乒乓球 tr td align=center籍贯: tdselect name=jiguan option开封option郑州option洛阳 /select tr TD colspan=2 align=centerinput type=submit name=submit_button value=提交 input type=reset name=reset_button value=重置 /table /body /html 四、实验小结 这次的实验是设计表格和表，跟表格相比，表单可能更复杂一点，同时表单还需要表格的一些基础实验，主要是参考课本上的代码，然后自己动手输入到记事本中通过实验，我简单了解了TR代码的用法，网页制作也有了简单的 实验二：FireWorks和CSS实验 一、实验目的 1、掌握为给定效果图规划切图方式的能力；2、掌握利用FireWorks切图的能力；3、掌握利用CSS+DIV制作网页的能力。 二、实验课时 2课时 三、实验内容 1、规划切图方式的思路 以管理学院的网站主页为例，网站结构，将导航区、部分版权信息几部分组成。 2、利用FireWorks切图的步骤 在fireworks中打开网页图片，所需内容切图切图结果如下图所示 3、CSS+DIV制作网页的结果 网页源代码： html head meta charset=GBK style div,ul,li,a,p,h{margin:0;padding:0;} .top .mennu{width:100;height:45px;background:#164896;} .top .logo{border:none;} .top .mennu ul{width:900px;margin:0 auto;} .top .mennu li{width:150px;list-style:none;float:left;height:45px; line-height:45px;text-align:center