八年级下册教案.doc

信息技术八年级下册教案第1课 新手入门（一）本课教学目标 1知识目标：掌握互联网、网页与首页、网站等网页设计与网站制作的基本知识。 2能力目标：学会使用记事本作为网页编辑工具来编辑HTML代码并生成网页。掌握浏览网页的方法并理解网页编辑工具与浏览工具之间的关系。 3情感目标：培养审美能力和动手能力。（二）教学重点：网页设计与网站制作的基本知识（三）教学难点：使用记事本作为网页编辑工具来编辑HTML代码并生成网页（四）教学设计 1课堂引入分析首先打开IE浏览器，在地址栏中输入网址，打开一个范例网站的首页，单击首页中的动画、超文本、图片等网页元素，可以分别链接到网站中的其他页面中。在操作过程中教师提出问题，引导学生思考互联网、网站、网页、首页等术语的含义，以及它们之间的关系，尝试让学生体会浏览器和网页的关系，从而将网站设计与网页制作的基本知识进行概括总结并明确落实到每个学生身上。在进行教学的时候，一定要让学生认识到已有知识的重要性，充分利用已经具备的技能去尝试解决新问题，从而变被动学习为主动探究。引导学生充分利用教材中的“视野拓展”和“创作天地”板块进行自学，这实际上是在实施分层教学，以巩固本课的知识技能为主，适当地进行补充，让部分基础较好的同学在完成基本任务之后也能有事可做，给学生创造出提高的空间。作为网站制作的起始课，教师要切实地关注每个学生，尤其是在以前的学习过程中表现出学习能力较弱的学生，要确保每个学生都有一个好的开始，都能将第一个网页作品保存到教师指定的位置（本地磁盘或网络中的指定目录）。教师应对所有完成保存网页任务的学生进行及时地评价与鼓励，保护学生的学习积极性。另外，对完成基本任务并有所创新的同学重点表扬，鼓励学生主动学习，有计划地营造良性竞争的氛围。2新课讲解（1）在本课中通过欣赏站点，使学生了解和掌握互联网、网页与首页、网站、IE浏览器的基本含义，并且能够明确它们相互之间的关系。学生在学习网站制作之前已经接触过网站，浏览过各式各样的网页，因此教师在完成此教学任务的时候，可以充分利用学生已有基础，不必完全进行讲授式教学，可以结合启发、设问等方法，使学生尽可能地自己总结出相关知识。（2）使用记事本作为网页编辑工具来编辑HTML代码并生成网页。在进行此部分教学的时候，先借助学生已有技能，启动记事本，复制并粘贴素材文件中提供的HTML代码，命名并保存文件，然后在浏览器中进行预览。对于HTML代码部分，尝试通过修改属性值的方法，引导学生探索标签的含义及其与属性值的对应关系，这也同时是对“创作天地”板块中的练习进行提示的过程，然后通过分析此HTML实例，讲解HTML语言的基本结构，对基本的 、标签进行初步介绍，鼓励有余力的同学通过“视野拓展”板块进行自学，并独立完成“创作天地”中的练习。教师演示引导学生思考扩展名对文件的影响，既包括其对文件图标的影响，也包括调用应用程序的影响，从而引出程序关联的知识进行补充讲解，见图1.1和图1.2。(3) 保存并上传文件本课是学生第一次上传网页作业，因此要着力于培养学生的学习习惯，尤其是在保存作业至本次磁盘之后，一定要尽可能地让学生将文件上传到网络中的指定位置，这不仅便于教师评价，更便于学生之间互评。学生可以通过比较作品的差异看到自身在整个集体中的位置，从而反思自身作品，迸发灵感，二次创作，这样在整个班级中将会产生更多的富有创意的优秀作品。学生还可以随时查看上传作业的情况，作为调整自身作业完成进度的参考。（五）教学补充 本课对HTML语言进行了简单的介绍，在“视野拓展”和“创作天地”板块中都安排了此部分的内容。 教师可以补充一些简单的HTML标签和属性，提供给有兴趣的学生作为提高练习使用，也为今后更好地使用“标签选择器”选择对象打下基础。如：（六）上机练习： 1. 使用记事本作为网页编辑工具来编辑HTML代码并生成网页。（七）教学反思： 本课学生掌握的较好，很多同学对网页设计很感兴趣，有3个同学小学学习过网页制作，所以本课对他们来说轻而易举。部分同学无法正确显示网页，因为在书写html代码时粗心，有些字母打错，经调整可以正确显示。第2课 轻松上路（一）本课教学目标 1知识目标：了解网站的开发流程。掌握开发个人网站的步骤。熟悉Dreamweaver 8 的工作区布局和界面环境。 2能力目标：能够根据网站主题设计网站结构。掌握使用向导创建站点的方法与步骤。 3. 情感目标： 培养学生创作思维，审美能力。（二）教学重点：规划网站及创建站点（三）教学难点：创建站点 （四）教学设计 1课堂引入分析前面已经掌握了网站、网页、网页的组成元素等基础知识，现在就来了解开发建设一个网站的过程中需要进行的工作。在进行网站建设的时候，需要先进行需求分析，要对网站的主题、素材、规划内容综合考虑。本课首先要解决的正是网站的组织结构问题，我们以“安全自护我能行”为例对网站的组织结构图进行讲解，要求学生掌握围绕主题确定网站结构及网页内容的方法。规划好站点后，就可以开始着手创建站点了。使用Dreamweaver 8 创建站点，当然要先熟悉软件的工作环境。我们在这里只需要简单介绍即可，因为本软件的文档窗口与Office系列软件相似，面板组又和同一公司出品的Flash软件雷同，只需要简单地提示学生并快速演示工作区布局即可。创建站点的时候，使用站点定义向导是很好的选择，尤其适合初学者使用，教师可提示学生使用“站点定义”对话框中的“高级”标签也能够创建站点，功能更为强大，速度也更快，推荐学生在今后的创作过程中尝试使用。2新课讲解（1）启动Dreamweaver 8，讲解Dreamweaver 8的工作界面。在本课讲解网站开发流程之后，迅速将课题引导至规划站点上来，引导学生围绕网站主题“安全自护我能行”展开讨论，共同思考本网站应该如何规划，依照先整体后局部，先简单后复杂的原则去分层、分角度设计网站结构和网页内容，让学生体验完整的规划过程，以便对“创作天地”中布置的课外提高任务起到降低难度的作用。 （2） 创建站点是本课的重要内容，要求所有学生一定要掌握使用“站点”菜单的“新建站点”命令创建站点的方法，如图2.1所示，可以通过提示或在今后的教学过程中演示渗透来介绍使用“文件”面板创建站点的方法，如图2.2所示，尽量使学生能够熟悉如图2.3所示的“管理站点”对话框，并且弄清楚在此对话框中的“删除”站点并非删除掉网站文件本身，仅仅是删除在Dreamweaver 8对此站点设置的信息而已。（五）教学补充 1.切换网站 当学生使用的计算机具有磁盘保护的功能，或者在Dreamweaver 8 中创建了多个待编辑的网站时，学生启动软件后，系统不会恰好打开需要编辑的站点，此时可以提示学生使用“文件”面板来打开需要的网站。其操作过程如图2.4、2.5和2.6所示。2.网站组成 在创建站点的过程中，教师不可避免地会遇到站点的组成问题，一般来说在Dreamweaver 8中创建的站点分为三部分：本地站点、远程站点和测试站点，讲清楚此三部分的含义，才能正确设置站点。 本地站点：这是我们创建站点的工作目录，用来存放网页和素材，它可以位于学生的本地计算机，也可以位于教师配置的网络服务器上。 远程站点：远程站点是用来存储我们创建的站点文件的文件夹，这些文件用于测试、生产、协作和发布站点。如果想在不连接Internet时测试站点，可以在本地计算机上通过软件设置的办法去模拟Web服务器环境。 测试站点：用来测试动态页面的站点，适用于动态网页。 3.动态网页和静态网页 至于动态网页和静态网页的区别，教师可以简单概括讲解如下： 动态网页和静态网页是相对的，动态网页是指内容由站点数据库中变化的数据来显示的网页，静态网页和动态网页的扩展名不同，静态网页一般 是以.htm、.html、.shtml、.xml等为扩展名，而动态网页则是以.asp、 .jsp、 .php、.perl、.cgi等为扩展名的。教师还可以提供学生一些动态网站的地址，让学生通过自己的实际操作去体会二者的区别。（六）上机练习：1.以“快乐时光有你相伴”为名的表达友情的主题网站进行站点规划设计。要求：（1）使用组织结构图来表现层次关系 （2）层次清晰，连接关系清楚，每个网页的内容要安排得当。（七）教学反思： 学生对于站点的掌握还不是很好，在规划网站上思路欠缺，内容的安排上想法少，能完成任务的只有一半，还需要在今后的授课当中不断讲解。第三课 开篇之作（一）本课教学目标 1进一步熟悉Dreamweaver 8的工作界面。 2. 掌握利用“文件”面板打开网站的方法。 3学会根据网站素材的分类规划网站的文件夹。 4熟练地创建并保存网页。 5. 掌握设置网页标题的方法。 6. 能够根据网页内容使用表格恰当布局。 7. 学会设置网页背景色及表格背景图像。 8. 初步认识并尝试使用标签选择器选择对象。 9. 熟练地使用快捷键在浏览器中预览网页效果。 （二）教学重点：在“文件”面板中规划站点（三）教学难点：在“文件”面板中规划站点 （四）教学设计 1课堂引入分析 当站点规划并创建完毕之后，要进行的工作首当其冲就是制作网站的首页。首页作为网站的门面，对网站来说至关重要，因此我们要尽量将首页制作的富有吸引力。2新课讲解（1）在“文件”面板中规划站点 首页需要使用的素材必须存放在网站中才能被它引用，所以我们要为素材建立文件夹，将不同类别的素材分门别类地存放，便于管理。 打开“文件”面板，模仿在windows中的操作，右击网站名“安全自护我能行”，在弹出的快捷菜单中执行“新建文件夹”命令，此时文件夹名处于可编辑状态，我们只需要直接输入文件夹名即可完成命名，创建网页也可以采用此方法，如图3.1所示。与使用“新建”菜单来创建网页相比，在“文件”面板中操作更为简单快捷。当需要更改网站中的网页名或文件夹名时，可右击网页名或文件夹名，执行弹出的快捷中的“编辑”“重命名”命令，或直接使用快捷键F2。为素材归类存放准备的文件夹建立完毕之后，我们要将素材存放到相应的目标文件夹中。此时可以考虑暂时脱离Dreamweaver 8 的软件环境，使用windows的资源管理器进行操作，这样做的好处是可以批量复制粘贴文件，尤其是素材准备充分的情况下，能够节省大量的时间，这种方法优于在网页中先使用素材后再逐个保存到网站中的方法。 在教材中我们所介绍的正是此种方法。至于传统的先使用素材后保存到指定文件夹的方法，虽然不推荐使用，但是也可以介绍给学生，其过程如图3.2所示（此示意图是以在网页中插入图像为例的）。 创建首页的过程与创建普通网页并无实质性的区别，系统区分首页和普通网页依赖于文件名，如果网页被命名为index.html(index.htm)或者default.html(default.htm)，那么在将来发布网站的时候就会指定该网页为首页，此原则是由发布站点的软件所决定的，作为使用者我们只需要遵守该原则，在Dreamweaver中将首页命名为index.html(index.htm)，其他网页链接在它下层即可。 （2）设置网页标题 每个网页都有标题，但是网页的标题并不显示在网页文档中，而是显示在浏览器的标题栏中，如果不设置则显示成“无标题文档”，如图3.3所示。 设置网页标题并不复杂，在教材中我们介绍了使用“文档”工具栏中的的“标题”文本框的方法来设置，并在IE中预览效果。如图3.4所示。 （3）设置网页背景 更改首页的背景色，属于设置网页的页面属性，既可以通过“属性检查器”的“页面属性”按钮，也可以通过“修改”菜单的“页面属性”命令完成，弹出的对话框相同。 我们设置背景色的目的是为了让后插入的表格的背景图像能够融合到整个网页中，使画面效果过渡自然，所以对背景颜色要求非常精确。在系统提供的色板中我们无法找到对应的颜色，用拾色器则比较复杂，因此我们采用的是输入十六进制颜色值的方法进行设置，此方法我们在学习Flash的时候曾经讲授过，此处不再赘述。 当网页同时设置了背景颜色和背景图像的时候，系统只会显示背景图像，忽略背景颜色。 （4）使用表格对页面布局 插入表格是在网页设计中经常采用的页面布局方式，使用表格控制网页元素的定位，既简单又精确，因此掌握好表格的运用是非常重要的。 当表格用于布局的时候，通常会将边框线设为0像素，这样在浏览器中浏览网页时将不会看到表格边框线。我们在首页中正是如此设置的，表格的边框线在编辑状态下显示为虚线，在IE中预览的时候，边框线并不显示。 当需要选择表格对象（表格、行、列、单元格）的时候，我们推荐使用状态栏中的“标签选择器”来进行。 需要注意的是，随着鼠标在表格中位置的不同，“标签选择器”区域显示的内容也会发生相应的变化，此时我们可单击标签，并观察表格对象的选择状态即可判断所选的对象是否正确。 对于如图3.5所示的2*2的表格来说，当将插入点定位在b1单元格中时，单击“标签选择器”中的，将会选择b1单元格本身，单击，则选中插入点所在的行，即a1和b1单元格，单击，选中整个表格，如果单击，那么选择的将是整个网页，在此过程中，“属性检查器”也跟随对象的不同发生变化，这样便于设置对象的属性。（五）教学补充 1. 通过代码视图或拆分视图设置网页标题在讲解网页标题的时候教师可对文档工具栏中的“显示代码图” 、“显示拆分视图” 、“显示设计视图” 进行介绍，引导学生观察在设置了网页标题之后，代码视图或者拆分视图中的哪个标签的内容发生了变化，自然地引出、标签的作用，如图3.6所示。2. 设置页面属性 在“页面属性”对话框中，我们仅仅设置了背景颜色一个项目，教师此时可引导学生对“外观”类包含的“页面字体”、“大小”、“文本颜色”进行设置，学生完全可以自己理解并自觉应用在网页的设计上。 对“链接”类内容，教师可简单介绍设置链接文本使用的字体、大小，颜色以及活动链接颜色等。（六）上机练习为网站再增加个网页，命名为exl.html,保存路径设置为F:safeother,网页标题为“表格练习”。（七）课后反思通过前两节课的学习，学生对Dreamweaver 8已经有所认识，掌握了它的几个基本工具的使用方法。这节课的基于表格的页面布局起点不高，难度适中，细心的学生都能很好的掌握，做出一些东西后学生很有成就感对Dreamweaver 8中建立网站信心更足了。第4课 星光闪烁（一）本课教学目标 1巩固选择表格对象的方法。 2. 进一步学习设置表格对象的属性。 3掌握在网页中插入Flash动画文件，并学会设置Flash动画的参数的方法，以控制动画的播放效果。 4. 能够灵活地在网页中使用文本。 5. 初步认识并尝试使用辅助设计工具定位网页元素。（二）教学重点网页中插入FLASH、gift、文本等并进行设置（三）教学难点网页中插入FLASH、gift、文本等并进行设置（四）教学设计导入：请学生欣赏插入了星光闪烁（FLASH元件）WELCOME(GIF元件)版权等特殊字符的网页，引起学生的兴趣。新课讲授：（1）调整表格 在实际应用中，我们如果要设置表格对象的属性，前提是选择好表格对象，在前面我们已经探讨过使用“标签检查器”选择表格对象的方法，在本课的教材中介绍了使用Ctrl键搭配鼠标及使用鼠标单击行左或列首选择行、列的方法。 这里我们补充介绍使用表格标题和列标题选择表格和列的方法，使学生最终能够灵活地选择表格对象。其操作方法如下： 将插入点定位在表格内任意位置，当表格出现表格标题及列标题菜单的时候，单击标题菜单，执行“选择表格”或“选择列”命令即可，如图4.1所示。 虽然已经为表格设置了高度和宽度，但这并不意味着表格一定以我们设置的尺寸显示，这是由于表格中的元素尺寸超出表格尺寸造成的。例如，我们在网页中插入一个2行1列的表格，设置表格的属性如下：宽度100，高度200，边框、填充和间距都为0，此时表格的尺寸和我们设置的相同，为100*200像素。如果我们将一个大小为200*100像素的图像插入到任一单元格中，表格的尺寸就会自动调整为200*200，保证内容得以完整显示，如图4.2所示。 填充：单元格中的内容与单元格边框的距离，单位默认为像素。 间距：单元格之间或单元格与表格边框之间的距离，单位默认为像素。 表格属性中的“填充”和“间距”选项如果不进行设置，大多数的浏览器都会默认按照“填充”为1、“间距”为2来显示表格，如果不希望如此显示，就要设置其值。 图4.3是分别将“填充”和“间距”设置为不同的值时表格的显示效果。注意：为了突出显示效果，可以预先将表格的边框设为1个像素的实线。（2）插入Flash动画并设置参数 在教材中介绍了执行 “插入”“媒体”“Flash”命令来插入Flash动画文件，当熟悉Dreamweaver 8的工作界面后，我们一定会喜欢上使用“常用”工具栏中的“媒体”按钮来插入Flash的方法，Dreamweaver 8会自动保留上次使用过的元素，如图4.4所示。（3）在网页中使用文本 在Dreamweaver 8，“插入”工具栏专门提供了一个“文本”工具栏来帮助使用者设置文本和插入特殊字符。 “文本”工具栏中的各个按钮含义如图4.5所示，与使用菜单命令和“属性检查器”搭配设置文本相比，使用工具栏显然操作步骤少，执行速度快。格式化表格 在Dreamweaver 8中，预先定义了很多漂亮的表格样式，我们可以通过格式化表格的操作快速美化表格，省去逐项设置的不便。 其具体步骤如下： （1）选中要格式化的表格，执行菜单“命令” “格式化表格”命令。 （2）在弹出的“格式化表格”对话框中，选择预设方案，此时可以直接使用预设方案，还可以在此对话框中选择一个方案为基础，再进行个人设定，创建出具有个人风格的表格，如图4.6所示，即为自定义风格的表格设置。（五）上机练习完成创作天地中的EX2.HTML效果图（六）课后反思这节课的内容不难，但是结合前几节课的内容对一部分没有按老师要求做的学生有很大的难度，他们要补充完全才能上新课。由此，我发现做网站不比其他事情一定要一步一个脚印否则困难重重。尽管由于主观原因造成的困难同学们还是很快克服了，很好的完成了教学目标。第5课 统一风格（一）本课教学目标 1掌握拆分单元格的方法。 2掌握创建与保存框架集的方法。 3熟练掌握利用鼠标经过图像制作网页导航的方法。 4掌握外部链接和电子邮件链接的制作方法。 5掌握目标设置在网页制作过程中的作用和方法。 （二）教学设计与教学建议 1课堂引入分析 在进行网站制作的时候，为了有效地统一网站的风格，常常需要将页面划分成多个区域，将各个网页的相同内容（如网站标题、网站导航等）固定在一个区域中，使网站导航结构清晰。利用框架可以轻松实现网页结构划分和布局。 演示网页范例：给学生展示一些比较有特点的使用了框架的网页范例，通过观察了解网页布局的基本规律和框架在网页中的作用，对框架有一个初步的了解和感性认识。提出任务：用两节课时间，学习如何创建框架、制作框架网页。在制作的过程中，要注意随时保存文件。 2重点内容分析 （1）创建和保存框架集 利用“新建文档”的方式创建框架集，是比较直接的创建框架的方法。根据实际网页布局的需要，可以方便地选择框架集的样式，从而创建合适的框架。 可以单独保存每个框架集文件和带框架的文档，也可以同时保存框架集文件和框架中出现的所有文档。保存框架集时，要特别引导学生注意和体会保存文件的顺序。先存框架集文件，再保存带框架的文档以及框架中显示的网页文件。 （2）利用鼠标经过图像制作导航按钮 鼠标经过图像由页面载入时显示的原始图像和鼠标指针经过时显示的图像组成，这两个图像应大小相等，如果图像大小不等，将自动调整第2个图像的大小以匹配第1个图像的属性。在浏览器中当鼠标指针移过图像时，图像可以发生变化，利用鼠标经过图像的这种特殊效果，可以制作动态网页导航按钮。 为了制作出效果特殊的鼠标经过图像，所需的原始图像和鼠标经过时显示的图像需要通过图像处理工具进行制作和处理。注意引导鼓励学生自己处理制作图像，以彰显学生个性，培养学生的创造能力。 3归纳提高分析 （1）表格的高级应用 在本课的任务中，表格被广泛应用，在规则表格的基础上，通过合并单元格制作不规则的表格，以实现网页布局的特殊需要。 合并单元格选中需要合并的单元格，通过以下四种方法可以实现：a. 执行“修改” “表格” “合并单元格”命令。b. 在选中的单元格上右击，执行“表格” “合并单元格”命令。c. 按下组合键CTRL+ALT+M。d. 单击“属性检查器”中的“合并所选单元格，使用跨度”按钮 。 设置单元格背景结合插入图像和设置单元格背景，可以实现如教材图5.18所示的图像表格效果。用作表格边框的图像文件，需要利用图像处理工具进行加工处理，以符合页面布局的需要。 （2）目标设置 属性检查器中的“目标”用来设置超链接的打开方式，共有4个选项可供选择。 目标设置部分不太容易理解，在讲解的同时可配以直观有效的例子加以说明。（三）教学补充 1创建框架 创建框架除了利用新建文档的方式以外，还可以通过以下方法创建。 （1）使用预定义的框架集 将插入点放置在文档中。在“插入”栏的“布局”类别中，单击“框架”按钮上的下拉箭头，然后选择预定义的框架集，如图5.1所示。 框架集图标提供应用于当前文档的每个框架集的可视化表示形式。框架集图标的蓝色区域表示当前文档，而白色区域表示将显示其他文档的框架。 图5.1 预定义框架集（2）设计框架集在创建框架集或使用框架前，执行“查看” “可视化助理” “框架边框”命令，使框架边框在“文档”窗口的“设计”视图中可见。执行“修改” “框架集”命令，然后从子菜单选择拆分项（例如“拆分左框架”或“拆分右框架”）。 Dreamweaver 将窗口拆分成几个框架。如果打开一个现有的文档，它将出现在其中一个框架中。 2. 在文档窗口中选择框架和框架集在“文档”窗口的“设计”视图中，在选定了一个框架后，其边框被虚线环绕；在选定了一个框架集后，该框架集内各框架的所有边框都被淡颜色的虚线环绕。 （1）在“文档”窗口中选择框架在“设计”视图中，按住 Alt 键的同时单击框架内部，在框架周围显示一个选择轮廓。 （2）在“文档”窗口中选择框架集 在“设计”视图中，单击框架集的某一内部框架边框，（要执行这一操作，框架边框必须是可见的；如果看不到框架边框，则执行“查看” “可视化助理” “框架边框”命令以使框架边框可见。） 在框架集周围显示一个选择轮廓。 （3）选择不同的框架或框架集 要在当前选定内容的同一层次级别上选择下一框架（框架集）或前一框架（框架集），按住 Alt键的同时按下左箭头键或右箭头键，使用这些键，可以按照框架和框架集在框架集文件中定义的顺序依次选择这些框架和框架集。 要选择父框架集（包含当前选定内容的框架集），可以在按住 Alt键的同时按上箭头键。要选择当前选定框架集的第一个子框架或框架集（即，按在框架集文件中定义顺序中的第一个），可以在按住 Alt键的同时按下箭头键 。（四）上机练习学生自己上机操作，完成图5.18内容（五）课后反思本课内容较多，知识点相对较多，学生在已有的基础上掌握起来比较费劲，故本课分成两次讲解。改变教学进度后学生的接受程度好很多。总之，学生的掌握较好，完成了教学目标。第6课 事半功倍（一）本课教学目标 1掌握合并单元格及插入嵌套表格的方法。 2了解模板的概念和用途。 3学会创建网页模板。 4掌握定义、编辑可编辑区域的基本方法。 5能够根据网站的需要创建网页模板。 （二）教学设计与教学建议 1课堂引入分析 在进行大量的页面制作的时候，很多页面会用到相同的布局、图片和文字等元素。为了避免一次次地重复劳动，可以将具有相同版面结构的页面制作成模板，然后基于模板创建新的网页，最后根据需要对页面进行改动，加入个性化的内容。 演示模板范例：给学生展示一些比较有特点的网页模板，激发学生对模板的兴趣和认识，对网页模板有一个初步的了解和感性认识。 提出任务：用一节课时间，学习如何创建网页模板。 2重点内容分析 （1）模板的概念和用途 模板可以被理解成一种网页模型，利用这个模型能够方便地做出很多页面，使用模板可以避免重复地在每个页面输入或修改相同的部分，等网站改版的时候，只要改变模板的设计，就能自动更改所有基于这个模板创建的网页。模板文件的扩展名为.dwt，存放在网站根目录的Templates文件夹中。 （2）创建模板文件利用“资源”面板可以直接创建模板文件，这是一种最直接最直观的方式，如图6.1所示。建议教师引导学生采用这种方式创建模板文件，这样对于整个网站的资源构架会有个一个逐步的了解，对于“资源”面板的用途也逐一掌握。图6.1 资源面板（3）定义可编辑区可编辑区域是基于模板的文档中的未锁定区域，它是模板用户可以编辑的部分。模板创作者可以将模板的任何区域指定为可编辑的，要让模板生效，它应该至少包含一个可编辑区域，否则，将无法编辑基于该模板的页面。可以把图像、文本、表格等页面元素设置成可编辑区，也可把整个表格及表格里的内容设置成一个可编辑区，还可以把某个单元格及内容设置成一个可编辑区，但不能把几个不同的单元格及内容设置为同一个编辑区。图6.2 可编辑区可编辑区域在模板中由高亮显示的矩形边框围绕，该边框使用在首选参数中设置的高亮颜色，如图6.2所示。该区域左上角的选项卡显示该区域的名称。如果在文档中插入空白的可编辑区域，则该区域的名称会出现在该区域内部。这一点，教师可通过对比的方式给学生解释清楚。（4）表格的高级应用在本课的任务中，表格被广泛应用，在规则表格的基础上，通过拆分单元格和插入嵌套表格的方式，实现网页布局的特殊需要。 拆分单元格选中需要拆分的单元格，通过以下四种方法可以实现：a. 执行“修改” “表格” “拆分单元格”命令。b. 在选中的单元格上右击，执行“表格” “拆分单元格”命令。c. 按下组合键CTRL+ALT+S。d. 单击“属性检查器”中的“拆分单元格为行或列”按钮 。 插入嵌套表格 为了更好地布局网页，在表格中还可以嵌套新的表格。总表格负责整体的排版，嵌套表格负责各个子栏目的排版，并插入到总表格的相应位置中。总表格的高度和宽度一般使用像素值，嵌套表格一般使用百分比，以避免嵌套表格的高度和宽度与总表格发生冲突。 2模板区域的类型 创建模板时，可编辑区域和锁定区域都可以更改。但是，在基于模板的文档中，模板用户只能在可编辑区域中进行更改；无法修改锁定区域。共有四种类型的模板区域： （1）可编辑区域是基于模板的文档中的未锁定区域；它是模板用户可以编辑的部分。模板创作者可以将模板的任何区域指定为可编辑的。要让模板生效，它应该至少包含一个可编辑区域；否则，将无法编辑基于该模板的页面。 （2）重复区域是文档中设置为重复的布局部分。例如，可以设置重复一个表格行。通常重复部分是可编辑的，这样模板用户可以编辑重复元素中的内容，同时使设计本身处于模板创作者的控制之下。在基于模板的文档中，模板用户可以根据需要使用重复区域控制选项添加或删除重复区域的副本。 （3）可选区域是用户在模板中指定为可选的部分，用于保存有可能在基于模板的文档中出现的内容（如可选文本或图像）。在基于模板的页面上，模板用户通常控制是否显示内容。 （4）可编辑标签属性使用户可以在模板中解锁标签属性，以便该属性可以在基于模板的页面中编辑。例如，可以“锁定”在文档中出现的图像，但让模板用户将对齐设为左对齐、右对齐或居中对齐。（四）上机练习学生自己上机操作，完成图6.1内容（五）课后反思本课内容较多，知识点相对较多，学生在已有的基础上掌握起来比较费劲，故本课分成两次讲解。改变教学进度后学生的接受程度好很多。总之，学生的掌握较好，完成了教学目标。第7课 驾轻就熟（一）本课教学目标 1掌握利用模板创建网页的方法。 2学会运用Flash按钮制作导航栏进行站内导航。 3了解链接对象的目标框架的含义。 （二）教学设计与教学建议 1课堂引入分析在第2单元中，我们设计了模板和框架，本课主要任务就是应用框架和模板打造风格统一的网页，这样才能真正地加快网页制作的速度。在教学中，引导学生观察使用常规方法编辑的网页和基于模板创建网页的异同，并对鼠标指针形状的变化引起重视。 学生在进行探索尝试新知识的时候，经常会出现操作错误，当计算机弹出窗口或对话框对使用者进行提示时，很多学生会下意识地关闭提示信息，忽略掉系统“善意”的“提醒”，缺乏人机交互的意识，这将导致学生完全寄希望于教师或他人的指导，造成自身的时间浪费及教师的分身无术，最终导致课堂效率低下和学生能力发展停滞不前。如要解决上述情况，需要教师针对此种情况进行专门的强化训练，引导学生重视计算机提供的反馈信息，遵循计算机的工作方式，只有如此才能驾驭它，使之顺从地为我们服务。也许我们不能完全避免出现问题，但是能否利用工具灵活快速地解决问题则是衡量现代人信息素养的重要标准。当应用模板创建网页后，制作导航栏成为势在必行的工作。导航栏的重要性众所周知，制作方法也多种多样，本课我们要介绍的是使用动感十足又操作简单的Flash按钮来充当导航栏按钮。在Dreamweaver 8中我们可以不必使用Flash软件而直接制作具有动态效果的Flash按钮。 2重点内容分析（1）应用模板创建网页 应用模板在本课是首次接触，模板设计好后，要利用它来创建网页或将其应用于已经存在的网页上，才能发挥作用。应用模板的步骤并不复杂，但是要建立模板也是一种“资源”的理念，才能利用好模板，制作出具有“换肤”效果的网页，如图7.1就是将“日常生活”页面应用了事先制作好的蓝色外观模板之后的效果(此模板在教参的素材中提供)。（2）Flash按钮的使用 在Dreamweaver 8中，共提供了40余种Flash按钮的样式，我们只需要选择样式，输入按钮显示文本并设置链接就可以使用。需要注意的就是保存路径，在“插入Flash按钮”对话框中虽然提供了设置保存路径的按钮，但是只要我们设置的路径与链接目标文件不在同一个文件夹中，系统就会弹出如图7.2所示的提示信息。为了保持网站结构的清晰，我们还是希望所有的素材和网页能够分别存放，那么可以在保存Flash按钮到链接网页所在的文件夹之后，再手工调整其保存位置，具体方法如下： 打开“文件”面板，将保存在d:safercsh文件夹中的扩展名为swf的按钮文件，用鼠标直接拖动到d:safercshother文件夹中，当系统弹出如图7.3所示的对话框，询问是否更新链接时，单击“更新”按钮即可，这样既保持网站结构清晰，又使链接有效，两全其美。 如果我们创建的Flash按钮并不用来进行站内导航，仅仅用来装饰或者与Internet中的资源链接，那么将“插入Flash按钮”对话框中的“链接”文本框保持空白或输入如格式的URL地址，系统将不限定此按钮在网站中的保存位置，我们可以将按钮保存到网站中的任意文件夹下，系统都不会弹出信息要求更改路径。（三）教学补充 更新模板 模板的功能就是把网页布局和内容分离，这样相同布局的网页可以通过模板创建，因此能极大地提高工作效率。 当对模板更新后，所有通过模板创建网页和应用此模板的网页都可以随之更新，因此我们就可以利用此功能在短时间内重新设计网站并对大量的网页进行修改。具体步骤如下： （1）打开已有的网页模板，进行修改。 （2）执行“文件” “保存”命令保存模板，系统弹出如图7.4所示的“更新模板文件”对话框，提示是否更新。图7.4 “更新模板文件”对话框（3）单击“更新”按钮，系统弹出如图7.5所示的“更新页面”对话框，在“查看”下拉列表中选择“文件使用”选项 ，在“更新”项目中确保选中了“模板”复选框。单击“开始”按钮，Dreamweaver 8将按照指示更新文件。如果选中了“显示记录”复选框，系统将提供它试图更新的文件的信息，包括它们是否成功更新的信息。 （四）上机练习学生自己上机操作，完成图7.1内容（五）课后反思本课内容较多，知识点相对较多，学生在已有的基础上掌握起来比较费劲，故本课分成两次讲解。改变教学进度后学生的接受程度好很多。总之，学生的掌握较好，完成了教学目标。第8课 按图索骥（一）本课教学目标 1灵活地使用水平线分隔网页元素。 2学会插入命名锚记以创建锚点链接。 3. 学习使用Flash文本作为链接对象。（二）教学设计与教学建议 1课堂引入分析 当初步制作“交通出行”网页后，可以看出本页包含的内容很多，不同主题的文字和图片罗列在一起，难以区分，因此我们考虑使用水平线分隔元素，并为页面添加锚点链接，实现网页的局部跳转，快速地将访问者带到特定主题或者网页顶部。 2重点内容分析（1）插入水平线水平线对于组织信息很有用。插入水平线，操作比较简单，执行菜单“插入”HTML “水平线”命令就可以插入默认属性的水平线，其宽度为100%，高为2个像素，带有阴影。另外，还可以打开“插入”工具栏中的HTML工具