信息技术-八年级下册-教参课件.ppt

1、信息技术信息技术 八年级下册八年级下册 教参教参 一、单元概述一、单元概述 在本单元中，我们从生成简单网页入手，理解网页设计的基础知识；然后规划站点，了解网站建设的开发流程；最后利用Dreamweaver CS5创建站点，并制作首页。二、学习目标二、学习目标 本单元是学生初次接触用于制作网站的软件Dreamweaver CS5，因此首先让学生在欣赏网站的同时了解网页设计与网站制作的基本常识是必要的，在进行软件介绍的时候重点强调网页编辑软件的优越性，另外要让学生明确的是：在着手创建网站之前，必须要先对网站进行站点规划，最后通过创建“安全自护我能行”为题的网站使学生经历“规划网站 创建站点编辑首页

2、”的网站初步建设过程。通过本单元循序渐进的学习过程，学生将按部就班地掌握：使用HTML语言编写的代码生成网页、用IE浏览器预览网页、网站的开发流程、创建站点、创建首页、规划素材文件、为页面添加网页标题和背景色、使用表格初步布局 第第1单元单元 初建网站初建网站网页、调整表格、设置网页背景图像、插入Flash动画并设置参数、插入普通文本和特殊字符、保存网页等知识与技能。在教学过程中要尽可能地利用学生已有的知识技能分析并解决新的问题，例如网页中的背景色调整、表格设置与调整、插入文本、保存网页等，其操作方法与Office系列软件和上学期学过的Flash 软件具有较大的相似程度，此时教师可以引导学生知

3、识迁移、自行探索发现解决问题的方法，而教师则可将注意力集中在更需要关注的学生身上，最大限度地提高课堂效能，将问题在课上给予解决。教师在布置单元任务或课堂任务的时候，要鼓励学生不完全模仿范例，而是利用素材进行网页的创意和设计，争取留给学生更多的空间去发挥创意。在进行评价的时候要对创意部分及时给予鼓励，充分利用各种方式对学生作品进行展示，引导不同层次的学生之间形成良性竞争，从而在班级教学中创造出和谐上进的学习氛围，对信息技术教学产生推动作用，充分体现“学生为主体，教师为主导”的教学理念。三、重点难点三、重点难点 教学重点教学重点 1掌握互联网、网页与首页、网站等网页设计与网站制作的基本知识。2学会

4、使用HTML代码在记事本工具中制作网页并且通过用IE浏览器预览网页。3了解网站的开发流程，能够围绕网站主题设计组织结构图。4熟悉Dreamweaver CS5的工作界面。5掌握创建站点、规划素材文件的方法。6学会创建首页、设置网页标题和背景色、保存网页及在IE中预览网页。7能够根据网页内容对页面进行合理的表格布局，并调整表格属性。8能够灵活地将图像、Flash动画、文本和特殊字符插入到页面中，并且通过“属性检查器”设置以上网页元素的属性。教学难点教学难点 1HTML语言的结构，标签和属性的含义。2通过观察文档图标和扩展名判断该文档调用的启动软件。3.能够根据网站主题的需要，搜集并整理相关素材，

5、去粗取精、去伪存真。4.通过“窗口”菜单和面板组对工作界面进行自由布局安排，打造适合自己使用的软件环境。5.使用“标签选择器”来选择网页元素，以设置其属性。6.利用像素和百分比两种度量单位来控制网页元素的尺寸。四、学时安排四、学时安排 本单元共4课，总计4学时，每课占用1学时。（一）本课教学目标（一）本课教学目标 1掌握互联网、网页与首页、网站等网页设计与网站制作的基本知识。2学会使用记事本作为网页编辑工具来编辑HTML代码并生成网页。3掌握浏览网页的方法并理解网页编辑工具与浏览工具之间的关系。（二）教学设计与教学建议（二）教学设计与教学建议 1课堂引入分析课堂引入分析 在当前的社会生活中，网

6、络正在发挥着越来越重要的作用，大量制作精美、功能强大的网站出现在互联网上。对于学生来说，制作个人网站也正在成为一种流行时尚。通过本教材的学习可以轻松帮助学生入门，并逐步亲手打造属于自己的个性十足的网站。第第1课课 新手入门新手入门在本课的引入设计中，教师可以这样设计：首先打开IE浏览器，在地址栏中输入网址，打开一个范例网站的首页，单击首页中的动画、超文本、图片等网页元素，可以分别链接到网站中的其他页面中。在操作过程中教师提出问题，引导学生思考互联网、网站、网页、首页等术语的含义，以及它们之间的关系，尝试让学生体会浏览器和网页的关系，从而将网站设计与网页制作的基本知识进行概括总结并明确落实到每个

