《网页设计与制作》实验报告院系名称:管理学院专业班级:电子商务 10级02班学生姓名:相栓霞学号: 2010469006292012年 5 月 11 日实验一:HTML语言实验一、实验目的1、掌握利用HTML语言编写网页的能力;2、掌握利用HTML语言编写表格的能力;3、掌握利用HTML语言编写表单的能力。
二、实验课时2学时三、实验内容1、表格实验的结果(1)实验步骤编制代码如下:<html><head><titel>表格示例</titel><body><table border="1"><tr><td bgcolor="#ff0000" width="200" height="50" rowspan="2" colspan="2">A</td><td width="100" height="25">B</td><td width="100" height="25" align="center">C</td></tr><tr><td colspan="2" align="center">D</td></tr><tr><td rowspan="2" align="right">E</td><td rowspan="2" align="right">F</td><td rowspan="2">G</td><td>H</td></tr><tr><td>I</td></tr></body></head></html>(2)运行结果:2、表单实验的结果(1)实验步骤编制代码如下:<html><head><title>表单</title></head><body><form method="POST" action="URL"> <table border="1"><p><tr> <td width="100" height="30" align="center">姓名:</td> <td width="200" height="30" ><input type="text" name="xingming" size="20"></td></tr></p><p><tr> <td width="100" height="30" align="center"> 密码:</td><td width="200" height="30" ><input type="password"name="mima" size="20"></td></tr></p><p><tr> <td width="100" height="30" align="center">性别:</td><td width="200" height="30" ><input type="radio" name="xingbie" value="remale" checked >女<input type="radio" value="male" name="xingbie">男</td></tr></p><p><tr> <td width="100" height="30" align="center">爱好:</td><td width="200" height="30" ><input type="checkbox" name="checkbox" value="basketble" checked>篮球<input type="checkbox" name="aihao" value="footble">足球<input type="checkbox" name="aihao" value="pingpang">乒乓</td> </tr></p><p><tr> <td width="100" height="30" align="center">籍贯:</td><td width="200" height="30" ><select size="1" name="jiguan"><option selected>开封</option><option>郑州</option><option>驻马店</option><option>信阳</option></select></td> </tr></p><p><tr> <td width="100" height="30" ></td><td width="200" height="30" ><input type="submit"value="提交" name="tijiao"><input type="reset" value="重置" name="chongzhi"></td></tr></p></table></form></body></html>(2)运行结果:四、实验小结通过本次试验让我感觉到实践的重要性,书本知识固然重要,但如果不把它转化为实践,就会成为一纸空谈。
在这次试验中,我通过不断地编写,调试终于掌握了编写表格,表单、表单的能力,让我对html有了初步了解。
实验二:FireWorks和CSS实验一、实验目的1、掌握为给定效果图规划切图方式的能力;2、掌握利用FireWorks切图的能力;3、掌握利用CSS+DIV制作网页的能力。
二、实验课时2课时三、实验内容1、规划切图方式的思路(1)选中一个图片作为将要切割的对象(2)仔细观察图片结构,将其分为Logo 图案、导航栏、正文和版权信息几个区域(3)观察图片中色彩单调的图片区域的规律2、利用切图的步骤运用FireWorks将图片切为自己所需要的部分和比例,如图所示:3、CSS+DIV制作网页的结果(1)在dreamweaver里面编制代码如下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>网页设计</title><style type="text/css"><!--#apDiv1 {position:absolute; left:9px; top:15px; width:1352px;height:82px; z-index:1; }#apDiv2 { position:absolute; left:15px; top:139px; width:250px;height:287px; z-index:2;}#apDiv3 {position:absolute; left:19px; top:101px; width:1342px;height:33px; z-index:3;}#apDiv4 {position:absolute; left:1112px; top:137px;width:250px; height:345px; z-index:4;}#apDiv5 {position:absolute; left:268px; top:329px; width:844px;height:135px; z-index:5;}#apDiv6 {position:absolute; left:269px; top:139px; width:842px;height:192px; z-index:6; }#apDiv7 { position:absolute; left:3px; top:485px; width:1365px;height:89px; z-index:7;}--></style></head><body><div id="apDiv1"></div><div id="apDiv2"><img src="images/效果图_r4_c1.png"width="253" height="344" /></div><div id="apDiv3"><img src="images/图片1_r4_c3.png"width="243" height="35" /><img src="images/效果图_r3_c2.png"width="105" height="35" /><img src="images/效果图_r3_c3.png" width="106" height="35" /><img src="images/效果图_r3_c4.png" width="106" height="35" /><img src="images/效果图_r3_c5.png" width="106" height="35" /><img src="images/效果图_r3_c6.png" width="106" height="35" /><img src="images/效果图_r3_c7.png" width="106" height="36" /><img src="images/效果图_r3_c7.png" width="106" height="35" /><img src="images/效果图_r3_c8.png" width="106" height="35" /><img src="images/图片1_r4_c3.png" width="247" height="35" /></div><div id="apDiv4"><img src="images/效果图_r4_c1.png" width="253" height="344" /></div><div id="apDiv5"><p> 课程简介</p><p>电气工程学院是高等工业学校本科非电工科类的一门重要的技术基础课,通过本课程的学习使学生受到辩证唯物主义和爱国主义教育,获得电气技术领域中有关电工技术、电子技术的必要基本理论、基本知识和基本技能,了解他们的应用和发展趋势,为学习后续课程以及从事与本专业有关的工程技术科学研究工作打下一定基础。