chapter9创新杯说课大赛国赛说课课件.pptVIP

任务二 了解常用HTML标签 每个frameset标签中包含若干个frame标签，frame标签属性包括src（网页URL）、name(框架名称)、scrolling（滚动条属性）等。frameset标签中最关键的属性是rows或cols，它们定义了文档窗口中框架或嵌套的框架集的行或列的大小及数目。 任务小结 　1．head标签中包含的标签。 　2．body标签中包含的常用标签 　3．布局元素标签 任务二 了解常用HTML标签 举一反三： 　　使用HTML代码制作网页“practice9-2.html”，包含2行3列的表格。 1．启发思路：可以使用表格标签完成。 2．分组完成任务。 任务二 了解常用HTML标签 　 作业： 　　将本单元素材“举一反三”文件夹中的网页“practice9-3.html”复制到D盘根目录下，使用ul/ul标签及li/li标签制作项目列表，并比较与编号列表的区别。 任务二 了解常用HTML标签 任务三 使用代码修改网页 任务描述：使用Dreamweaver CS5创建网页时，经常需要在“代码”视图中编辑网页，这种做法更方便、更灵活、效率更高。本任务通过修改“玉石鉴赏”、“异国风情”网页学习使用代码编辑网页的常用方法。 任务分析：使用表格标签修改“玉石鉴赏”网页，使用Div标签修改“异国风情”网页。 第九单元 了解HTML代码 任务实现： 一、修改“玉石鉴赏”网页 1.将“玉石鉴赏”网页中表格第3行行高改为30 任务三 使用代码修改网页 （1）运行Dreamweaver CS5，打开第九单元素材文件夹中的“ysjs.html”网页，将光标放在表格第3行第1列单元格中的文字之后，此时“标签选择器”显示标签内容为“bodytable#yutrtdp”，表示当前的光标是在 body标签中ID为“yu”的表中某行单元格的段落内。标签选择器中“#”前是标签类型说明，“#”后表示添加的是此类标签的ID值。如右图所示。 任务三 使用代码修改网页 （2）单击标签选择器中的td标签，选中网页中表格第3行第1列单元格。切换到“代码”视图，如图9-6所示，表格第3行第1列单元格对应的代码就会被选中，观察其中内容，把height（高）改为30（修改行中第1列单元格的高度后，整行就会应用修改后的高度）。 选中第3行第1列单元格 2.在“玉石鉴赏”网页中添加三种新产品图像及名称 任务三 使用代码修改网页 （1）在“设计”视图中选中玉石图像和名称所在的6个单元格，如图9-7所示。 选中玉石图片和名称行 （2）切换到“代码”视图，如图9-8所示，这6个单元格的代码会被选中，但第2行开始标签tr和第3行结束标签/tr没有被选中 任务三 使用代码修改网页 表格第二行开始标签 表格第三行结束标签 第三行单元格中的 玉石名称 任务三 使用代码修改网页 在表格中（即table和/table之间），第1对tr/tr表示表格中第1行，第2对tr/tr表示表格中第2行，依此类推；tr/tr之间第1对td和/td表示此行第1列，第2对tr/tr表示此行第2列，依此类推。 （3）在“代码”视图中重新选择从第2行开始标签tr到第3行结束标签/tr之间的代码内容，复制到第3行结束标签/tr后。按F12预览，效果如图9-9所示，代码如图9-10所示。 任务三 使用代码修改网页 复制代码后的网页浏览效果 任务三 使用代码修改网页 在代码中选中图片和名称行 第4行单元格中的玉石照片 第5行单元格 中的玉石名称 任务三 使用代码修改网页 （4）在“代码”视图中编辑新复制的两行。把第4行的img标签的图片由“1s.jpg”、“2s.jpg”、“3s.jpg”分别改为“4s.jpg”、“5s.jpg”、“6s.jpg”；相应的链接由“1.jpg”、“2.jpg”、“3.jpg”分别改为“4.jpg”、“5.jpg”、“6.jpg”。把第5行的玉石名称依次改为“玉石白菜”、“玉石巨龙”、“玉石茶壶”。按F12预览，效果如图9-11所示。 任务三 使用代码修改网页 代码修改后的网页 二、修改“异国风情”网页 1.把网页“ysjs.html”中“澳洲海岸”图片修改为本单元素材文件夹中的“htmlimages\ azha.jpg”图像文件 任务三 使用代码修改网页 （1）运行Dreamweaver CS5，打开第九单元素材文件夹中的“ysjs.html”网页，切换到“代码”视图。 （2）在“代码”视图中找到ID为“bb”