7、学生身上。在进行教学的时候，一定要让学生认识到已有知识的重要性，充分利用已经具备的技能去尝试解决新问题，从而变被动学习为主动探究。教师可引导学生充分利用教材中的“视野拓展”和“创作天地”板块进行自学，这实际上是在实施分层教学，以巩固本课的知识技能为主，适当地进行补充，让部分基础较好的同学在完成基本任务之后也能有事可做，给学生创造出提高的空间。作为网站制作的起始课，教师要切实地关注每个学生，尤其是在以前的学习过程中表现出学习能力较弱的学生，要确保每个学生都有一个好的开始，都能将第一个网页作品保存到教师指定的位置（本地磁盘或网络中的指定目录）。教师应对所有完成保存网页任务的学生进行及时地评价与鼓励

8、，保护学生的学习积极性。另外，对完成基本任务并有所创新的同学重点表扬，鼓励学生主动学习，有计划地营造良性竞争的氛围。2重点内容分析重点内容分析（1）网页设计与网站制作的基本知识是本课的教学重点）网页设计与网站制作的基本知识是本课的教学重点 在本课中通过欣赏站点，使学生了解和掌握互联网、网页与首页、网站、IE浏览器的基本含义，并且能够明确它们相互之间的关系。学生在学习网站制作之前已经接触过网站，浏览过各式各样的网页，因此教师在完成此教学任务的时候，可以充分利用学生已有基础，不必完全进行讲授式教学，可以结合启发、设问等方法，使学生尽可能地自己总结出相关知识。（2）使用记事本作为网页编辑工具来编辑）

9、使用记事本作为网页编辑工具来编辑HTML代码并生成网页是本课的难点代码并生成网页是本课的难点在进行此部分教学的时候，可以先借助学生已有技能，启动记事本，复制并粘贴素材文件中提供的HTML代码，命名并保存文件，然后在浏览器中进行预览。对于HTML代码部分，教师可以尝试通过修改属性值的方法，引导学生探索标签的含义及其与属性值的对应关系，这也同时是对“创作天地”板块中的练习进行提示的过程，然后通过分析此HTML实例，讲解HTML语言的基本结构，对基本的、标签进行初步介绍，鼓励有余力的同学通过“视野拓展”板块进行自学，并独立完成“创作天地”中的练习。通过教师演示引导学生思考扩展名对文件的影响，既包括其

10、对文件图标的影响，也包括调用应用程序的影响，从而引出程序关联的知识进行补充讲解，见图1.1和图1.2。扩展名为.txt，调用程序为记事本扩展名为.html，调用程序为IE浏览器图1.1 Web页图标图1.2 文本文档图标(3)(3)保存并上传文件保存并上传文件本课是学生第一次上传网页作业，因此要着力于培养学生的学习习惯，尤其是在保存作业至本次磁盘之后，一定要尽可能地让学生将文件上传到网络中的指定位置，并且能够给予学生查看其它学生作业的权限，这不仅便于教师评价，更便于学生之间互评。学生可以通过比较作品的差异看到自己的学习处于整个集体中的位置，从而反思自身作品，迸发灵感，获得动力进行二次创作，对于

11、整个班级的激励将会产生更多的富有创意的优秀作品。学生还可以随时查看上传作业的情况，作为调整自身作业完成进度的参考。（三）教学补充（三）教学补充 本课对HTML语言进行了简单的介绍，在“视野拓展”和“创作天地”板块中都安排了此部分的内容。教师可以补充一些简单的HTML标签和属性，提供给有兴趣的学生作为提高练习使用，也为今后更好地使用“标签选择器”选择对象打下基础。如：标签Height WidthBorderAlignBackground 属性（一）本课教学目标（一）本课教学目标 1了解网站的开发流程。2掌握开发个人网站的步骤。3.能够根据网站主题设计网站结构。4熟悉Dreamweaver CS5

12、 的工作区布局和界面环境。5掌握使用向导创建站点的方法与步骤。（二）教学设计与教学建议（二）教学设计与教学建议 1课堂引入分析课堂引入分析在第一课我们已经掌握了网站、网页、网页的组成元素等基础知识，现在就来了解开发建设网站的过程中需要进行的工作。在进行网站建设的时候，需要先进行需求分析，要对网站的主题、素材、规划内容综合考虑。第第2课课 轻松上路轻松上路本课首先要解决的正是网站的组织结构问题，我们以“安全自护我能行”为例对网站的组织结构图进行讲解，要求学生掌握围绕主题确定网站结构及网页内容的方法。规划好站点后，就可以开始着手创建站点了。使用Dreamweaver CS5创建站点，当然要先熟悉软

13、件的工作环境。我们在这里只需要简单介绍即可，因为本软件的文档窗口与Office系列软件相似，面板组又和同一公司出品的Flash软件雷同，只需要简单地提示学生并快速演示工作区布局即可。Dreamweaver CS5 取消了“站点定义向导”，新建站点只能通过“站点设置对象”窗口完成，但是这个窗口除了使用“新建站点”命令激活外，也可以使用“管理站点”中的“新建”按钮激活。教师可提示学生打开“站点设置对象”窗口中的“高级设置”标签，浏览其中包含的高级设置选项，推荐部分学生可以在今后的学习中尝试使用。2 2重点内容分析重点内容分析规划网站及创建站点是本节课的教学重点，下面分别进行教学建议。在本课讲解网站

