chap0 预备知识 HTML概要1.ppt

* * * * * * * * * * * 讲到这里，可能会时间不够 将路径问题这一部分放到《chapter1-JSP简介》中去讲，那一节课时间充裕 讲解的办法： （1）找到一个图片A和建一个网页文件B，不断移动A的位置，演示在B中如何插入。 （2）讲完之后让学生做练习 3. HTML中编写表格—重点掌握 5、表格单元格的合并练习 创建一个3行4列的表格，将该表格修改成以下形式 原始规则表格 合并单元格6、7、10、11 3 方法：1）确定要合并的4个单元格第一个出现的单元格——单元格6 2）确定“单元格6”是“跨行”还是“跨列”？——跨行同时跨列 3）为“单元格6”设置colspan和rowspan属性，值都为2 （表示跨2行2列） 4）删除原来列上多余的“单元格7、10、11” 5）适当修改单元格文本 3. HTML中编写表格—重点掌握 5、表格单元格的合并练习 练习1：创建一个3行4列的表格，将该表格修改成以下形式 table width=500 border=1 bordercolor=red tr td colspan=4单元格跨4列/td /tr tr td rowspan=2单元格跨2行/td td单元格/td td 单元格/td td单元格/td /tr tr td单元格/td td单元格/td td 单元格/td /tr /table table border=1 bgcolor=yellow width=500 height=400 align=center tr td colspan=2 rowspan=211/td td12/td /tr tr td21/td /tr tr td31/td td32/td td33/td /tr /table 练习2：将一个3行3列的表格按照左图所示效果进行单元格的合并 table width=800 border=1 align=center cellpadding=0 cellspacing=0 tr td height=150 colspan=2 bgcolor=#FFFF00nbsp;/td /tr tr td width=200 height=200 bgcolor=#993399nbsp;/td td width=600 rowspan=2 bgcolor=#FFCCFFnbsp;/td /tr tr td height=200 bgcolor=#CC99CCnbsp;/td /tr tr td height=100 colspan=2 bgcolor=#99FFFFnbsp;/td /tr /table 应用：利用表格实现页面布局 3. HTML中编写表格—重点掌握 6、表格的嵌套 在td/td标记内再嵌套table/table标记 3. HTML中编写表格—重点掌握 6、表格的嵌套 table width=500 border=1 cellspacing=0 cellpadding=0 tr td width=150单元格2/td td table width=100% border=1 cellspacing=0 cellpadding=0 tr tdnbsp;/td tdnbsp;/td /tr tr tdnbsp;/td tdnbsp;/td /tr /table /td /tr tr td单元格3/td td单元格4/td /tr /table 内层嵌套表格 3. HTML中编写表格—重点掌握 7 、表格——表格综合练习 绝对路径（完整） 如c:\文件夹1\文件夹2\01.jpg 如/01.jpg 相对路径 链接到同一路径下的文档: 直接输入文件名，如01.jpg 链接到同一路径下的子文件夹的文档: 先输入子文件夹名和斜杠（/），再输入文件名。如images/01.jpg 链接到上一级目录（文件夹B）中的文件: 要在对应的目录名前输入../,如../images/01.jpg ，其中../表示上级目录 路径问题-重点理解 示例：相对路径练习 网站的文件目录结构如下， 要求在01.html