资源简介

课件100张PPT。教学参考清华大学“信息技术教学一条龙”实验教材编写组第３单元第２单元第４单元 第１单元清华大学“大、中、小学一条龙教学研究”实验教材 信息技术系列
《信息技术》 八年级 下册第 1 课第 3 课第 2 课第 5 课第 6 课第 7 课第 8 课第 9 课第 10 课第 12 课第 13 课第 14 课教学参考 第 1 单元第 2 单元第 3 单元第 4 单元清华大学“大、中、小学一条龙教学研究”实验教材编写组第 4 课第 11 课第 15 课第16 课 一、单元概述
在本单元中，我们从生成简单网页入手，理解网页设计的基础知识；然后规划站点，了解网站建设的开发流程；最后利用Dreamweaver CS5创建站点，并制作首页。
二、学习目标
本单元是学生初次接触用于制作网站的软件Dreamweaver CS5，因此首先让学生在欣赏网站的同时了解网页设计与网站制作的基本常识是必要的，在进行软件介绍的时候重点强调网页编辑软件的优越性，另外要让学生明确的是：在着手创建网站之前，必须要先对网站进行站点规划，最后通过创建“安全自护我能行”为题的网站使学生经历“规划网站 →创建站点→编辑首页”的网站初步建设过程。
通过本单元循序渐进的学习过程，学生将按部就班地掌握：使用HTML语言编写的代码生成网页、用IE浏览器预览网页、网站的开发流程、创建站点、创建首页、规划素材文件、为页面添加网页标题和背景色 、使用表格初步布局
第1单元 初建网站网页 、调整表格、设置网页背景图像、插入Flash动画并设置参数、插入普通文本和特殊字符、保存网页等知识与技能。
在教学过程中要尽可能地利用学生已有的知识技能分析并解决新的问题，例如网页中的背景色调整、表格设置与调整、插入文本、保存网页等，其操作方法与Office系列软件和上学期学过的Flash 软件具有较大的相似程度，此时教师可以引导学生知识迁移、自行探索发现解决问题的方法，而教师则可将注意力集中在更需要关注的学生身上，最大限度地提高课堂效能，将问题在课上给予解决。
教师在布置单元任务或课堂任务的时候，要鼓励学生不完全模仿范例，而是利用素材进行网页的创意和设计，争取留给学生更多的空间去发挥创意。
在进行评价的时候要对创意部分及时给予鼓励，充分利用各种方式对学生作品进行展示，引导不同层次的学生之间形成良性竞争，从而在班级教学中创造出和谐上进的学习氛围，对信息技术教学产生推动作用，充分体现“学生为主体，教师为主导”的教学理念。
三、重点难点 教学重点
1．掌握互联网、网页与首页、网站等网页设计与网站制作的基本知识。
2．学会使用HTML代码在记事本工具中制作网页并且通过用IE浏览器预览网页。
3．了解网站的开发流程，能够围绕网站主题设计组织结构图。
4．熟悉Dreamweaver CS5的工作界面。
5．掌握创建站点、规划素材文件的方法。
6．学会创建首页、设置网页标题和背景色、保存网页及在IE中预览网页。
7．能够根据网页内容对页面进行合理的表格布局，并调整表格属性。
8．能够灵活地将图像、Flash动画、文本和特殊字符插入到页面中，并且通过“属性检查器”设置以上网页元素的属性。
教学难点
1．HTML语言的结构，标签和属性的含义。
2．通过观察文档图标和扩展名判断该文档调用的启动软件。
3. 能够根据网站主题的需要，搜集并整理相关素材，去粗取精、去伪存真。
4. 通过“窗口”菜单和面板组对工作界面进行自由布局安排，打造适合自己使用的软件环境。
5. 使用“标签选择器”来选择网页元素，以设置其属性。
6. 利用像素和百分比两种度量单位来控制网页元素的尺寸。
四、学时安排
本单元共4课，总计4学时，每课占用1学时。
（一）本课教学目标
1．掌握互联网、网页与首页、网站等网页设计与网站制作的基本知识。
2．学会使用记事本作为网页编辑工具来编辑HTML代码并生成网页。
3．掌握浏览网页的方法并理解网页编辑工具与浏览工具之间的关系。
（二）教学设计与教学建议
1．课堂引入分析
在当前的社会生活中，网络正在发挥着越来越重要的作用，大量制作精美、功能强大的网站出现在互联网上。对于学生来说，制作个人网站也正在成为一种流行时尚。
通过本教材的学习可以轻松帮助学生入门，并逐步亲手打造属于自己的个性十足的网站。 第1课 新手入门在本课的引入设计中，教师可以这样设计：
首先打开IE浏览器，在地址栏中输入网址，打开一个范例网站的首页，单击首页中的动画、超文本、图片等网页元素，可以分别链接到网站中的其他页面中。在操作过程中教师提出问题，引导学生思考互联网、网站、网页、首页等术语的含义，以及它们之间的关系，尝试让学生体会浏览器和网页的关系，从而将网站设计与网页制作的基本知识进行概括总结并明确落实到每个学生身上。
在进行教学的时候，一定要让学生认识到已有知识的重要性，充分利用已经具备的技能去尝试解决新问题，从而变被动学习为主动探究。
教师可引导学生充分利用教材中的“视野拓展”和“创作天地”板块进行自学，这实际上是在实施分层教学，以巩固本课的知识技能为主，适当地进行补充，让部分基础较好的同学在完成基本任务之后也能有事可做，给学生创造出提高的空间。
作为网站制作的起始课，教师要切实地关注每个学生，尤其是在以前的学习过程中表现出学习能力较弱的学生，要确保每个学生都有一个好的开始，都能将第一个网页作品保存到教师指定的位置（本地磁盘或网络中的指定目录）。
教师应对所有完成保存网页任务的学生进行及时地评价与鼓励，保护学生的学习积极性。另外，对完成基本任务并有所创新的同学重点表扬，鼓励学生主动学习，有计划地营造良性竞争的氛围。 2．重点内容分析
（1）网页设计与网站制作的基本知识是本课的教学重点
在本课中通过欣赏站点，使学生了解和掌握互联网、网页与首页、网站、IE浏览器的基本含义，并且能够明确它们相互之间的关系。
学生在学习网站制作之前已经接触过网站，浏览过各式各样的网页，因此教师在完成此教学任务的时候，可以充分利用学生已有基础，不必完全进行讲授式教学，可以结合启发、设问等方法，使学生尽可能地自己总结出相关知识。
（2）使用记事本作为网页编辑工具来编辑HTML代码并生成网页是本课的难点
在进行此部分教学的时候，可以先借助学生已有技能，启动记事本，复制并粘贴素材文件中提供的HTML代码，命名并保存文件，然后在浏览器中进行预览。
对于HTML代码部分，教师可以尝试通过修改属性值的方法，引导学生探索标签的含义及其与属性值的对应关系，这也同时是对“创作天地”板块中的练习进行提示的过程，然后通过分析此HTML实例，讲解HTML语言的基本结构，对基本的 、、标签进行初步介绍，鼓励有余力的同学通过“视野拓展”板块进行自学，并独立完成“创作天地”中的练习。通过教师演示引导学生思考扩展名对文件的影响，既包括其对文件图标的影响，也包括调用应用程序的影响，从而引出程序关联的知识进行补充讲解，见图1.1和图1.2。
(3) 保存并上传文件
本课是学生第一次上传网页作业，因此要着力于培养学生的学习习惯，尤其是在保存作业至本次磁盘之后，一定要尽可能地让学生将文件上传到网络中的指定位置，并且能够给予学生查看其它学生作业的权限，这不仅便于教师评价，更便于学生之间互评。
学生可以通过比较作品的差异看到自己的学习处于整个集体中的位置，从而反思自身作品，迸发灵感，获得动力进行二次创作，对于整个班级的激励将会产生更多的富有创意的优秀作品。学生还可以随时查看上传作业的情况，作为调整自身作业完成进度的参考。（三）教学补充
本课对HTML语言进行了简单的介绍，在“视野拓展”和“创作天地”板块中都安排了此部分的内容。
教师可以补充一些简单的HTML标签和属性，提供给有兴趣的学生作为提高练习使用，也为今后更好地使用“标签选择器”选择对象打下基础。
如：