14、开发流程之后，教师应迅速将课题引导至规划站点上来，引导学生围绕网站主题“安全自护我能行”展开讨论，共同思考本网站应该如何规划，依照先整体后局部，先简单后复杂的原则去分层、分角度设计网站结构和网页内容，让学生体验完整的规划过程，以便对“创作天地”中布置的课外提高任务起到降低难度的作用。创建站点是本课的重要内容，要求所有学生一定要掌握使用“站点”菜单的“新建站点”命令创建站点的方法，对于使用“文件”面板创建站点的方法，则可以通过提示或在今后的教学过程中演示渗透来介绍，如图2.1所示，尽量使学生能够熟悉如图2.2所示的“管理站点”对话框，并且弄清楚在此对话框中的“删除”站点并非删除掉网站文件本身，仅

15、仅是删除在Dreamweaver CS5对此站点设置的信息而已。图2.1 “文件”面板图2.2“管理站点”对话框 （三）教学补充（三）教学补充 1.1.切换网站切换网站 当学生使用的计算机具有磁盘保护的功能，或者在Dreamweaver CS5 中创建了多个待编辑的网站时，学生启动软件后，系统不会恰好打开需要编辑的站点，此时可以提示学生使用“文件”面板来打开需要的网站。其操作过程如图2.3、2.4和2.5所示。图2.3 单击箭头所示位置图2.4 选择所需站点 图2.5 完成切换 2.2.网站组成网站组成 在创建站点的过程中，教师不可避免地会遇到站点的组成问题，一般来说在Dreamweaver

16、CS5中创建的站点分为三部分：本地站点、远程站点和测试站点，讲清楚此三部分的含义，才能正确设置站点。本地站点本地站点：这是我们创建站点的工作目录，用来存放网页和素材，它可以位于学生的本地计算机，也可以位于教师配置的网络服务器上。远程站点远程站点：远程站点是用来存储我们创建的站点文件的文件夹，这些文件用于测试、生产、协作和发布站点。如果想在不连接Internet时测试站点，可以在本地计算机上通过软件设置的办法去模拟Web服务器环境。测试站点测试站点：用来测试动态页面的站点，适用于动态网页。3.3.动态网页和静态网页动态网页和静态网页 至于动态网页和静态网页的区别，教师可以简单概括讲解如下：动态网

17、页和静态网页是相对的，动态网页是指内容由站点数据库中变化的数据来显示的网页，静态网页和动态网页的扩展名不同，静态网页一般是以.htm、.html、.shtml、.xml等为扩展名，而动态网页则是以.asp、.jsp、.php、.perl、.cgi等为扩展名的。教师还可以提供学生一些动态网站的地址，让学生通过自己的实际操作去体会二者的区别。（一）本课教学目标（一）本课教学目标 1进一步熟悉Dreamweaver CS5的工作界面。2.掌握利用“文件”面板打开网站的方法。3学会根据网站素材的分类规划网站的文件夹。4熟练地创建并保存网页。5.掌握设置网页标题的方法。6.能够根据网页内容使用表格恰当布

18、局。7.学会设置网页背景色及表格背景图像。8.初步认识并尝试使用标签选择器选择对象。9.熟练地使用快捷键在浏览器中预览网页效果。（二）教学设计与教学建议（二）教学设计与教学建议 1课堂引入分析课堂引入分析第第3课课 开篇之作开篇之作 当站点规划并创建完毕之后，要进行的工作首当其冲就是制作网站的首页。首页作为网站的门面，对网站来说至关重要，因此我们要尽量将首页制作的富有吸引力。2 2重点内容分析重点内容分析 （1）在）在“文件文件”面板中规划站点面板中规划站点 首页需要使用的素材必须存放在网站中才能被它引用，所以我们要为素材建立文件夹，将不同类别的素材分门别类地存放，便于管理。打开“文件”面板，

19、模仿在windows中的操作，右击网站名“安全自护我能行”，在弹出的快捷菜单中执行“新建文件夹”命令，此时文件夹名处于可编辑状态，我们只需要直接输入文件夹名即可完成命名，创建网页也可以采用此方法，如图3.1所示。与使用“新建”菜单来创建网页相比，在“文件”面板中操作更为简单快捷。图3.1 重命名文件夹和网页 当需要更改网站中的网页名或文件夹名时，可右击网页名或文件夹名，执行弹出的快捷中的“编辑”“重命名”命令，或直接使用快捷键F2。为素材归类存放准备的文件夹建立完毕之后，我们要将素材存放到相应的目标文件夹中。此时可以考虑暂时脱离Dreamweaver CS5 的软件环境，使用windows的资

