工信版（中职）Web前端设计基础 项目三-2电子课件

YCF （中职）Web前端设计基础 项目三-2电子课件 1 单击此处编辑母版文本样式 第二级 第三级 第四级 第五级 网页中的表格 项目三 授课教师：姓名 WEB前端设计基础 学习情境一 授课教师：姓名 单击此处编辑母版标题样式 Contents 1.项目描述 2.知识准备 3.项目实施 4.项目拓展 5.项目小结 6.技能训练 Contents 1.项目描述 2.知识准备 3.项目实施 4.项目拓展 5.项目小结 6.技能训练 三 项目实施 图文混排的HTML 5网页； 图文并茂的商品列表网页。 三 项目实施 利用所学的表格知识，制作如图所示的毕业生档案。 制作毕业生档案 三 项目实施 打开Sublime编辑器，新建一个文件，保存文件名为“3-7.html”。 第一步 第二步 输入【！】或者【html:5】，按Tab键，会自动完成html基本代码填充，更改head标签中的title标签的内容为“北京理工大学毕业生档案”。 第三步 在body标签中，输入【table>tr*5>td*7】后按Tab键，插入一个5行7列的表格。 三 项目实施 设置table属性为：单元格边距（cellpadding="0"）；单元格间距（cellspacing="0"）；表格边框（border="1px"）；背景图片（background="images/grjlbg.jpg"）。 第四步 第五步 输入标题“北京理工大学毕业生档案”（使用h3标题）。 第六步 设置行tr的高度（height）和首行列td的宽度（width）。 三 项目实施 住址内容和照片所在单元格需要跨行（colspan）、跨列（rowspan）合并。 第七步 第八步 按照效果图输入表格内容。 第九步 在第10行td标签中，输入【img】后按Tab键，在src属性中输入图片的路径和名称。 三 项目实施 <table cellpadding="0" cellspacing="0" border="1px" background="images\grjlbg.jpg"> <caption><h3>北京理工大学毕业生档案</h3></caption> <tr height="30px"> <td width="70px">姓名</td> <td width="80px">王美丽</td> <td width="70px">性别</td> <td width="80px">女</td> <td width="70px">民族</td> <td width="80px">汉</td> <td width="100px" rowspan="4"><img src="images\wangmeili.jpg" alt="照片" width="100px" height=120px></td> </tr> <tr height="30px"> <td>身高</td> <td>177CM</td> <td>体重</td> <td>56kg</td> <td>政治面貌</td> <td>中共党员</td> </tr> <tr height="30px"> <td>学制</td> <td>四年制</td> <td>学历</td> <td>大学本科</td> <td>出生年月</td> <td>1998年12月</td> </tr> 三 项目实施 <tr height="30px"> <td>通讯地址</td> <td colspan="3">北京海淀区中关村南大街5号</td> <td>毕业时间</td> <td>2018年6月</td> </tr> <tr height="30px"> <td>毕业学校</td> <td colspan="3">北京理工大学</td> <td>专业</td> <td colspan="2">计算机技术</td> </tr> <tr height="30px"> <td>Email</td> <td colspan="3">wangmeili@yahoo.com.cn</td> <td>联系电话</td> <td colspan="2">13888888888</td> </tr> <tr height="30px"> <td width="70px">英语水平</td> <td colspan="2" width="200px">英语四级</td> <td width="">计算机水平</td> <td colspan="3">国家三级</td> </tr> <tr height="90px"> <td>自我评价</td> <td