标签Height
Width
Border
Align
Background
属性（一）本课教学目标
1．了解网站的开发流程。
2．掌握开发个人网站的步骤。
3. 能够根据网站主题设计网站结构。
4．熟悉Dreamweaver CS5 的工作区布局和界面环境。
5．掌握使用向导创建站点的方法与步骤。
（二）教学设计与教学建议
1．课堂引入分析
在第一课我们已经掌握了网站、网页、网页的组成元素等基础知识，现在就来了解开发建设网站的过程中需要进行的工作。
在进行网站建设的时候，需要先进行需求分析，要对网站的主题、素材、规划内容综合考虑。第2课 轻松上路本课首先要解决的正是网站的组织结构问题，我们以“安全自护我能行”为例对网站的组织结构图进行讲解，要求学生掌握围绕主题确定网站结构及网页内容的方法。
规划好站点后，就可以开始着手创建站点了。使用Dreamweaver CS5创建站点，当然要先熟悉软件的工作环境。我们在这里只需要简单介绍即可，因为本软件的文档窗口与Office系列软件相似，面板组又和同一公司出品的Flash软件雷同，只需要简单地提示学生并快速演示工作区布局即可。
Dreamweaver CS5 取消了“站点定义向导”，新建站点只能通过“站点设置对象”窗口完成，但是这个窗口除了使用“新建站点”命令激活外，也可以使用“管理站点”中的“新建”按钮激活。教师可提示学生打开“站点设置对象”窗口中的“高级设置”标签，浏览其中包含的高级设置选项，推荐部分学生可以在今后的学习中尝试使用。
2．重点内容分析
规划网站及创建站点是本节课的教学重点，下面分别进行教学建议。
在本课讲解网站开发流程之后，教师应迅速将课题引导至规划站点上来，引导学生围绕网站主题“安全自护我能行”展开讨论，共同思考本网站应该如何规划，依照先整体后局部，先简单后复杂的原则去分层、分角度设计网站结构和网页内容，让学生体验完整的规划过程，以便对“创作天地”中布置的课外提高任务起到降低难度的作用。
创建站点是本课的重要内容，要求所有学生一定要掌握使用“站点”菜单的“新建站点”命令创建站点的方法，对于使用“文件”面板创建站点的方法，则可以通过提示或在今后的教学过程中演示渗透来介绍，如图2.1所示，尽量使学生能够熟悉如图2.2所示的“管理站点”对话框，并且弄清楚在此对话框中的“删除”站点并非删除掉网站文件本身，仅仅是删除在Dreamweaver CS5对此站点设置的信息而已。
（三）教学补充
1.切换网站
当学生使用的计算机具有磁盘保护的功能，或者在Dreamweaver CS5 中创建了多个待编辑的网站时，学生启动软件后，系统不会恰好打开需要编辑的站点，此时可以提示学生使用“文件”面板来打开需要的网站。其操作过程如图2.3、2.4和2.5所示。 2.网站组成
在创建站点的过程中，教师不可避免地会遇到站点的组成问题，一般来说在Dreamweaver CS5中创建的站点分为三部分：本地站点、远程站点和测试站点，讲清楚此三部分的含义，才能正确设置站点。
本地站点：这是我们创建站点的工作目录，用来存放网页和素材，它可以位于学生的本地计算机，也可以位于教师配置的网络服务器上。
远程站点：远程站点是用来存储我们创建的站点文件的文件夹，这些文件用于测试、生产、协作和发布站点。如果想在不连接Internet时测试站点，可以在本地计算机上通过软件设置的办法去模拟Web服务器环境。
测试站点：用来测试动态页面的站点，适用于动态网页。
3.动态网页和静态网页
至于动态网页和静态网页的区别，教师可以简单概括讲解如下：
动态网页和静态网页是相对的，动态网页是指内容由站点数据库中变化的数据来显示的网页，静态网页和动态网页的扩展名不同，静态网页一般是以.htm、.html、.shtml、.xml等为扩展名，而动态网页则是以.asp、 .jsp、 .php、.perl、.cgi等为扩展名的。教师还可以提供学生一些动态网站的地址，让学生通过自己的实际操作去体会二者的区别。（一）本课教学目标
1．进一步熟悉Dreamweaver CS5的工作界面。
2. 掌握利用“文件”面板打开网站的方法。
3．学会根据网站素材的分类规划网站的文件夹。
4．熟练地创建并保存网页。
5. 掌握设置网页标题的方法。
6. 能够根据网页内容使用表格恰当布局。
7. 学会设置网页背景色及表格背景图像。
8. 初步认识并尝试使用标签选择器选择对象。
9. 熟练地使用快捷键在浏览器中预览网页效果。
（二）教学设计与教学建议
1．课堂引入分析　第3课 开篇之作 当站点规划并创建完毕之后，要进行的工作首当其冲就是制作网站的首页。首页作为网站的门面，对网站来说至关重要，因此我们要尽量将首页制作的富有吸引力。
2．重点内容分析
（1）在“文件”面板中规划站点
首页需要使用的素材必须存放在网站中才能被它引用，所以我们要为素材建立文件夹，将不同类别的素材分门别类地存放，便于管理。
打开“文件”面板，模仿在windows中的操作，右击网站名“安全自护我能行”，在弹出的快捷菜单中执行“新建文件夹”命令，此时文件夹名处于可编辑状态，我们只需要直接输入文件夹名即可完成命名，创建网页也可以采用此方法，如图3.1所示。与使用“新建”菜单来创建网页相比，在“文件”面板中操作更为简单快捷。 当需要更改网站中的网页名或文件夹名时，可右击网页名或文件夹名，执行弹出的快捷中的“编辑”→“重命名”命令，或直接使用快捷键F2。 为素材归类存放准备的文件夹建立完毕之后，我们要将素材存放到相应的目标文件夹中。此时可以考虑暂时脱离Dreamweaver CS5 的软件环境，使用windows的资源管理器进行操作，这样做的好处是可以批量复制粘贴文件，尤其是素材准备充分的情况下，能够节省大量的时间，这种方法优于在网页中先使用素材后再逐个保存到网站中的方法。
在教材中我们所介绍的正是此种方法。至于传统的先使用素材后保存到指定文件夹的方法，虽然不推荐使用，但是也可以介绍给学生，其过程如图3.2所示（此示意图是以在网页中插入图像为例的）。
创建首页的过程与创建普通网页并无实质性的区别，系统区分首页和普通网页依赖于文件名，如果网页被命名为index.html(index.htm)或者default.html(default.htm)，那么在将来发布网站的时候就会指定该网页为首页，此原则是由发布站点的软件所决定的，作为使用者我们只需要遵守该原则，在Dreamweaver中将首页命名为index.html(index.htm)，其他网页链接在它下层即可。
（2）设置网页标题
每个网页都有标题，但是网页的标题并不显示在网页文档中，而是显示在浏览器的标题栏中，如果不设置则显示成“无标题文档”，如图3.3所示。 设置网页标题并不复杂，在教材中我们介绍了使用“文档”工具栏中的的“标题”文本框的方法来设置，然后在IE中预览效果。如图3.4所示。图3.3 预览无标题网页 （3）设置网页背景
更改首页的背景色，属于设置网页的页面属性，既可以通过“属性检查器”的“页面属性”按钮，也可以通过“修改”菜单的“页面属性”命令完成，弹出的对话框相同。
我们设置背景色的目的是为了让后插入的表格的背景图像能够融合到整个网页中，使画面效果过渡自然，所以对背景颜色要求非常精确。在系统提供的色板中我们无法找到对应的颜色，用拾色器则比较复杂，因此我们采用的是输入十六进制颜色值的方法进行设置，此方法我们在学习Flash的时候曾经讲授过，此处不再赘述。
当网页同时设置了背景颜色和背景图像的时候，系统只会显示背景图像，忽略背景颜色。
（4）使用表格对页面布局
插入表格是在网页设计中经常采用的页面布局方式，使用表格控制网页元素的定位，既简单又精确，因此掌握好表格的运用是非常重要的。
当表格用于布局的时候，通常会将边框线设为0像素，这样在浏览器中浏览网页时将不会看到表格边框线。我们在首页中正是如此设置的，表格的边框线在编辑状态下显示为虚线，在IE中预览的时候，边框线并不显示。 当需要选择表格对象（表格、行、列、单元格）的时候，我们推荐使用状态栏中的“标签选择器”来进行。
需要注意的是，随着鼠标在表格中位置的不同，“标签选择器”区域显示的内容也会发生相应的变化，此时我们可单击标签，并观察表格对象的选择状态即可判断所选的对象是否正确。
对于如图3.5所示的2*2的表格来说，当将插入点定位在b1单元格中时，单击“标签选择器”中的，将会选择b1单元格本身，单击，则选中插入点所在的行，即a1和b1单元格，单击，选中整个表格，如果单击，那么选择的将是整个网页，在此过程中，“属性检查器”也跟随对象的不同发生变化，这样便于设置对象的属性。（三）教学补充
1. 通过代码视图或拆分视图设置网页标题 2. 设置页面属性
在“页面属性”对话框中，我们仅仅设置了“外观CSS”背景颜色一个项目，教师此时可引导学生对“外观”类包含的“页面字体”、“大小”、“文本颜色”进行设置，学生完全可以自己理解并自觉应用在网页的设计上。
对“链接”类内容，教师可简单介绍设置链接文本使用的字体、大小，颜色以及活动链接颜色等。（一）本课教学目标
1．巩固选择表格对象的方法。
2. 进一步学习设置表格对象的属性。
3．掌握在网页中插入Flash动画文件，并学会设置Flash动画的参数的方法，以控制动画的播放效果。
4. 能够灵活地在网页中使用文本。
5. 初步认识并尝试使用辅助设计工具定位网页元素。
（二）教学设计与教学建议
1．课堂引入分析
　在首页制作的过程中，我们已经使用表格进行了初步的布局。之所以叫做初步布局，就是因为我们还没有根据素材的具体情况对表格进行细致而精确的调整。有时候，我们可以利用鼠标大致调整表格对象的尺寸，但绝大部分情况下，都需要使用者精确地控制表格对象的高度、宽度、比例等属性，才能达到精确布局的目的。第4课 星光闪烁 Flash动画在网页中得到了广泛的采用，它使网络世界更加炫目，本课我们将学习使用在网页中插入Flash动画，并设置其属性和参数，使之更好地起到装饰网页、深化主题的作用。
文本是网页中介绍说明各种信息的基本组成元素，在网页中使用文本并根据需要设置文本的属性是网页设计的重要组成部分，也是我们作为软件使用者的基本技能。在本课中我们要学习多种方式使用文本，以及插入特殊字符等。
2．重点内容分析
（1）调整表格
在实际应用中，我们如果要设置表格对象的属性，前提是选择好表格对象，在前面我们已经探讨过使用“标签检查器”选择表格对象的方法，在本课的教材中介绍了使用Ctrl键搭配鼠标及使用鼠标单击行左或列首选择行、列的方法。
这里我们补充介绍使用表格标题和列标题选择表格和列的方法，使学生最终能够灵活地选择表格对象。其操作方法如下：
将插入点定位在表格内任意位置，当表格出现表格标题及列标题菜单的时候，单击标题菜单，执行“选择表格”或“选择列”命令即可，如图4.1所示。 虽然已经为表格设置了高度和宽度，但这并不意味着表格一定以我们设置的尺寸显示，这是由于表格中的元素尺寸超出表格尺寸造成的。例如，我们在网页中插入一个2行1列的表格，设置表格的属性如下：宽度100，高度200，边框、填充和间距都为0，此时表格的尺寸和我们设置的相同，为100*200像素。如果我们将一个图像插入第一行中，并调整图像大小为200*100像素，此时表格的尺寸就会自动调整为200*200，保证内容得以完整显示，如图4.2所示。 填充：单元格中的内容与单元格边框的距离，单位默认为像素。
间距：单元格之间或单元格与表格边框之间的距离，单位默认为像素。
表格属性中的“填充”和“间距”选项如果不进行设置，大多数的浏览器都会默认按照“填充”为1、“间距”为2来显示表格，如果不希望如此显示，就要设置其值。
图4.3是分别将“填充”和“间距”设置为不同的值时表格的显示效果。注意：为了突出显示效果，可以预先将表格的边框设为1个像素的实线。 （2）插入Flash动画并设置参数
在教材中介绍了执行 “插入”→“媒体”→“Swf”命令来插入Flash动画文件，当熟悉Dreamweaver CS5的工作界面后，我们一定会喜欢上使用“常用”工具栏中的“媒体：SWF”按钮来插入Flash的方法，Dreamweaver会自动保留上次使用过的元素，如图4.4所示。 （3）在网页中使用文本
在Dreamweaver CS5 中，专门提供了一个“文本”工具栏来帮助使用者设置文本和插入特殊字符。
“文本”工具栏中的各个按钮含义如图4.5所示，与使用菜单命令和“属性检查器”搭配设置文本相比，使用工具栏显然操作步骤少，执行速度快。
（三）教学补充
格式化表格
在Dreamweaver CS5，取消了格式化表格功能，这个功能预先定义了很多漂亮的表格样式，适合初学者使用，我们可以通过使用低版本的Dreamweaver来完成格式化表格的操作，省去逐项设置的不便。 其具体步骤如下：
（1）启动Dreamweaver8软件，选中要格式化的表格，执行菜单“命令” → “格式化表格”命令。
（2）在弹出的“格式化表格”对话框中，选择预设方案，此时可以直接使用预设方案，还可以在此对话框中选择一个方案为基础，再进行个人设定，创建出具有个人风格的表格，如图4.6所示，即为自定义风格的表格设置。 图4.6 在“格式化表格”对话框中设置自定义风格 一、单元概述
在本单元中，学习如何创建框架网页，利用框架进行网页的结构划分和布局；学习如何创建网页模板，利用模板和框架统一网站风格，提高网页的制作效率。
二、学习目标
1. 了解框架网页的基本结构，掌握框架网页的制作方法，并能独立制作框架网页，利用框架对网页进行结构划分和布局。
2. 了解网页模板的基本用途，掌握网页模板的创建方法，并能根据网站的风格创作网页模板。
三、重点难点
教学重点
1．了解框架的基本概念和用途。
2．掌握框架网页的创建和保存的方法。
3．掌握用鼠标经过图像制作导航按钮的方法。
第2单元 框架模板 4．掌握表格的拆分、合并、嵌套等高级应用方法。
5．掌握制作外部链接和电子邮件链接的方法。
6．了解网页模板的基本概念和用途。
7．掌握网页模板的创建方法。
8．掌握可编辑区的添加、删除等基本操作。
9．掌握目标的设置方法和具体意义。
教学难点
1．创建与保存框架的基本方法。
2．如何利用鼠标经过图像制作导航按钮。
3．创建网页模板的基本方法。
4．掌握表格的灵活运用方法及高级应用。
5．掌握目标设置的方法和具体意义。
四、学时安排
本单元共2课，总计2学时，每课占用1学时。（一）本课教学目标
1．掌握拆分单元格的方法。
2．掌握创建与保存框架集的方法。
3．熟练掌握利用鼠标经过图像制作网页导航的方法。
4．掌握外部链接和电子邮件链接的制作方法。
5．掌握目标设置在网页制作过程中的作用和方法。
（二）教学设计与教学建议
1．课堂引入分析
在进行网站制作的时候，为了有效地统一网站的风格，常常需要将页面划分成多个区域，将各个网页的相同内容（如网站标题、网站导航等）固定在一个区域中，使网站导航结构清晰。利用框架可以轻松实现网页结构划分和布局。
演示网页范例：给学生展示一些比较有特点的使用了框架的网页范例，通过观察了解网页布局的基本规律和框架在网页中的作用，对框架有一个初步的了解和感性认识。
第5课 统一风格 提出任务：用一节课时间，学习如何创建框架、制作框架网页。在制作的过程中，要注意随时保存文件。
2．重点内容分析
（1）创建和保存框架集
利用“新建文档”的方式创建框架集，是比较直接的创建框架的方法。根据实际网页布局的需要，可以方便地选择框架集的样式，从而创建合适的框架。
可以单独保存每个框架集文件和带框架的文档，也可以同时保存框架集文件和框架中出现的所有文档。保存框架集时，要特别引导学生注意和体会保存文件的顺序。先存框架集文件，再保存带框架的文档以及框架中显示的网页文件。
（2）利用鼠标经过图像制作导航按钮
鼠标经过图像由页面载入时显示的原始图像和鼠标指针经过时显示的图像组成，这两个图像应大小相等，如果图像大小不等，将自动调整第2个图像的大小以匹配第1个图像的属性。在浏览器中当鼠标指针移过图像时，图像可以发生变化，利用鼠标经过图像的这种特殊效果，可以制作动态网页导航按钮。
为了制作出效果特殊的鼠标经过图像，所需的原始图像和鼠标经过时显示的图像需要通过图像处理工具进行制作和处理。注意引导鼓励学生自己处理制作图像，以彰显学生个性，培养学生的创造能力。