20、源管理器进行操作，这样做的好处是可以批量复制粘贴文件，尤其是素材准备充分的情况下，能够节省大量的时间，这种方法优于在网页中先使用素材后再逐个保存到网站中的方法。在教材中我们所介绍的正是此种方法。至于传统的先使用素材后保存到指定文件夹的方法，虽然不推荐使用，但是也可以介绍给学生，其过程如图3.2所示（此示意图是以在网页中插入图像为例的）。图3.2 保存网页使用的素材图像 创建首页的过程与创建普通网页并无实质性的区别，系统区分首页和普通网页依赖于文件名，如果网页被命名为index.html(index.htm)或者default.html(default.htm)，那么在将来发布网站的时候就会指定

21、该网页为首页，此原则是由发布站点的软件所决定的，作为使用者我们只需要遵守该原则，在Dreamweaver中将首页命名为index.html(index.htm)，其他网页链接在它下层即可。（2 2）设置网页标题）设置网页标题 每个网页都有标题，但是网页的标题并不显示在网页文档中，而是显示在浏览器的标题栏中，如果不设置则显示成“无标题文档”，如图3.3所示。设置网页标题并不复杂，在教材中我们介绍了使用“文档”工具栏中的的“标题”文本框的方法来设置，然后在IE中预览效果。如图3.4所示。图3.3 预览无标题网页 图3.4 设置并预览网页标题 （3）设置网页背景）设置网页背景 更改首页的背景色，属于

22、设置网页的页面属性，既可以通过“属性检查器”的“页面属性”按钮，也可以通过“修改”菜单的“页面属性”命令完成，弹出的对话框相同。我们设置背景色的目的是为了让后插入的表格的背景图像能够融合到整个网页中，使画面效果过渡自然，所以对背景颜色要求非常精确。在系统提供的色板中我们无法找到对应的颜色，用拾色器则比较复杂，因此我们采用的是输入十六进制颜色值的方法进行设置，此方法我们在学习Flash的时候曾经讲授过，此处不再赘述。当网页同时设置了背景颜色和背景图像的时候，系统只会显示背景图像，忽略背景颜色。（4）使用表格对页面布局）使用表格对页面布局 插入表格是在网页设计中经常采用的页面布局方式，使用表格控制

23、网页元素的定位，既简单又精确，因此掌握好表格的运用是非常重要的。当表格用于布局的时候，通常会将边框线设为0像素，这样在浏览器中浏览网页时将不会看到表格边框线。我们在首页中正是如此设置的，表格的边框线在编辑状态下显示为虚线，在IE中预览的时候，边框线并不显示。当需要选择表格对象（表格、行、列、单元格）的时候，我们推荐使用状态栏中的“标签选择器”来进行。需要注意的是，随着鼠标在表格中位置的不同，“标签选择器”区域显示的内容也会发生相应的变化，此时我们可单击标签，并观察表格对象的选择状态即可判断所选的对象是否正确。对于如图3.5所示的2*2的表格来说，当将插入点定位在b1单元格中时，单击“标签选择器

24、”中的，将会选择b1单元格本身，单击，则选中插入点所在的行，即a1和b1单元格，单击，选中整个表格，如果单击，那么选择的将是整个网页，在此过程中，“属性检查器”也跟随对象的不同发生变化，这样便于设置对象的属性。网页中插入的表格状态栏中的“标签选择器”图3.5 使用“标签选择器”选择对象 在讲解网页标题的时候教师可对文档工具栏中的代码、拆分、设计视图分别进行介绍，引导学生观察在设置了网页标题之后，代码视图或者拆分视图中的哪个标签的内容发生了变化，自然地引出、标签的作用，如图3.6所示。图1.12 设置并预览网页标题 图3.6 在代码视图中观察网页标题（三）教学补充（三）教学补充 1.通过代码视图

25、或拆分视图设置网页标题通过代码视图或拆分视图设置网页标题 2.设置页面属性设置页面属性 在“页面属性”对话框中，我们仅仅设置了“外观CSS”背景颜色一个项目，教师此时可引导学生对“外观”类包含的“页面字体”、“大小”、“文本颜色”进行设置，学生完全可以自己理解并自觉应用在网页的设计上。对“链接”类内容，教师可简单介绍设置链接文本使用的字体、大小，颜色以及活动链接颜色等。（一）本课教学目标（一）本课教学目标 1巩固选择表格对象的方法。2.进一步学习设置表格对象的属性。3掌握在网页中插入Flash动画文件，并学会设置Flash动画的参数的方法，以控制动画的播放效果。4.能够灵活地在网页中使用文本。

