DIV+CSS网页制作实战第13次课(2课时)列表-表格-多媒体.pptxVIP

课次 13 课时 2 教具 投影仪 项目 项目2 HTML网页文档的编辑 任务 任务2.3 HTML文档及常用标签（三） 知识点 1. 插入列表（30分钟） 2. 表格设计（20分钟） 3. 插入多媒体元素（40分钟） 重点 插入多媒体元素 难点 无 备注 上机操作90分钟 / 12 1 / 12 2 知识技能目标 插入列表 表格设计 插入多媒体元素 / 12 任务2.3 HTML文档及常用标签 2.3.8 插入列表 HTML文档中可以插入三种类型的列表：无序列表、有序列表、自定义列表。 1. 无序列表 无序列表的标签为ul，其中列表项的标签为li。默认情况下无序列表的每个列表项前面有一个圆点。 例如下代码的显示结果如下所示： ul li列表项1/li li列表项2/li li列表项3/li /ul 3 / 12 4 2. 有序列表 有序列表的标签为ol，其中列表项的标签为li。默认情况下有序列表的每个列表项前面按1.、2.、3.、……编号。例如下列代码的显示结果如图所示。 ol li列表项1/li li列表项2/li li列表项3/li /ol ol type=a start=3 li列表项1/li li列表项2/li li列表项3/li /ol ol type=I li列表项1/li li列表项2/li li列表项3/li /ol / 12 5 3. 自定义列表 自定义列表的标签为dl，其中列表项可用dt、dd等进行定义。例如下面的代码显示效果如图所示。 dl dt列表项11/dt dd列表项12/dd dt列表项21/dt dd列表项22/dd /dl     自定义列表通常设定相关样式而呈现我们所需要的外观，被广泛应用于新闻类网站的首页排版中。具体应用参见项目五。 / 12 6 2.3.9 表格设计 在HTML中，表格主要通过三个标记来构成： 1．表格标记：table style=border-collapse: collapse; …/table 2．行标记： tr…/tr 3．单元格标记： td…/td 这几个标记之间是从大到小，逐层包含的关系。另外，表格中的标题单元格可以使用标记th…/th定义，标题单元格中的内容通常以黑体加粗显示。单元格标记td…/td和表题标记th…/th都必须位于行标记tr之内。一个表格可以有多个tr和td标记，分别代表多行和多个单元格。表格还可以嵌套，一个表格所包含的标记较多，而Dreamweaver 提供了可视化方法制作表格，表格、表头、行、单元格的属性等都可以通过“属性”面板设置。 表格在早期网页设计中主要用来进行页面布局和显示表格数据，而现在Web设计标准建议页面布局采用DIV+CSS实现，表格就主要用来显示表格数据了。表格默认为双线表格，要设置单线表格，可设置样式如下： style=border-collapse: collapse; / 12 7 例如下列代码显示结果如图所示。 body table style=border-collapse:collapse; border=2 trth序号brIDth姓名th性别th年龄th业务专长th技术职称th评聘年月 trtd101td李大力td男td55td计算机网络td教授td1990.1 trtd102td张芝兰td女td45td计算机硬件系统td教授td1996.11 /table /body / 12 8 2.3.10 插入多媒体元素 1．插入背景音乐 方法（1）：在Dreamweaver CS6中使用【插入】菜单\【媒体】\【插件】，选择一个音乐文件。   方法（2）：在head…/head中使用bgsound标签（只适用于IE 浏览器）。例如： bgsound src= backsound.mp3 loop=-1 /   方法（3）：在body…/body中使用embed标签。例如： embed src=backsound.mp3/embed   方法（4）: 在body…/body中使用以下HTML5标签（适用于支持HTML5标签的浏览器）。例如： audio src=backsound.mp3 autoplay=true playcount=-1/audio / 12 9 2．插入flash动画 在Dreamweaver CS6中选择【插入】菜单\【媒体】\【SWF】，可以插入flash动画（.swf），文件插入后Dreamweaver