3．归纳提高分析
（1）表格的高级应用
　 在本课的任务中，表格被广泛应用，在规则表格的基础上，通过合并单元格制作不规则的表格，以实现网页布局的特殊需要。
① 合并单元格
选中需要合并的单元格，通过以下四种方法可以实现：
a. 执行“修改” → “表格” → “合并单元格”命令。
b. 在选中的单元格上右击，执行“表格” → “合并单元格”命令。
c. 按下组合键CTRL+ALT+M。
d. 单击“属性检查器”中的“合并所选单元格，使用跨度”按钮 。
② 设置单元格背景
结合插入图像和设置单元格背景，可以实现如教材图5.18所示的图像表格效果。用作表格边框的图像文件，需要利用图像处理工具进行加工处理，以符合页面布局的需要。
（2）目标设置
　 属性检查器中的“目标”用来设置超链接的打开方式，共有4个选项可供选择。
目标设置部分不太容易理解，在讲解的同时可配以直观有效的例子加以说明。
（三）教学补充
1．创建框架
创建框架除了利用新建文档的方式以外，还可以通过以下方法创建。
（1）使用预定义的框架集
将插入点放置在文档中。在“插入”栏的“布局”类别中，单击“框架”按钮上的下拉箭头，然后选择预定义的框架集，如图5.1所示。
框架集图标提供应用于当前文档的每个框架集的可视化表示形式。框架集图标的蓝色区域表示当前文档，而白色区域表示将显示其他文档的框架。 （2）设计框架集
　　在创建框架集或使用框架前，执行“查看” →“可视化助理” →“框架边框”命令，使框架边框在“文档”窗口的“设计”视图中可见。执行“修改” →“框架集”命令，然后从子菜单选择拆分项（例如“拆分左框架”或“拆分右框架”）。 Dreamweaver 将窗口拆分成几个框架。如果打开一个现有的文档，它将出现在其中一个框架中。 图5.1 预定义框架集 2. 在文档窗口中选择框架和框架集
　　在“文档”窗口的“设计”视图中，在选定了一个框架后，其边框被虚线环绕；在选定了一个框架集后，该框架集内各框架的所有边框都被淡颜色的虚线环绕。
（1）在“文档”窗口中选择框架
　　在“设计”视图中，按住 Alt 键的同时单击框架内部，在框架周围显示一个选择轮廓。
（2）在“文档”窗口中选择框架集
在“设计”视图中，单击框架集的某一内部框架边框，（要执行这一操作，框架边框必须是可见的；如果看不到框架边框，则执行“查看” →“可视化助理” →“框架边框”命令以使框架边框可见。） 在框架集周围显示一个选择轮廓。
（3）选择不同的框架或框架集
要在当前选定内容的同一层次级别上选择下一框架（框架集）或前一框架（框架集），按住 Alt键的同时按下左箭头键或右箭头键，使用这些键，可以按照框架和框架集在框架集文件中定义的顺序依次选择这些框架和框架集。
要选择父框架集（包含当前选定内容的框架集），可以在按住 Alt键的同时按上箭头键。要选择当前选定框架集的第一个子框架或框架集（即，按在框架集文件中定义顺序中的第一个），可以在按住 Alt键的同时按下箭头键 。（一）本课教学目标
1．掌握合并单元格及插入嵌套表格的方法。
2．了解模板的概念和用途。
3．学会创建网页模板。
4．掌握定义、编辑可编辑区域的基本方法。
5．能够根据网站的需要创建网页模板。
（二）教学设计与教学建议
1．课堂引入分析
在进行大量的页面制作的时候，很多页面会用到相同的布局、图片和文字等元素。为了避免一次次地重复劳动，可以将具有相同版面结构的页面制作成模板，然后基于模板创建新的网页，最后根据需要对页面进行改动，加入个性化的内容。第6课 事半功倍 演示模板范例：给学生展示一些比较有特点的网页模板，激发学生对模板的兴趣和认识，对网页模板有一个初步的了解和感性认识。
提出任务：用一节课时间，学习如何创建网页模板。
2．重点内容分析
（1）模板的概念和用途
模板可以被理解成一种网页模型，利用这个模型能够方便地做出很多页面，使用模板可以避免重复地在每个页面输入或修改相同的部分，等网站改版的时候，只要改变模板的设计，就能自动更改所有基于这个模板创建的网页。模板文件的扩展名为.dwt，存放在网站根目录的Templates文件夹中。　 （2）创建模板文件
　　利用“资源”面板可以直接创建模板文件，这是一种最直接最直观的方式，如图6.1所示。
　　建议教师引导学生采用这种方式创建模板文件，这样对于整个网站的资源构架会有个一个逐步的了解，对于“资源”面板的用途也逐一掌握。图6.1 资源面板 （3）定义可编辑区
　　可编辑区域是基于模板的文档中的未锁定区域，它是模板用户可以编辑的部分。模板创作者可以将模板的任何区域指定为可编辑的，要让模板生效，它应该至少包含一个可编辑区域，否则，将无法编辑基于该模板的页面。
　　可以把图像、文本、表格等页面元素设置成可编辑区，也可把整个表格及表格里的内容设置成一个可编辑区，还可以把某个单元格及内容设置成一个可编辑区，但不能把几个不同的单元格及内容设置为同一个编辑区。　　可编辑区域在模板中由高亮显示的矩形边框围绕，该边框使用在首选参数中设置的高亮颜色，如图6.2所示。该区域左上角的选项卡显示该区域的名称。如果在文档中插入空白的可编辑区域，则该区域的名称会出现在该区域内部。这一点，教师可通过对比的方式给学生解释清楚。图6.2 可编辑区 （4）表格的高级应用
　在本课的任务中，表格被广泛应用，在规则表格的基础上，通过拆分单元格和插入嵌套表格的方式，实现网页布局的特殊需要。
① 拆分单元格
选中需要拆分的单元格，通过以下四种方法可以实现：
a. 执行“修改” → “表格” → “拆分单元格”命令。
b. 在选中的单元格上右击，执行“表格” → “拆分单元格”命令。
c. 按下组合键CTRL+ALT+S。
d. 单击“属性检查器”中的“拆分单元格为行或列”按钮 。
② 插入嵌套表格
为了更好地布局网页，在表格中还可以嵌套新的表格。总表格负责整体的排版，嵌套表格负责各个子栏目的排版，并插入到总表格的相应位置中。总表格的高度和宽度一般使用像素值，嵌套表格一般使用百分比，以避免嵌套表格的高度和宽度与总表格发生冲突。（三）教学补充
1．创建模板文件的其他方法
除了利用“资源”面板新建模板文件的方式以外，还可以通过以下方法创建。
（1）“新建文档”的方式
执行“文件” →“新建”命令，打开“新建文档”对话框，如图6.3所示。选择“空白页”类别中的“HTML模板”，单击“创建”按钮即可。 （2）“另存为模板”的方式
打开已经制作好的网页文件，执行“文件” →“另存为模板”命令，打开“另存为模板”对话框，如图6.4所示。在“站点”下拉列表框中选择要保存模板的站点，在“另存为”文本框中输入模板的文件名，单击“保存”按钮即可。图6.3 “新建文档”对话框图6.4 “另存为模板”对话框 2．模板区域的类型
创建模板时，可编辑区域和锁定区域都可以更改。但是，在基于模板的文档中，模板用户只能在可编辑区域中进行更改；无法修改锁定区域。共有四种类型的模板区域：
（1）可编辑区域是基于模板的文档中的未锁定区域；它是模板用户可以编辑的部分。模板创作者可以将模板的任何区域指定为可编辑的。要让模板生效，它应该至少包含一个可编辑区域；否则，将无法编辑基于该模板的页面。
（2）重复区域是文档中设置为重复的布局部分。例如，可以设置重复一个表格行。通常重复部分是可编辑的，这样模板用户可以编辑重复元素中的内容，同时使设计本身处于模板创作者的控制之下。在基于模板的文档中，模板用户可以根据需要使用重复区域控制选项添加或删除重复区域的副本。
（3）可选区域是用户在模板中指定为可选的部分，用于保存有可能在基于模板的文档中出现的内容（如可选文本或图像）。在基于模板的页面上，模板用户通常控制是否显示内容。
（4）可编辑标签属性使用户可以在模板中解锁标签属性，以便该属性可以在基于模板的页面中编辑。例如，可以“锁定”在文档中出现的图像，但让模板用户将对齐设为左对齐、右对齐或居中对齐。 一、单元概述
在本单元中，我们将综合运用框架和模板创建网页，通过制作“日常生活”篇和“校园内外”篇中的网页，学习使用“鼠标经过图像”制作导航栏进行站内导航，对锚记链接、水平线、图像热点超链接等编辑网页的常用技巧加以应用，并运用滚动字幕、CSS样式和层布局及美化网页。
二、学习目标
通过前面2个单元的学习，学生已经具备了一些网站制作和网页设计的基本知识，掌握了一定的网站编辑技能。本单元的内容都是网页制作过程中较为常用的技巧，知识点多而繁杂，因此要在此单元的教学中注重能力的培养，而不是将注意力停留在学生具体学会了哪个命令、那个面板的使用上。
知识：使用使用“鼠标经过图像”制作导航栏，插入水平线，制作锚点链接，制作图像热点链接，使用滚动字幕，应用CSS样式和层布局。
技能：通过模板创建网页，在网页上应用模板，用多种方法创建相似网页，将网页从模板中分离，正确设置框架网页中的链接目标。
在学生的学习过程中，动员学生通过动手实践操作来理解本单元的内容，不妨多采用小组讨论和自学的方式，使学生深入地体会到软件设计的理念及内部联系，从而起到举一反三的积极作用。
第3单元 编辑网页 三、重点难点
教学重点
1．掌握应用模板创建网页的方法，能够通过鼠标的形状变化分辨可编辑区域和锁定区域。
2．熟悉“资源”面板的使用。
3．能够制作导航按钮实现站内导航。
4．灵活地使用水平线分隔网页元素。
5．学会使用锚记链接、图像热点链接，掌握网页内部、网站内外等跳转。
6．综合利用滚动字幕和AP Div元素（层），增强网页表现力。
7．应用CSS样式表和层美化网页。
教学难点
1．套用和分离模板，综合运用多种方式快速生成网页。
2．根据需要正确设置链接对象的目标框架。
3. 使用滚动字幕制作动态标题，与AP Div元素（层）的搭配使用。
4. CSS样式表的导入导出应用。
四、学时安排
本单元共5课，总计5学时，每课占用1学时。
（一）本课教学目标
1．掌握利用模板创建网页的方法。
2．熟练运用“鼠标经过图像”制作导航栏进行站内导航。
3．理解链接对象的目标框架的含义。
（二）教学设计与教学建议
1．课堂引入分析
　在第2单元中，我们设计了模板和框架，本课主要任务就是应用框架和模板打造风格统一的网页，使它们真正地发挥作用，加快我们制作网页的速度。
　在教学中，引导学生观察使用常规方法编辑的网页和基于模板创建网页的异同，并对鼠标指针形状的变化引起重视。第7课 驾轻就熟 学生在进行探索尝试新知识的时候，经常会出现操作错误，当计算机弹出窗口或对话框对使用者进行提示时，很多学生会下意识地关闭提示信息，忽略掉系统“善意”的“提醒”，缺乏人机交互的意识，这将导致学生完全寄希望于教师或他人的指导，造成自身的时间浪费及教师的分身无术，最终导致课堂效率低下和学生能力发展停滞不前。
如要解决上述情况，需要教师针对此种情况进行专门的强化训练，引导学生重视计算机提供的反馈信息，遵循计算机的工作方式，只有如此才能驾驭它，使之顺从地为我们服务。也许我们不能完全避免出现问题，但是能否利用工具灵活快速地解决问题则是衡量现代人信息素养的重要标准。
当应用模板创建网页后，制作导航栏成为势在必行的工作。导航栏的重要性众所周知，制作方法也多种多样，本课我们要介绍的是使用动感十足又操作简单的“鼠标经过图像”来充当导航栏按钮。
在Dreamweaver CS5中我们可以不必使用Flash软件而直接使用多张静态图片来制作具有动态效果的导航按钮。 2．重点内容分析
（1）应用模板创建网页
应用模板在本课是首次接触，模板设计好后，要利用它来创建网页或将其应用于现有的网页上，才能发挥其减少工作量的作用。应用模板的步骤并不复杂，但是要建立模板也是一种“资源”的理念，才能利用好模板，制作出具有“换肤”效果的网页。
在本课的“视野拓展”中，我们介绍了将已经制作好导航栏的“日常生活”页面转为模板的方法，通过这个操作，日常生活篇中的“交通出行”、“生活用电”和“家务劳动”页都可以利用这个新模板来创建，从而直接继承了导航栏按钮、标题等内容，甚至导航栏的链接也都是设置好的，非常方便。图7.1 利用module2.dwt创建网页需要注意的问题是：当我们将应用模板module.dwt创建的页面保存到Templates中时，所有继承元素能够正确的显示，此时拖动页面到rcsh文件下，图像的相对路径会自动改变，因此显示确保正确，但是如果我们直接将用模板创建的页面存入到rcsh文件夹下，则会出现路径错误，找不到图像素材。图7.2 利用模板module2.dwt创建的网页未保存时的状态图7.3 网页保存到Templates中后，正确显示的页面状态
（2）“鼠标经过图像”的使用
在Dreamweaver CS5中，取消了旧版本中提供的Flash按钮功能，如果需要使用的话，也可以打开旧版本的软件进行编辑，提供40余种Flash按钮的样式，我们只需要选择样式，输入按钮显示文本并设置链接就可以使用。
如果我们创建的鼠标经过图像按钮并不用来进行站内导航，仅仅用来装饰或者与Internet中的资源链接，那么将“插入鼠标经过图像”对话框中的“链接”文本框保持空白或输入如http://www.sohu.com格式的URL地址，在浏览器中单击按钮时可以实现超链接跳转。
另外，在此对话框中，还有“替换文本”设置，在这里我们输入文本“交通出行”，一旦制作鼠标经过图像按钮的源图像丢失或者路径不正确，不能正确在浏览器中显示时候，浏览器将会显示出“交通出行”文本来替换按钮。图 7.4 替换文本在IE中的作用（三）教学补充
更新模板
模板的功能就是把网页布局和内容分离，这样相同布局的网页可以通过模板创建，因此能极大地提高工作效率。
当对模板更新后，所有通过模板创建网页和应用此模板的网页都可以随之更新，因此我们就可以利用此功能在短时间内重新设计网站并对大量的网页进行修改。
图7.5 “更新模板文件”对话框 具体步骤如下：
（1）打开已有的网页模板，进行修改。
（2）执行“文件” →“保存”命令保存模板，系统弹出如图7.5所示的“更新模板文件”对话框，提示是否更新。 （3）单击“更新”按钮，系统弹出如图7.6所示的“更新页面”对话框，在“查看”下拉列表中选择“文件使用”选项 ，在“更新”项目中确保选中了“模板”复选框。单击“开始”按钮，Dreamweaver CS5将按照指示更新文件。如果选中了“显示记录”复选框，系统将提供它试图更新的文件的信息，包括它们是否成功更新的信息。 （一）本课教学目标
1．灵活地使用水平线分隔网页元素。
2．学会插入命名锚记以创建锚点链接。
3. 掌握电子邮件、网页内指定位置、网站内文件、因特网资源等多种超级链接目标的设置方法。
（二）教学设计与教学建议
1．课堂引入分析
当初步制作“交通出行”网页后，可以看出本页包含的内容很多，不同主题的文字和图片罗列在一起，页面比较长，浏览起来不是很方便，因此我们考虑使用水平线分隔元素，并为页面添加锚点链接，实现网页的局部跳转，快速地将访问者带到特定主题或者网页顶部，使用这种方法，还可以指向不同页面的指定位置。第8课 自由穿梭 2．重点内容分析
（1）插入水平线
水平线对于组织信息很有用。插入水平线，操作比较简单，执行菜单“插入”→HTML →“水平线”命令就可以插入默认属性的水平线，其宽度为100%，自动填满所在的单元格，高度默认为2个像素，呈现灰色，带有阴影。另外，还可以打开“插入”工具栏中的HTML工具栏，单击“水平线”按钮插入水平线，如图8.1所示。
在水平线的“属性检查器”面板中，可以设置水平线的宽度、高度、对齐方式、是否带有阴影，应用的CSS样等，如要设置水平线的颜色可使用“快速标签编辑器”按钮 或在“拆分”视图中通过添加代码操作。
宽和高：以像素为单位或以页面尺寸百分比的形式指定水平线的宽度和高度。 对齐：指定水平线的对齐方式（“默认”、“左对齐”、“居中对齐”或“右对齐”）。仅当水平线的宽度小于浏览器窗口的宽度时，该设置才适用。
阴影：指定绘制水平线时是否带阴影。取消选择此选项系统将使用纯色绘制水平线。
需要注意的是，水平线的有些设置在编辑窗口无法直接看到效果，需要在IE浏览器中预览，例如图8.2所示的为2条不同属性设置的水平线在编辑窗口中的状态和IE浏览器中预览效果的对比。这2条水平线属性如下：
宽：100像素
高：3像素
水平线A：居中对齐，带阴影
水平线B：右对齐，无阴影，颜色#ff3300 （2）创建锚记链接
在教材中我们将创建锚点链接分为两个步骤：命名锚记和链接锚记。
在进行链接锚记的时候，我们采用是在“属性检查器”的“链接”文本框中输入锚记名称的方法，这就要求我们记住各个锚记对应的主题内容才能操作，否则还需要单击相应的锚记名称，通过该锚记的“属性检查器”找到锚记名。其实，在进行链接设置的时候，锚记也可以像文件一样，直接被鼠标选择作为链接目标，其步骤如下：
① 选择要添加链接的主题文本，如“非机动车交通安全”。
② 单击“属性检查器”中的“<>HTML按钮”，再单击“链接”文本框后的“指向文件”按钮 ，直接拖动按钮到页面上，此时将会出现黑色的箭头，我们将此箭头拖动到需要链接的锚记即可，如图8.3所示。（一）本课教学目标
1．理解图像热点超链接的含义。
2. 学会绘制各种形状的热区，并为之设置链接目标。
3．将网页与所应用的模板分离，使之成为可以自由编辑的普通网页。
（二）教学设计与教学建议
1．课堂引入分析
在Dreamweaver CS5中，我们可以用多种方式综合使用图像，为网站增添生命力，同时加深浏览者对网站的良好印象。第9课 按图索骥 本课我们继续介绍应用图像的方式：图像热点超链接。同一个图像的不同部分分别制作为热区，单击这些区域，就可以可以链接到不同的链接目标，这就是图像热点超链接。
2．重点内容分析
（1）图像热点超链接
在“家务劳动”页面中，我们插入了一张尺寸较大的图像，图像的不同区域代表不同的主题内容，我们要为此图像设置局部图像链接，制作出“一图多链”的效果。在Dreamweaver 中，这种被分为多个区域（或称“热区”）的图像就称为“图像地图”。 在图像上绘制热区之后，观察此图像的“属性检查器”，在“地图”文本框中自动出现Map，如图9.1所示。这是系统自动为图像地图分配的名称，我们也可以自己定义图像地图的名称便于记忆。当同一网页中使用多个图像地图时，要确保每个地图都有唯一名称。 本图像地图包含3个热区，它们链接的目标既有命名锚记，也有新创建的网页，其对应链接关系和目标框架如图9.2所示。（2）网页与模板分离
当网页通过执行“修改”→“模板”→“从模板中分离”命令与模板分离之后，网页保留了原来的全部内容，只是把原来模板限定的不可编辑区域转换为可以编辑的区域，网页在编辑区域如图9.3所示的提示将会消失。 （三）教学补充
（1）将模板应用于现有文档
当网页与模板分离后，还可以重新选择模板加以应用。 操作步骤：
（1） 打开要应用模板的网页。
（2） 执行“修改” → “模板” → “应用模板到页”命令， 即会出现“选择模板”对话框。如图9.4所示。 （3）从列表中选择一个模板并单击“选定”按钮。
如果文档中存在不能自动指定到模板区域的内容，将出现“不一致的区域名称”对话框，如图9.5所示。
此对话框用于将文档中的内容指定给模板区域，若要将现有内容指定给新文档中的可编辑区域，请执行以下操作： ① 在“将内容移动到新区域”弹出式菜单中，执行以下操作之一：
■在新模板中选择一个要将现有内容移动到其中的区域。
■选择“不在任何地方”可将该内容从文档中删除。
② 若要将所有未解决的内容移到选定的区域，单击“用于所有内容”按钮。
③ 单击“确定”按钮应用模板，或单击“取消”按钮取消将模板应用到文档的操作。 （2）图像查看器
在Dreamweaver的旧版本中，能够制作图片自动切换的图像查看器，在制作图像查看器之前，先要准备素材图片，对3种格式图像的支持是最好的，它们是GIF、JPEG和PNG。但是IE浏览器只能部分支持PNG图像的显示，所以我们最好选用GIF和JPEG格式的图像制作图像检查器。
我们不仅可以通过执行“插入”→“媒体”→“图像查看器”命令的方法插入图像检查器，还可以直接单击“Flash元素”工具栏中的“图像查看器”按钮，如图9.6所示。
图像查看器的制作过程也是制作swf格式的Flash动画文件的过程，我们在“Flash元素”面板中设置的参数直接影响此动画文件的效果。
在“窗口”菜单中，我们会发现其实并没有“Flash元素”命令，如果打开“标签检查器”面板，然后在编辑窗口中单击创建好的图像查看器的图标，那么“标签检查器”面板会自动变为“Flash元素”面板，再此设置图像查看器的参数就可以了。 （一）本课教学目标
1．掌握综合运用多种软件制作导航栏的方法。
2. 学会使用marquee标签制作滚动字幕。
3. 初步掌握使用层来进行布局。
（二）教学设计与教学建议
1．课堂引入分析
从本课开始制作网站的“校园内外”篇，共包含栏目介绍页面、“体育健身”、“集体活动”、“校内实践”和“野外拓展”5个页面。
在标题部分，我们将会学习用滚动字幕来实现动态效果，同时为了更好的控制页面的布局，学习使用层来作为容器精确定位多种对象。第10课 左右逢源 2．重点内容分析
（1）综合多种方法制作导航条按钮
导航条所需的按钮图像要事先准备好，为了看出导航条按钮的动态效果，我们至少要为每个按钮准备2张图像，用来在弹起状态和鼠标悬停在按钮上时进行切换，制作这些图像，使用Photoshop和AAAlogo等软件搭配是比较好的选择，可以显著降低我们的工作量，并能获得效果较好的图像。如果能够使用Flash来制作按钮，那么网页就能更加精美。另外，因特网上也提供了很多在线工具来帮助我们快捷的完成按钮的设计，只需要选择喜欢的样式并输入需要的文字就能直接输出指定格式的按钮图像了。例如，右图10.1所示就是一个在线的按钮工具。
图10.1 按钮工厂页面 （2）使用marquee标签制作滚动字幕
教材中已经详尽的介绍了marquee标签制作滚动字幕的方法，插入marquee标签后，要在“标签检查器”中设置好属性，那么不论是文字还是图像（包括多张）的滚动就不在话下了。
设置好属性后，注意观察代码视图，此时字幕部分的代码如下图10.2所示，对照“标签检查器”中的属性和教材提供的属性列表，我们可以轻松看懂这些代码，它表示字幕将先向右再向左以两个方向滚来滚去，滚动速度是3，滚动停顿时间是1毫秒。标题文字应用的样式是ys02（关于样式的内容我们在下节课集中介绍）。 图10.2 设置滚动字幕后的代码视图 图10.3 设置图片滚动后的代码视图 （3）使用AP Div 元素布局网页
教材中我们使用“布局工具栏中”的“绘制AP Div”工具创建新的绝对定位层元素，另外还有一种比较常用的方法，是通过执行“插入” →“布局对象” →AP Div命令插入层。
（三）教学补充
插入日期、时间
我们经常在网页上看到最近一次修改网页的时间，这说明网页是在不断更新的，从而吸引访问者再次光顾。Dreamweaver 提供了一个方便的日期对象，可以以多种格式插入当前日期。其具体操作步骤如下： 图10.4 “插入日期”对话框（1）打开网页，将插入点设置在要插入时间的位置上。
（2） 执行“插入” → “日期”命令，打开如图10.4所示的“插入日期”对话框。 （3） 在此对话框中，分别设置星期格式、日期格式和时间格式，并且注意要选中“储存时自动更新”复选框，这样才会不断更新时间、日期。
（4）切换到代码窗口，可以看出在body标签内，增加了一句代码，它的含义就是按照指定格式显示并更新当前系统日期和时间。
（5）调整日期时间的文字显示格式
删除插入的“日期时间”：单击设计窗口中的日期时间显示部分，会发现整个区域一起被选中，而不是普通字符的闪烁插入点状态，此时直接单击键盘上的Delete删除即可，相应的代码窗口内容也会自动删除。
图10.5 插入日期时间后的代码窗口（一）本课教学目标
1．掌握通过属性检查器创建CSS样式的方法
2. 理解运用多种方式进行编辑样式、套用样式、导出样式表文件、应用外部样式表的原理及基本方法。
3. 了解使用AP Div层和样式表美化网页的方法。
（二）教学设计与教学建议
1．课堂引入分析
网页内容较多的情况下，分别为各种元素设定样式属性比较麻烦，为了能够快速高效地控制网页样式，我们将在本节课重点介绍CSS样式表的功能和使用方法。
第11课 最佳搭档 2．重点内容分析
（1）CSS样式表的基本语法
教材中，我们没有对语法多做介绍，仅是按照网页的需求进行了简单的样式表创建和基础编辑，但是了解一些基本语法，对于提高网页编辑水平还是非常必要的。
CSS的基本语法由三部分构成：选择器、属性和属性值。 selector {property: value}
下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。
h1 {color:red; font-size:14px;}
这就是一条完整的声明，h1代表定义的最大标题。（2）用菜单命令创建CSS样式表 打开文档设计视图，在需要插入样式的地方，执行“格式”→“CSS样式”→“新建”命令，弹出如图11.1所示的对话框，这与使用属相检查器中单击“目标规则”区域选择“<新CSS规则>”，再单击下方的“编辑规则”按钮后的效果相同。适合已经存在CSS规则后，仍然需要重新建立新规则的情况下采用此方法。 图11.1 使用“属性检查器”新建规则的方法 （3）建立标签样式
在教材中，我们使用属性检查器为文本设置CSS规则，当设置“选择器类型”时，我们选中的是“标签（重新定义HTML元素）”，这就是建立标签样式，我们选择“p”标签来定义CSS样式。
在HTML中，标签