26、5.初步认识并尝试使用辅助设计工具定位网页元素。（二）教学设计与教学建议（二）教学设计与教学建议 1课堂引入分析课堂引入分析在首页制作的过程中，我们已经使用表格进行了初步的布局。之所以叫做初步布局，就是因为我们还没有根据素材的具体情况对表格进行细致而精确的调整。有时候，我们可以利用鼠标大致调整表格对象的尺寸，但绝大部分情况下，都需要使用者精确地控制表格对象的高度、宽度、比例等属性，才能达到精确布局的目的。第第4课课 星光闪烁星光闪烁 Flash动画在网页中得到了广泛的采用，它使网络世界更加炫目，本课我们将学习使用在网页中插入Flash动画，并设置其属性和参数，使之更好地起到装饰网页、深化主题的

27、作用。文本是网页中介绍说明各种信息的基本组成元素，在网页中使用文本并根据需要设置文本的属性是网页设计的重要组成部分，也是我们作为软件使用者的基本技能。在本课中我们要学习多种方式使用文本，以及插入特殊字符等。2重点内容分析重点内容分析 （1）调整表格）调整表格 在实际应用中，我们如果要设置表格对象的属性，前提是选择好表格对象，在前面我们已经探讨过使用“标签检查器”选择表格对象的方法，在本课的教材中介绍了使用Ctrl键搭配鼠标及使用鼠标单击行左或列首选择行、列的方法。这里我们补充介绍使用表格标题和列标题选择表格和列的方法，使学生最终能够灵活地选择表格对象。其操作方法如下：将插入点定位在表格内任意位

28、置，当表格出现表格标题及列标题菜单的时候，单击标题菜单，执行“选择表格”或“选择列”命令即可，如图4.1所示。图4.1 使用标题按钮选择表格和列 虽然已经为表格设置了高度和宽度，但这并不意味着表格一定以我们设置的尺寸显示，这是由于表格中的元素尺寸超出表格尺寸造成的。例如，我们在网页中插入一个2行1列的表格，设置表格的属性如下：宽度100，高度200，边框、填充和间距都为0，此时表格的尺寸和我们设置的相同，为100*200像素。如果我们将一个图像插入第一行中，并调整图像大小为200*100像素，此时表格的尺寸就会自动调整为200*200，保证内容得以完整显示，如图4.2所示。图4.2 表格尺寸随

29、内容自动调整 填充：单元格中的内容与单元格边框的距离，单位默认为像素。间距：单元格之间或单元格与表格边框之间的距离，单位默认为像素。表格属性中的“填充”和“间距”选项如果不进行设置，大多数的浏览器都会默认按照“填充”为1、“间距”为2来显示表格，如果不希望如此显示，就要设置其值。图4.3是分别将“填充”和“间距”设置为不同的值时表格的显示效果。注意：为了突出显示效果，可以预先将表格的边框设为1个像素的实线。填充：0间距：0填充：空白间距：空白填充：10间距：10填充间距图4.3 设置表格的“填充”和“间距”（2）插入）插入Flash动画并设置参数动画并设置参数 在教材中介绍了执行“插入”“媒体

30、”“Swf”命令来插入Flash动画文件，当熟悉Dreamweaver CS5的工作界面后，我们一定会喜欢上使用“常用”工具栏中的“媒体：SWF”按钮来插入Flash的方法，Dreamweaver会自动保留上次使用过的元素，如图4.4所示。“媒体”按钮图标自动变为Flash图标图4.4 使用“常用”工具栏插入Flash动画 （3）在网页中使用文本）在网页中使用文本 在Dreamweaver CS5 中，专门提供了一个“文本”工具栏来帮助使用者设置文本和插入特殊字符。“文本”工具栏中的各个按钮含义如图4.5所示，与使用菜单命令和“属性检查器”搭配设置文本相比，使用工具栏显然操作步骤少，执行速度快

31、。粗体、斜体强调文本样式设置段落、块样式设置标题项目设置列表样式定义缩写首字母缩写插入特殊符号 图4.5“文本”工具栏 （三）教学补充（三）教学补充 格式化表格格式化表格 在Dreamweaver CS5，取消了格式化表格功能，这个功能预先定义了很多漂亮的表格样式，适合初学者使用，我们可以通过使用低版本的Dreamweaver来完成格式化表格的操作，省去逐项设置的不便。其具体步骤如下：（1）启动Dreamweaver8软件，选中要格式化的表格，执行菜单“命令”“格式化表格”命令。（2）在弹出的“格式化表格”对话框中，选择预设方案，此时可以直接使用预设方案，还可以在此对话框中选择一个方案为基础，

32、再进行个人设定，创建出具有个人风格的表格，如图4.6所示，即为自定义风格的表格设置。图4.6 在“格式化表格”对话框中设置自定义风格 一、单元概述一、单元概述 在本单元中，学习如何创建框架网页，利用框架进行网页的结构划分和布局；学习如何创建网页模板，利用模板和框架统一网站风格，提高网页的制作效率。二、学习目标二、学习目标 1.了解框架网页的基本结构，掌握框架网页的制作方法，并能独立制作框架网页，利用框架对网页进行结构划分和布局。2.了解网页模板的基本用途，掌握网页模板的创建方法，并能根据网站的风格创作网页模板。三、重点难点三、重点难点 教学重点教学重点 1了解框架的基本概念和用途。2掌握框架网

33、页的创建和保存的方法。3掌握用鼠标经过图像制作导航按钮的方法。第第2单元单元 框架模板框架模板 4掌握表格的拆分、合并、嵌套等高级应用方法。5掌握制作外部链接和电子邮件链接的方法。6了解网页模板的基本概念和用途。7掌握网页模板的创建方法。8掌握可编辑区的添加、删除等基本操作。9掌握目标的设置方法和具体意义。教学难点教学难点 1创建与保存框架的基本方法。2如何利用鼠标经过图像制作导航按钮。3创建网页模板的基本方法。4掌握表格的灵活运用方法及高级应用。5掌握目标设置的方法和具体意义。四、学时安排四、学时安排 本单元共2课，总计2学时，每课占用1学时。（一）本课教学目标（一）本课教学目标 1掌握拆分

34、单元格的方法。2掌握创建与保存框架集的方法。3熟练掌握利用鼠标经过图像制作网页导航的方法。4掌握外部链接和电子邮件链接的制作方法。5掌握目标设置在网页制作过程中的作用和方法。（二）教学设计与教学建议（二）教学设计与教学建议 1课堂引入分析课堂引入分析 在进行网站制作的时候，为了有效地统一网站的风格，常常需要将页面划分成多个区域，将各个网页的相同内容（如网站标题、网站导航等）固定在一个区域中，使网站导航结构清晰。利用框架可以轻松实现网页结构划分和布局。演示网页范例：给学生展示一些比较有特点的使用了框架的网页范例，通过观察了解网页布局的基本规律和框架在网页中的作用，对框架有一个初步的了解和感性认识

35、。第第5课课 统一风格统一风格 提出任务：用一节课时间，学习如何创建框架、制作框架网页。在制作的过程中，要注意随时保存文件。2重点内容分析重点内容分析（1）创建和保存框架集）创建和保存框架集 利用“新建文档”的方式创建框架集，是比较直接的创建框架的方法。根据实际网页布局的需要，可以方便地选择框架集的样式，从而创建合适的框架。可以单独保存每个框架集文件和带框架的文档，也可以同时保存框架集文件和框架中出现的所有文档。保存框架集时，要特别引导学生注意和体会保存文件的顺序。先存框架集文件，再保存带框架的文档以及框架中显示的网页文件。（2）利用鼠标经过图像制作导航按钮）利用鼠标经过图像制作导航按钮 鼠标

36、经过图像由页面载入时显示的原始图像和鼠标指针经过时显示的图像组成，这两个图像应大小相等，如果图像大小不等，将自动调整第2个图像的大小以匹配第1个图像的属性。在浏览器中当鼠标指针移过图像时，图像可以发生变化，利用鼠标经过图像的这种特殊效果，可以制作动态网页导航按钮。为了制作出效果特殊的鼠标经过图像，所需的原始图像和鼠标经过时显示的图像需要通过图像处理工具进行制作和处理。注意引导鼓励学生自己处理制作图像，以彰显学生个性，培养学生的创造能力。3 3归纳提高分析归纳提高分析 （1 1）表格的高级应用）表格的高级应用 在本课的任务中，表格被广泛应用，在规则表格的基础上，通过合并单元格制作不规则的表格，以

37、实现网页布局的特殊需要。合并单元格选中需要合并的单元格，通过以下四种方法可以实现：a.执行“修改”“表格”“合并单元格”命令。b.在选中的单元格上右击，执行“表格”“合并单元格”命令。c.按下组合键CTRL+ALT+M。d.单击“属性检查器”中的“合并所选单元格，使用跨度”按钮 。设置单元格背景结合插入图像和设置单元格背景，可以实现如教材图5.18所示的图像表格效果。用作表格边框的图像文件，需要利用图像处理工具进行加工处理，以符合页面布局的需要。（2 2）目标设置）目标设置 属性检查器中的“目标”用来设置超链接的打开方式，共有4个选项可供选择。目标设置部分不太容易理解，在讲解的同时可配以直观有

38、效的例子加以说明。（三）教学补充（三）教学补充 1 1创建框架创建框架 创建框架除了利用新建文档的方式以外，还可以通过以下方法创建。（1 1）使用预定义的框架集）使用预定义的框架集 将插入点放置在文档中。在“插入”栏的“布局”类别中，单击“框架”按钮上的下拉箭头，然后选择预定义的框架集，如图5.1所示。框架集图标提供应用于当前文档的每个框架集的可视化表示形式。框架集图标的蓝色区域表示当前文档，而白色区域表示将显示其他文档的框架。（2 2）设计框架集）设计框架集在创建框架集或使用框架前，执行“查看”“可视化助理”“框架边框”命令，使框架边框在“文档”窗口的“设计”视图中可见。执行“修改”“框架集