和

代表的是段落的开始和结束，那么定义标签p的CSS样式，就代表本文档中，所有的段落都应该按照编辑后的规则来显示。如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
（4）建立类样式
类选择器允许以一种独立于文档元素的方式来指定样式，可以单独使用，也可以与其他元素结合使用。 图11.2 代码窗口中的样式表代码 标签p样式类ys01样式，text-indent设置为30px，代表首行缩进30个像素 在教材中，我们通过“CSS样式”面板创建的样式“ys01”，就是一种类选择器样式。
观察下图所示的代码界面，能够清晰地看到目前设置的标签p的样式和类ys01样式。
下面，我们以教材中xynw.html网页中文本应用上述2种样式为实例进行深入分析，感受应用样式的不同之处和各自特点。
图11.3 仅仅贴入无格式文本后的情况 图11.4 把文本分段后，p标签样式发挥作用后的情况 我们将文档用“选择性粘贴”中的“仅文本”选项将文本贴入到页面中，如图11.3所示，可以看出，此时文本保持默认状态，两种样式都没有起作用。 我们按照原文段落，将文本输入回车划分为3个段落，此时如图11.4所示，每段文本的代码视图中增加了p标签，瞬间应用了p样式，字体、颜色等都按照p样式定义的方式发生了改变。 图11.5 套用ys01样式后的情况 选中3段文本，打开CSS样式面板，右击“ys01”样式，在弹出菜单中执行“套用”命令，此时如图11.5所示，段落实现了首行缩进30个像素，同时在代码窗口中标签p后面增加了 “class=ys01”的字样，表示对这个p标签套用ys01样式。 选择器类型除了“标签”和“类”外，还另外有“ID”和“复合内容”，在这里就不多做介绍了，可以建议感兴趣的同学查看网络资源。 （三）教学补充
设置网页的刷新
定义了自动刷新的页面，页面在被访问者经过一段时间的延迟会自动刷新或转到另一个网页。
设置网页自动刷新的操作步骤如下：
（1）打开要设置自动刷新的网页。
（2）执行“插入” →HTML →“文件头标签” →“刷新”命令，打开“刷新”对话框，如图11.6所示。
（3）在“延迟”文本框中输入延迟时间，在“操作”区域选择“转到URL”单选按钮，并在其后面的文本框中设置要转到页面的路径和名称即可，既可以是网站内的相对路径，也可以因特网中某个页面。
图11.6 “刷新”对话框 一、单元概述
在本单元中，我们将利用交换图像行为制作具有动态效果的导航栏，并应用其他行为和层为网页添加动态效果；学习在网页中添加多媒体内容制作多媒体网页；学习制作表单网页。最后测试整个网站的链接，完成网站的发布工作。
二、学习目标
1. 了解行为在网页中的作用，能初步应用行为和层，为网页添加各种动态效果。
2. 掌握如何在网页中添加声音、视频等多媒体内容，制作多媒体网页。
3. 能够利用表单制作简单的交互网页。
4. 能够测试整个站点，掌握如何利用Dreamweaver将网站上传到远程文件夹。第4单元 网页特效
三、重点难点
教学重点
1．理解行为、事件、动作、对象等基本概念的含义。
2．掌握应用“交换图像”行为制作动态导航按钮的方法。
3．掌握应用“弹出信息”行为制作弹出对话框效果的方法。
4．掌握应用“设置状态栏文本”行为为导航栏添加提示信息的方法。
5．掌握应用“打开浏览器窗口”行为制作弹出网页窗口效果的方法。
6．掌握在网页中插入FLV格式视频文件的方法。
7．掌握利用插件在网页中插入背景音乐的方法。
8. 掌握制作表单网页的方法。
9．了解测试网站链接，修复断掉的链接的方法。
10．掌握配置远程信息（本地／网络，FTP）的方法。
11．掌握利用Dreamweaver上传文件的方法。教学难点
1．应用“交换图像”行为制作动态导航按钮。
2．应用“弹出信息”行为制作弹出对话框效果。
3．应用“设置状态栏文本”行为为导航栏添加提示信息。
4．应用“打开浏览器窗口”行为制作弹出网页窗口效果。
5．在网页中插入FLV格式视频文件。
6．利用插件在网页中插入背景音乐。
7. 制作表单网页的方法。
8．配置远程信息（本地／网络，FTP）。
9．利用Dreamweaver上传文件。
四、学时安排
本单元共5课，总计5学时，每课占用1学时。
（一）本课教学目标
1．了解行为、事件、动作的含义。
2．掌握应用“交换图像”行为制作导航按钮的方法。
3．掌握应用“弹出信息”行为制作弹出对话框的方法。
4．掌握应用“设置状态栏文本”行为为导航栏添加提示信息的方法。
（二）教学设计与教学建议
1．课堂引入分析
前面的课程很少涉及到动态的网页效果，基本上都是静态的网页内容，本课主要应用行为为网页添加各种动态效果。动态特效的运用，使得网页制作变得更有意思。学生可以发挥和想象的空间也比较多，因此在课堂的引入部分，教师可以这样设计：第12课 一触即发 展示各种利用行为制作的动态效果网页，请学生欣赏，对比前面制作的网页，简单讨论后引出行为的概念。
教师要注意鼓励学生利用已有的知识技能解决问题，引导学生发现操作中的相似或相似之处，利用知识的迁移解决类似问题。在讲解事件、动作概念的时候，结合具体的网页实例进行，利于学生理解。
2．重点内容分析
（1）应用“交换图像”制作动态导航按钮
应用交换图像行为制作的导航按钮，其效果与前面学过的“鼠标经过图像”相似。其实，鼠标经过图像也是通过交换图像行为实现的，打开行为面板，可以很直观地看到系统自动添加的行为。因此，在讲解如何应用该行为之前，可以先分析鼠标经过图像，结合行为面板分析事件、动作，以便于学生再次理解这些概念，并能掌握。
对于触发动作的事件，可以让学生在行为面板中进行尝试设置，体验其中的不同，帮助理解行为、事件、动作之间的关系。 （2）应用“弹出信息”行为制作弹出对话框
这个动作发生在某种事件发生时，弹出一个对话框，给用户一些信息，这个对话框只有一个“确定”按钮。如图12.1所示 （3）应用“设置状态栏文本”行为为导航按钮添加提示信息
“设置状态栏文本”行为能使页面在浏览器左下方的状态栏上显示一些信息，如：提示链接内容、显示欢迎信息、滚动字幕等。本课中应用该行为为导航按钮添加提示链接内容信息。
通过设置状态栏文本行为的应用，引导学生了解，状态栏也是网页制作中可以发挥的一片空间。可以通过应用行为或者编写代码的方式在状态栏中实现各种动态效果。 弹出信息行为默认的事件是onClick，在本课中浏览网页时，如果单击标题区域的“逃生急救”文字，会自动弹出如图所示的信息对话框，单击“确定”按钮可关闭该窗口。图12.1 弹出对话框（三）教学补充
事件
事件是浏览器生成的消息，指示该页的访问者执行了某种操作。 不同的页面元素，所能发生的事件不尽相同，常见的事件还有以下一些，参见表12.1。
表12.1 常见的事件表（一）本课教学目标
1．能够应用“打开浏览器窗口”行为制作弹出窗口。
2．掌握利用插件在网页中插入背景音乐的基本方法。
3．掌握在网页中插入FLV视频格式文件的基本方法。
（二）教学设计与教学建议
1．课堂引入分析
在网页中除了使用文本和图像元素表达信息以外，还可以添加各种类型的多媒体内容，以丰富网页的效果，使网页更生动。本课的主要任务是制作多媒体网页，因此在课堂的引入部分，教师可以这样设计：第13课 影音视听 对比展示普通网页和多媒体网页，引导学生讨论多媒体网页与普通网页的区别以及多媒体网页的优势和特点。
多媒体内容是网上比较流行的元素，正是在网页中添加了多媒体元素，才使得网页变得更加生动，更加吸引浏览者。
2．重点内容分析
（1）应用“打开浏览器窗口”行为制作弹出窗口
要实现弹出窗口的效果，首先需要制作弹出的网页。教师一定要引导学生先完成要弹出的窗口，再往下做。如果要急于看到这种行为实现的效果，也可以利用已经存在的网页或者新建一个空白网页代替。
“打开浏览器窗口”行为必须应用在标签上，因此基于模板创建的网页必须从模板中分离才行。基于模板创建的网页从模板中分离的网页 (2) 在网页中插入FLV格式视频文件　　
利用插入FLV.…命令，可以将FLV格式视频文件直接嵌入网页中，但只有当浏览者所使用的浏览器安装了Adobe Flash Player 插件，视频才可以正常播放。 在“插入FLV”对话框中，必须通过检测大小或者手动输入宽度和高度值，否则无法正常插入视频文件，系统会弹出如图13.1所示的提示信息。图13.1 提示信息 插入FLV”对话框中，“自动播放”复选框用于指定在页面打开时是否播放视频，默认情况下为不选状态。“自动重新播放”复选框用于指定播放控件在视频播放完之后是否返回到起始位置，默认情况下为不选状态。 (3)利用“插件”在网页中插入背景音乐　　
利用插件可以将音频文件直接嵌入网页中，但只有当浏览者所使用的浏览器安装了相应的插件（如RealPlayer插件、 Windows Media Player插件），音频才可以正常播放。对于这一点，必须让学生明确，浏览器只所以能够显示网页上的动画、声音、视频以及各种效果，主要是因为安装了能够支持这些元素正常显示的插件。　 利用插件插入的音、视频文件，需要通过设置相应的参数控制其播放，如图13.3所示。
其中：Autostart 表示自动播放
Loop 表示循环播放 另外，要让学生清楚，利用插件不仅可以插入音频文件，还可以插入视频文件，其操作方法与插入音频文件相同。
插件在网页中只显示图标，而不显示所插入文件的内容，如图13.2所示。图13.2 插件图标图13.3 设置参数（三）教学补充
1 ．插入Shockwave影片
可以使用 Dreamweaver 将 Shockwave 影片插入到文档中。Shockwave 作为 Web上用于交互式多媒体的 Macromedia 标准，是一种经压缩的格式，使得在 Macromedia Director 中创建的多媒体文件能够被快速下载，而且可以在大多数常用浏览器中进行播放。
（1）在“文档”窗口中，将插入点放置在要插入 Shockwave 影片的地方，执行“插入” →“媒体” →“Shockwave（S）”命令。
（2）在显示的对话框中，选择一个影片文件。
（3）在属性检查器中，设置影片的宽度和高度。