39、”命令，然后从子菜单选择拆分项（例如“拆分左框架”或“拆分右框架”）。Dreamweaver 将窗口拆分成几个框架。如果打开一个现有的文档，它将出现在其中一个框架中。图5.1 预定义框架集 2.2.在文档窗口中选择框架和框架集在文档窗口中选择框架和框架集在“文档”窗口的“设计”视图中，在选定了一个框架后，其边框被虚线环绕；在选定了一个框架集后，该框架集内各框架的所有边框都被淡颜色的虚线环绕。（1 1）在）在“文档文档”窗口中选择框架窗口中选择框架在“设计”视图中，按住 Alt 键的同时单击框架内部，在框架周围显示一个选择轮廓。（2 2）在）在“文档文档”窗口中选择框架集窗口中选择框架集 在“设

40、计”视图中，单击框架集的某一内部框架边框，（要执行这一操作，框架边框必须是可见的；如果看不到框架边框，则执行“查看”“可视化助理”“框架边框”命令以使框架边框可见。）在框架集周围显示一个选择轮廓。（3 3）选择不同的框架或框架集）选择不同的框架或框架集 要在当前选定内容的同一层次级别上选择下一框架（框架集）或前一框架（框架集），按住 Alt键的同时按下左箭头键或右箭头键，使用这些键，可以按照框架和框架集在框架集文件中定义的顺序依次选择这些框架和框架集。要选择父框架集（包含当前选定内容的框架集），可以在按住 Alt键的同时按上箭头键。要选择当前选定框架集的第一个子框架或框架集（即，按在框架集文件

41、中定义顺序中的第一个），可以在按住 Alt键的同时按下箭头键。（一）本课教学目标（一）本课教学目标 1掌握合并单元格及插入嵌套表格的方法。2了解模板的概念和用途。3学会创建网页模板。4掌握定义、编辑可编辑区域的基本方法。5能够根据网站的需要创建网页模板。（二）教学设计与教学建议（二）教学设计与教学建议 1 1课堂引入分析课堂引入分析 在进行大量的页面制作的时候，很多页面会用到相同的布局、图片和文字等元素。为了避免一次次地重复劳动，可以将具有相同版面结构的页面制作成模板，然后基于模板创建新的网页，最后根据需要对页面进行改动，加入个性化的内容。第第6课课 事半功倍事半功倍 演示模板范例：给学生展示

42、一些比较有特点的网页模板，激发学生对模板的兴趣和认识，对网页模板有一个初步的了解和感性认识。提出任务：用一节课时间，学习如何创建网页模板。2 2重点内容分析重点内容分析（1 1）模板的概念和用途）模板的概念和用途 模板可以被理解成一种网页模型，利用这个模型能够方便地做出很多页面，使用模板可以避免重复地在每个页面输入或修改相同的部分，等网站改版的时候，只要改变模板的设计，就能自动更改所有基于这个模板创建的网页。模板文件的扩展名为.dwt，存放在网站根目录的Templates文件夹中。（2）创建模板文件）创建模板文件利用“资源”面板可以直接创建模板文件，这是一种最直接最直观的方式，如图6.1所示。

43、建议教师引导学生采用这种方式创建模板文件，这样对于整个网站的资源构架会有个一个逐步的了解，对于“资源”面板的用途也逐一掌握。图6.1 资源面板 （3）定义可编辑区）定义可编辑区可编辑区域是基于模板的文档中的未锁定区域，它是模板用户可以编辑的部分。模板创作者可以将模板的任何区域指定为可编辑的，要让模板生效，它应该至少包含一个可编辑区域，否则，将无法编辑基于该模板的页面。可以把图像、文本、表格等页面元素设置成可编辑区，也可把整个表格及表格里的内容设置成一个可编辑区，还可以把某个单元格及内容设置成一个可编辑区，但不能把几个不同的单元格及内容设置为同一个编辑区。可编辑区域在模板中由高亮显示的矩形边框围

44、绕，该边框使用在首选参数中设置的高亮颜色，如图6.2所示。该区域左上角的选项卡显示该区域的名称。如果在文档中插入空白的可编辑区域，则该区域的名称会出现在该区域内部。这一点，教师可通过对比的方式给学生解释清楚。图6.2 可编辑区（4 4）表格的高级应用）表格的高级应用在本课的任务中，表格被广泛应用，在规则表格的基础上，通过拆分单元格和插入嵌套表格的方式，实现网页布局的特殊需要。拆分单元格选中需要拆分的单元格，通过以下四种方法可以实现：a.执行“修改”“表格”“拆分单元格”命令。b.在选中的单元格上右击，执行“表格”“拆分单元格”命令。c.按下组合键CTRL+ALT+S。d.单击“属性检查器”中的

45、“拆分单元格为行或列”按钮 。插入嵌套表格 为了更好地布局网页，在表格中还可以嵌套新的表格。总表格负责整体的排版，嵌套表格负责各个子栏目的排版，并插入到总表格的相应位置中。总表格的高度和宽度一般使用像素值，嵌套表格一般使用百分比，以避免嵌套表格的高度和宽度与总表格发生冲突。（三）教学补充（三）教学补充 1 1创建模板文件的其他方法创建模板文件的其他方法 除了利用“资源”面板新建模板文件的方式以外，还可以通过以下方法创建。（1 1）“新建文档新建文档”的方式的方式 执行“文件”“新建”命令，打开“新建文档”对话框，如图6.3所示。选择“空白页”类别中的“HTML模板”，单击“创建”按钮即可。（2

46、 2）“另存为模板另存为模板”的方式的方式 打开已经制作好的网页文件，执行“文件”“另存为模板”命令，打开“另存为模板”对话框，如图6.4所示。在“站点”下拉列表框中选择要保存模板的站点，在“另存为”文本框中输入模板的文件名，单击“保存”按钮即可。图6.3 “新建文档”对话框图6.4 “另存为模板”对话框 2 2模板区域的类型模板区域的类型 创建模板时，可编辑区域和锁定区域都可以更改。但是，在基于模板的文档中，模板用户只能在可编辑区域中进行更改；无法修改锁定区域。共有四种类型的模板区域：（1 1）可编辑区域）可编辑区域是基于模板的文档中的未锁定区域；它是模板用户可以编辑的部分。模板创作者可以将

47、模板的任何区域指定为可编辑的。要让模板生效，它应该至少包含一个可编辑区域；否则，将无法编辑基于该模板的页面。（2 2）重复区域）重复区域是文档中设置为重复的布局部分。例如，可以设置重复一个表格行。通常重复部分是可编辑的，这样模板用户可以编辑重复元素中的内容，同时使设计本身处于模板创作者的控制之下。在基于模板的文档中，模板用户可以根据需要使用重复区域控制选项添加或删除重复区域的副本。（3 3）可选区域）可选区域是用户在模板中指定为可选的部分，用于保存有可能在基于模板的文档中出现的内容（如可选文本或图像）。在基于模板的页面上，模板用户通常控制是否显示内容。（4 4）可编辑标签属性）可编辑标签属性使

48、用户可以在模板中解锁标签属性，以便该属性可以在基于模板的页面中编辑。例如，可以“锁定”在文档中出现的图像，但让模板用户将对齐设为左对齐、右对齐或居中对齐。一、单元概述一、单元概述 在本单元中，我们将综合运用框架和模板创建网页，通过制作“日常生活”篇和“校园内外”篇中的网页，学习使用“鼠标经过图像”制作导航栏进行站内导航，对锚记链接、水平线、图像热点超链接等编辑网页的常用技巧加以应用，并运用滚动字幕、CSS样式和层布局及美化网页。二、学习目标二、学习目标 通过前面2个单元的学习，学生已经具备了一些网站制作和网页设计的基本知识，掌握了一定的网站编辑技能。本单元的内容都是网页制作过程中较为常用的技巧

49、，知识点多而繁杂，因此要在此单元的教学中注重能力的培养，而不是将注意力停留在学生具体学会了哪个命令、那个面板的使用上。知识：使用使用“鼠标经过图像”制作导航栏，插入水平线，制作锚点链接，制作图像热点链接，使用滚动字幕，应用CSS样式和层布局。技能：通过模板创建网页，在网页上应用模板，用多种方法创建相似网页，将网页从模板中分离，正确设置框架网页中的链接目标。在学生的学习过程中，动员学生通过动手实践操作来理解本单元的内容，不妨多采用小组讨论和自学的方式，使学生深入地体会到软件设计的理念及内部联系，从而起到举一反三的积极作用。第第3单元单元 编辑网页编辑网页 三、重点难点三、重点难点 教学重点教学重

50、点 1掌握应用模板创建网页的方法，能够通过鼠标的形状变化分辨可编辑区域和锁定区域。2熟悉“资源”面板的使用。3能够制作导航按钮实现站内导航。4灵活地使用水平线分隔网页元素。5学会使用锚记链接、图像热点链接，掌握网页内部、网站内外等跳转。6综合利用滚动字幕和AP Div元素（层），增强网页表现力。7应用CSS样式表和层美化网页。教学难点教学难点 1套用和分离模板，综合运用多种方式快速生成网页。2根据需要正确设置链接对象的目标框架。3.使用滚动字幕制作动态标题，与AP Div元素（层）的搭配使用。4.CSS样式表的导入导出应用。四、学时安排四、学时安排 本单元共5课，总计5学时，每课占用1学时。（