说明：插入的Shockwave影片，在网页设计视图中显示为一个图标而不是影片内容，如图13.4所示。单击属性检查器中的“播放”按钮，可以播放插入的影片；单击“参数”按钮，可以打开“参数”对话框，设置控制影片的各项参数。
图13.4 ShockWave影片图标图13.5 设置属性检查器（一）本课教学目标
1．理解层的含义和在网页设计中的作用。
2．掌握实现显示/隐藏文本效果的方法。
3．掌握实现替换文本效果的方法。
4．掌握实现拖动网页内容效果的方法。
5. 掌握利用“效果”行为，为网页元素添加特效的方法。
（二）教学设计与教学建议
1．课堂引入分析
普通网页是一个二维的空间，如果在网页中增加层，就变成了一个三维空间，借助层和行为可以丰富网页的效果，使网页更生动。本课的主要任务是利用层和行为为网页增加特效，因此在课堂的引入部分，教师可以这样设计：
展示各种利用层和行为制作的动态效果网页，请学生欣赏，对比前面制作的网页，简单讨论后引出层的概念。第14课 锦上添花 2．重点内容分析
Dreamweaver中的层是一种可视化操作的定位技术，层体现了网页技术从二维空间向三维空间的延伸。层可以包含文本、图像或其他任何可在 HTML 文档正文中放入的内容。利用层可以在在网页中实现各种特殊的效果，利用层还可以实现页面的简单排版，但是层不能在基于网页模板创建的网页中创建。
（1）显示/隐藏文本
在网页中应用“显示-隐藏元素”行为，可以根据鼠标事件显示或隐藏网页中的相应元素。本课中，结合层和该行为，实现显示和隐藏文本的效果。
在网页中插入层，并在层中输入文本内容，修改层的名称为warning，设置层的可见性为hidden，默认为隐藏状态。
在dhbj图像对象上添加“显示-隐藏元素”行为，在“元素”列表中选择要改变其可见性的层“warning”，设置为“显示”，如图14.1所示。行为面板中设置激活该行为的事件为onMouseOver，实现鼠标移动到图片上，显示文本内容。 在dhbj图像对象上添加“显示-隐藏元素”行为，在“元素”列表中选择要改变其可见性的层“warning”，设置为“隐藏”。行为面板中设置激活该行为的事件为onMouseOut，实现鼠标离开图片时，隐藏文本内容。图14.1 “显示-隐藏元素”对话框 （2）替换文本内容
在包含层的网页中应用“设置容器文本”行为，可以动态地改变层的文本、转变层的显示、替换层的内容。本课中，分别为三个报警电话文本对象添加“设置容器的文本”行为，从而实现鼠标移动到报警电话上，右侧替换显示文本内容的动态效果。 由于被替换的文本内容是通过“设置容器的文本”对话框输入的，如图14.2所示，因此无法对文本格式进行单独设置。图14.2 “设置容器的文本” （3）拖动网页内容
结合“拖动AP 元素”行为和层， 可以实现在网页中任意拖放网页内容，为网页增添交互特效。
拖动AP元素行为只能应用在网页本身，不能应用在某个网页元素中，因此要选中标签再添加“拖动AP元素”行为。
设置激活“拖动AP元素”行为的事件为onLoad，意味着网页打开就能触发该行为。 1. 编辑层
在网页中添加层后，可以根据网页设计的需要，对层进行相应的编辑。
选中层，按住鼠标左键，可以拖放移动层的位置；可以通过拖放层周围的8个控制点，调整层的大小，如图14.3所示。 打开“层属性检查器”，如图14.4所示。可以设置层的背景图像或者背景颜色。 当层中的内容过多溢出时，可以选择溢出下拉列表框中的选项设置处理方式。图14.4 层属性检查器图14.3 编辑层（三）教学补充
（一）本课教学目标
1．理解表单域与表单元素之间的关系。
2．掌握制作表单网页的基本方法。
3．掌握在表单域插入表单元素的基本方法。
（二）教学设计与教学建议
1．课堂引入分析
网站不仅能够给浏览者提供各种信息，还能与浏览者进行交互，从浏览者那里收集信息。因此在课堂的引入部分，教师可以这样设计：
教师展示邮箱申请、账户注册、填写调查报告等具有信息交互功能的网页，引导学生分析这类网页的特点，引出表单网页。
第15课 信息互动 2．重点内容分析
（1）插入表单域
每个表单都是由一个表单域和若干个表单元素组成的，插入表单域是制作表单页的第一步。在同一个网页中可以插入多个表单域来制作不同的表单。
执行“插入”→“表单”→“表单”命令，即可在网页的当前光标位置插入表单域。插入表单域后，选中表单域，在“属性检查器”中设置表单的属性，如图15.1所示。图15.1 设置表单属性 在“动作”文本框中输入mailto:safe@sina.com，表示把表单中的内容发送到指定的电子邮箱中。
“方法”用于设置表单的提交方式。GET方法，把表单数据附加到请求URL中发送；POST方法，把表单数据嵌入到HTTP请求中发送；如果选择默认，则数据提交方式由浏览器决定，通常为GET方式。（2）插入单选按钮组
单选按钮作为一个组使用，提供彼此排斥的选项值，用户在单选按钮组内只能选择一个选项。利用单选按钮组，可以一次插入一组单选按钮。
执行“插入”→“表单”→“单选按钮组”命令打开“单选按钮组”对话框，如图15.2所示。
图15.2 “单选按钮组”对话框 可以通过单击“+”、“-”按钮来增加或者删除单选按钮项。 单选按钮组的布局可以使用换行符或者表格。
单选按钮组默认的排列方式是垂直排列，插入单选按钮组后可以通过删除每行后面的回车换行键，调整为水平排列。（3）插入复选框
复选框对每个单独的响应进行“关闭”和“打开”状态切换，因此用户可以从复选框组中选择多个选项。
执行“插入”→“表单”→“复选框”命令插入复选框。选中插入的复选框，打开“属性检查器”，设置复选框的属性，如图15.3所示。
图15.3 设置复选框的属性 为了区别不同的复选框，需要重命名复选框名称；复选框属性检查器中的“选定值”文本框用于设置这个复选框的值；“初始状态”用于设置复选框的初始状态，有两个选项——“已勾选”和“未选中”。如果选择“已勾选”，则这个复选框初始便处于选中状态。如果选择“未选中”，则这个复选框初始处于未选中状态。（一）本课教学目标
1．学会测试网站的链接。
2．能够修复网站中断掉的链接。
3．掌握如何配置服务器信息。
4．掌握利用Dreamweaver上传文件的方法。
（二）教学设计与教学建议
1．课堂引入分析
安全自护我能行网站的所有网页内容都制作完了，最后需要对整个网站进行分析、检查和测试，以确保站点中的各项操作都能正常工作。测试完成后，可以把网站发布到互联网上去，让更多的人来访问我们的网站。第16课 成果分享 2．重点内容分析
（1）测试网站——检查网站链接
检查网站中是否有断掉的链接也是测试网站的一个重要项目，如果检测到断掉的链接可以即时修复链接。
按Ctrl＋F8组合键，可以直接打开“结果”面板，进行链接测试，如图16.1所示。单击“链接检查器”面板（见图16.2）中的“显示”下拉列表框，选择“外部链接”可以检测当前网站中的所有外部链接；选择“孤立文件”，可以检测当前网站中没有进行链接的文件，如果确定检查出的文件在网站中没有用处，可以将文件清除。
超链接是整个网站中所有网页之间的桥梁和纽带，因此超链接是否正确决定了网页之间能否准确跳转，因此要引导学生重视超链接测试，并能及时修复网站中有问题的链接。
图16.1 结果面板图16.2 链接检查器 （2）配置服务器
与服务器连接的方式有很多种，常用的是“FTP”和“本地/网络”两种方式。“本地/网络”方式主要用于设置本地计算机（本地计算机为web服务器）中的远程文件夹。“FTP”方式主要用于设置远程计算机中的文件夹。在本课中主要以配置“本地/网络”方式为主，这样也便于实现文件上传的操作，如图16.3所示。图16.3 设置“本地/网络”选项 （3）上传文件
在本课中，由于远程信息的访问方式选择的是“本地/网络”，因此上传文件就是将整个网站的文件上传到本地计算机的远程文件夹d:website中。
除了一次上传整个站点外，还可以单独上传某个文件夹或文件。选中网站中的某个文件夹或文件，单击“上传”按钮即可将所选的文件夹或文件上传，网站上传前、后窗口的显示内容分别见图16.4和图16.5。
教师可以只讲解其中的一种情况，鼓励学生通过探究的方式尝试其他上传方式（如：逐个文件上传、逐个文件夹上传等）。图16.4 网站上传前的窗口显示图16.5 网站上传后的窗口显示（三）教学补充
1 ．设计备注
当站点中的文件越来越多时，准确了解文件夹中的内容及文件的含义显得非常重要，利用设计备注可以对整个站点或某一文件夹甚至是某一文件增加附注信息，这样可以时刻跟踪管理每一个文件，方便管理站点，了解文件的开发信息等。 （1）在文件面板中选择要设置设计备注的文件，例如选择首页index.html，执行“文件”→“设计备注”命令，打开如图16.6所示的“设计备注”对话框。
（2）单击“状态”下拉列表框，选择当前文件的状态，如“草稿”、“最终版”。在“备注”文本框中填写说明文字。单击“插入日期”按钮可以插入当前的日期。选中“文件打开时显示”复选框，可以在打开文件时显示此文件的设计备注。 图16.6 “设计备注”对话框 2 ．检查浏览器兼容性
（1）执行“文件”→“检查页”→“浏览器兼容性”命令，打开 “浏览器兼容性”面板。 （2）单击面板中的 按钮，打开如图16.7所示的菜单，选择“设置”命令打开如图16.8所示的“目标浏览器”对话框，选择不同的浏览器版本，单击“确定”按钮。图16.7 “浏览器兼容性”面板图16.8“目标浏览器”对话框 （3）单击面板中的 按钮，选择菜单中的“检查浏览器兼容性”命令，检查整个站点在所选浏览器中能否正常显示。

展开更多......

收起↑