信息技术八年级下册教参_第1页
信息技术八年级下册教参_第2页
信息技术八年级下册教参_第3页
信息技术八年级下册教参_第4页
信息技术八年级下册教参_第5页
已阅读5页，还剩95页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

信息技术八年级下册教参第一页，共100页。

一、单元概述在本单元中，我们从生成简单网页入手，理解网页设计的基础知识；然后规划站点，了解网站建设的开发流程；最后利用DreamweaverCS5创建站点，并制作首页。二、学习目标

本单元是学生初次接触用于制作网站的软件DreamweaverCS5，因此首先让学生在欣赏网站的同时了解网页设计与网站制作的基本常识是必要的，在进行软件介绍的时候重点强调网页编辑软件的优越性，另外要让学生明确的是：在着手创建网站之前，必须要先对网站进行站点规划，最后通过创建“安全自护我能行”为题的网站使学生经历“规划网站→创建站点→编辑首页”的网站初步建设过程。通过本单元循序渐进的学习过程，学生将按部就班地掌握：使用HTML语言编写的代码生成网页、用IE浏览器预览网页、网站的开发流程、创建站点、创建首页、规划素材文件、为页面添加网页标题和背景色、使用表格初步布局

第1单元初建网站第二页，共100页。网页、调整表格、设置网页背景图像、插入Flash动画并设置参数、插入普通文本和特殊字符、保存网页等知识与技能。在教学过程中要尽可能地利用学生已有的知识技能分析并解决新的问题，例如网页中的背景色调整、表格设置与调整、插入文本、保存网页等，其操作方法与Office系列软件和上学期学过的Flash软件具有较大的相似程度，此时教师可以引导学生知识迁移、自行探索发现解决问题的方法，而教师则可将注意力集中在更需要关注的学生身上，最大限度地提高课堂效能，将问题在课上给予解决。教师在布置单元任务或课堂任务的时候，要鼓励学生不完全模仿范例，而是利用素材进行网页的创意和设计，争取留给学生更多的空间去发挥创意。在进行评价的时候要对创意部分及时给予鼓励，充分利用各种方式对学生作品进行展示，引导不同层次的学生之间形成良性竞争，从而在班级教学中创造出和谐上进的学习氛围，对信息技术教学产生推动作用，充分体现“学生为主体，教师为主导”的教学理念。三、重点难点

教学重点

1．掌握互联网、网页与首页、网站等网页设计与网站制作的基本知识。

2．学会使用HTML代码在记事本工具中制作网页并且通过用IE浏览器预览网页。

第三页，共100页。

3．了解网站的开发流程，能够围绕网站主题设计组织结构图。

4．熟悉DreamweaverCS5的工作界面。

5．掌握创建站点、规划素材文件的方法。

6．学会创建首页、设置网页标题和背景色、保存网页及在IE中预览网页。

7．能够根据网页内容对页面进行合理的表格布局，并调整表格属性。

8．能够灵活地将图像、Flash动画、文本和特殊字符插入到页面中，并且通过“属性检查器”设置以上网页元素的属性。教学难点

1．HTML语言的结构，标签和属性的含义。

2．通过观察文档图标和扩展名判断该文档调用的启动软件。

3.能够根据网站主题的需要，搜集并整理相关素材，去粗取精、去伪存真。

4.通过“窗口”菜单和面板组对工作界面进行自由布局安排，打造适合自己使用的软件环境。

5.使用“标签选择器”来选择网页元素，以设置其属性。

6.利用像素和百分比两种度量单位来控制网页元素的尺寸。

四、学时安排本单元共4课，总计4学时，每课占用1学时。第四页，共100页。（一）本课教学目标

1．掌握互联网、网页与首页、网站等网页设计与网站制作的基本知识。

2．学会使用记事本作为网页编辑工具来编辑HTML代码并生成网页。

3．掌握浏览网页的方法并理解网页编辑工具与浏览工具之间的关系。（二）教学设计与教学建议

1．课堂引入分析在当前的社会生活中，网络正在发挥着越来越重要的作用，大量制作精美、功能强大的网站出现在互联网上。对于学生来说，制作个人网站也正在成为一种流行时尚。通过本教材的学习可以轻松帮助学生入门，并逐步亲手打造属于自己的个性十足的网站。

第1课新手入门第五页，共100页。在本课的引入设计中，教师可以这样设计：首先打开IE浏览器，在地址栏中输入网址，打开一个范例网站的首页，单击首页中的动画、超文本、图片等网页元素，可以分别链接到网站中的其他页面中。在操作过程中教师提出问题，引导学生思考互联网、网站、网页、首页等术语的含义，以及它们之间的关系，尝试让学生体会浏览器和网页的关系，从而将网站设计与网页制作的基本知识进行概括总结并明确落实到每个学生身上。在进行教学的时候，一定要让学生认识到已有知识的重要性，充分利用已经具备的技能去尝试解决新问题，从而变被动学习为主动探究。教师可引导学生充分利用教材中的“视野拓展”和“创作天地”板块进行自学，这实际上是在实施分层教学，以巩固本课的知识技能为主，适当地进行补充，让部分基础较好的同学在完成基本任务之后也能有事可做，给学生创造出提高的空间。作为网站制作的起始课，教师要切实地关注每个学生，尤其是在以前的学习过程中表现出学习能力较弱的学生，要确保每个学生都有一个好的开始，都能将第一个网页作品保存到教师指定的位置（本地磁盘或网络中的指定目录）。教师应对所有完成保存网页任务的学生进行及时地评价与鼓励，保护学生的学习积极性。另外，对完成基本任务并有所创新的同学重点表扬，鼓励学生主动学习，有计划地营造良性竞争的氛围。第六页，共100页。2．重点内容分析（1）网页设计与网站制作的基本知识是本课的教学重点在本课中通过欣赏站点，使学生了解和掌握互联网、网页与首页、网站、IE浏览器的基本含义，并且能够明确它们相互之间的关系。学生在学习网站制作之前已经接触过网站，浏览过各式各样的网页，因此教师在完成此教学任务的时候，可以充分利用学生已有基础，不必完全进行讲授式教学，可以结合启发、设问等方法，使学生尽可能地自己总结出相关知识。（2）使用记事本作为网页编辑工具来编辑HTML代码并生成网页是本课的难点在进行此部分教学的时候，可以先借助学生已有技能，启动记事本，复制并粘贴素材文件中提供的HTML代码，命名并保存文件，然后在浏览器中进行预览。对于HTML代码部分，教师可以尝试通过修改属性值的方法，引导学生探索标签的含义及其与属性值的对应关系，这也同时是对“创作天地”板块中的练习进行提示的过程，然后通过分析此HTML实例，讲解HTML语言的基本结构，对基本的<html></html>、<head></head>、<body></body>标签进行初步介绍，鼓励有余力的同学通过“视野拓展”板块进行自学，并独立完成“创作天地”中的练习。第七页，共100页。通过教师演示引导学生思考扩展名对文件的影响，既包括其对文件图标的影响，也包括调用应用程序的影响，从而引出程序关联的知识进行补充讲解，见图1.1和图1.2。扩展名为.txt，调用程序为记事本扩展名为.html，调用程序为IE浏览器图1.1Web页图标图1.2文本文档图标(3)保存并上传文件本课是学生第一次上传网页作业，因此要着力于培养学生的学习习惯，尤其是在保存作业至本次磁盘之后，一定要尽可能地让学生将文件上传到网络中的指定位置，并且能够给予学生查看其它学生作业的权限，这不仅便于教师评价，更便于学生之间互评。学生可以通过比较作品的差异看到自己的学习处于整个集体中的位置，从而反思自身作品，迸发灵感，获得动力进行二次创作，对于整个班级的激励将会产生更多的富有创意的优秀作品。学生还可以随时查看上传作业的情况，作为调整自身作业完成进度的参考。第八页，共100页。（三）教学补充

本课对HTML语言进行了简单的介绍，在“视野拓展”和“创作天地”板块中都安排了此部分的内容。教师可以补充一些简单的HTML标签和属性，提供给有兴趣的学生作为提高练习使用，也为今后更好地使用“标签选择器”选择对象打下基础。如：<table></table><tr></tr><td></td>

标签HeightWidthBorderAlignBackground

属性第九页，共100页。（一）本课教学目标

1．了解网站的开发流程。

2．掌握开发个人网站的步骤。

3.能够根据网站主题设计网站结构。

4．熟悉DreamweaverCS5的工作区布局和界面环境。

5．掌握使用向导创建站点的方法与步骤。（二）教学设计与教学建议

1．课堂引入分析在第一课我们已经掌握了网站、网页、网页的组成元素等基础知识，现在就来了解开发建设网站的过程中需要进行的工作。在进行网站建设的时候，需要先进行需求分析，要对网站的主题、素材、规划内容综合考虑。第2课轻松上路第十页，共100页。本课首先要解决的正是网站的组织结构问题，我们以“安全自护我能行”为例对网站的组织结构图进行讲解，要求学生掌握围绕主题确定网站结构及网页内容的方法。规划好站点后，就可以开始着手创建站点了。使用DreamweaverCS5创建站点，当然要先熟悉软件的工作环境。我们在这里只需要简单介绍即可，因为本软件的文档窗口与Office系列软件相似，面板组又和同一公司出品的Flash软件雷同，只需要简单地提示学生并快速演示工作区布局即可。DreamweaverCS5取消了“站点定义向导”，新建站点只能通过“站点设置对象”窗口完成，但是这个窗口除了使用“新建站点”命令激活外，也可以使用“管理站点”中的“新建”按钮激活。教师可提示学生打开“站点设置对象”窗口中的“高级设置”标签，浏览其中包含的高级设置选项，推荐部分学生可以在今后的学习中尝试使用。2．重点内容分析规划网站及创建站点是本节课的教学重点，下面分别进行教学建议。在本课讲解网站开发流程之后，教师应迅速将课题引导至规划站点上来，引导学生围绕网站主题“安全自护我能行”展开讨论，共同思考本网站应该如何规划，第十一页，共100页。依照先整体后局部，先简单后复杂的原则去分层、分角度设计网站结构和网页内容，让学生体验完整的规划过程，以便对“创作天地”中布置的课外提高任务起到降低难度的作用。创建站点是本课的重要内容，要求所有学生一定要掌握使用“站点”菜单的“新建站点”命令创建站点的方法，对于使用“文件”面板创建站点的方法，则可以通过提示或在今后的教学过程中演示渗透来介绍，如图2.1所示，尽量使学生能够熟悉如图2.2所示的“管理站点”对话框，并且弄清楚在此对话框中的“删除”站点并非删除掉网站文件本身，仅仅是删除在DreamweaverCS5对此站点设置的信息而已。图2.1“文件”面板图2.2“管理站点”对话框第十二页，共100页。

（三）教学补充

1.切换网站当学生使用的计算机具有磁盘保护的功能，或者在DreamweaverCS5中创建了多个待编辑的网站时，学生启动软件后，系统不会恰好打开需要编辑的站点，此时可以提示学生使用“文件”面板来打开需要的网站。其操作过程如图2.3、2.4和2.5所示。

图2.3单击箭头所示位置图2.4选择所需站点

图2.5完成切换第十三页，共100页。2.网站组成在创建站点的过程中，教师不可避免地会遇到站点的组成问题，一般来说在DreamweaverCS5中创建的站点分为三部分：本地站点、远程站点和测试站点，讲清楚此三部分的含义，才能正确设置站点。本地站点：这是我们创建站点的工作目录，用来存放网页和素材，它可以位于学生的本地计算机，也可以位于教师配置的网络服务器上。远程站点：远程站点是用来存储我们创建的站点文件的文件夹，这些文件用于测试、生产、协作和发布站点。如果想在不连接Internet时测试站点，可以在本地计算机上通过软件设置的办法去模拟Web服务器环境。测试站点：用来测试动态页面的站点，适用于动态网页。

3.动态网页和静态网页至于动态网页和静态网页的区别，教师可以简单概括讲解如下：动态网页和静态网页是相对的，动态网页是指内容由站点数据库中变化的数据来显示的网页，静态网页和动态网页的扩展名不同，静态网页一般是以.htm、.html、.shtml、.xml等为扩展名，而动态网页则是以.asp、.jsp、.php、.perl、.cgi等为扩展名的。教师还可以提供学生一些动态网站的地址，让学生通过自己的实际操作去体会二者的区别。第十四页，共100页。（一）本课教学目标

1．进一步熟悉DreamweaverCS5的工作界面。

2.掌握利用“文件”面板打开网站的方法。

3．学会根据网站素材的分类规划网站的文件夹。

4．熟练地创建并保存网页。

5.掌握设置网页标题的方法。

6.能够根据网页内容使用表格恰当布局。

7.学会设置网页背景色及表格背景图像。

8.初步认识并尝试使用标签选择器选择对象。

9.熟练地使用快捷键在浏览器中预览网页效果。（二）教学设计与教学建议

1．课堂引入分析

第3课开篇之作第十五页，共100页。

当站点规划并创建完毕之后，要进行的工作首当其冲就是制作网站的首页。首页作为网站的门面，对网站来说至关重要，因此我们要尽量将首页制作的富有吸引力。

2．重点内容分析

（1）在“文件”面板中规划站点首页需要使用的素材必须存放在网站中才能被它引用，所以我们要为素材建立文件夹，将不同类别的素材分门别类地存放，便于管理。打开“文件”面板，模仿在windows中的操作，右击网站名“安全自护我能行”，在弹出的快捷菜单中执行“新建文件夹”命令，此时文件夹名处于可编辑状态，我们只需要直接输入文件夹名即可完成命名，创建网页也可以采用此方法，如图3.1所示。与使用“新建”菜单来创建网页相比，在“文件”面板中操作更为简单快捷。图3.1重命名文件夹和网页

当需要更改网站中的网页名或文件夹名时，可右击网页名或文件夹名，执行弹出的快捷中的“编辑”→“重命名”命令，或直接使用快捷键F2。第十六页，共100页。

为素材归类存放准备的文件夹建立完毕之后，我们要将素材存放到相应的目标文件夹中。此时可以考虑暂时脱离DreamweaverCS5的软件环境，使用windows的资源管理器进行操作，这样做的好处是可以批量复制粘贴文件，尤其是素材准备充分的情况下，能够节省大量的时间，这种方法优于在网页中先使用素材后再逐个保存到网站中的方法。在教材中我们所介绍的正是此种方法。至于传统的先使用素材后保存到指定文件夹的方法，虽然不推荐使用，但是也可以介绍给学生，其过程如图3.2所示（此示意图是以在网页中插入图像为例的）。

图3.2保存网页使用的素材图像第十七页，共100页。

创建首页的过程与创建普通网页并无实质性的区别，系统区分首页和普通网页依赖于文件名，如果网页被命名为index.html(index.htm)或者default.html

(default.htm)，那么在将来发布网站的时候就会指定该网页为首页，此原则是由发布站点的软件所决定的，作为使用者我们只需要遵守该原则，在Dreamweaver中将首页命名为index.html(index.htm)，其他网页链接在它下层即可。

（2）设置网页标题

每个网页都有标题，但是网页的标题并不显示在网页文档中，而是显示在浏览器的标题栏中，如果不设置则显示成“无标题文档”，如图3.3所示。

设置网页标题并不复杂，在教材中我们介绍了使用“文档”工具栏中的的“标题”文本框的方法来设置，然后在IE中预览效果。如图3.4所示。图3.3预览无标题网页

图3.4设置并预览网页标题第十八页，共100页。

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

（4）使用表格对页面布局插入表格是在网页设计中经常采用的页面布局方式，使用表格控制网页元素的定位，既简单又精确，因此掌握好表格的运用是非常重要的。当表格用于布局的时候，通常会将边框线设为0像素，这样在浏览器中浏览网页时将不会看到表格边框线。我们在首页中正是如此设置的，表格的边框线在编辑状态下显示为虚线，在IE中预览的时候，边框线并不显示。第十九页，共100页。

当需要选择表格对象（表格、行、列、单元格）的时候，我们推荐使用状态栏中的“标签选择器”来进行。需要注意的是，随着鼠标在表格中位置的不同，“标签选择器”区域显示的内容也会发生相应的变化，此时我们可单击标签，并观察表格对象的选择状态即可判断所选的对象是否正确。对于如图3.5所示的2*2的表格来说，当将插入点定位在b1单元格中时，单击“标签选择器”中的<td>，将会选择b1单元格本身，单击<tr>，则选中插入点所在的行，即a1和b1单元格，单击<table>，选中整个表格，如果单击<body>，那么选择的将是整个网页，在此过程中，“属性检查器”也跟随对象的不同发生变化，这样便于设置对象的属性。网页中插入的表格状态栏中的“标签选择器”图3.5使用“标签选择器”选择对象第二十页，共100页。

在讲解网页标题的时候教师可对文档工具栏中的代码、拆分、设计视图分别进行介绍，引导学生观察在设置了网页标题之后，代码视图或者拆分视图中的哪个标签的内容发生了变化，自然地引出<title>、</title>标签的作用，如图3.6所示。图1.12设置并预览网页标题

图3.6在代码视图中观察网页标题（三）教学补充

1.通过代码视图或拆分视图设置网页标题2.设置页面属性在“页面属性”对话框中，我们仅仅设置了“外观CSS”背景颜色一个项目，教师此时可引导学生对“外观”类包含的“页面字体”、“大小”、“文本颜色”进行设置，学生完全可以自己理解并自觉应用在网页的设计上。对“链接”类内容，教师可简单介绍设置链接文本使用的字体、大小，颜色以及活动链接颜色等。第二十一页，共100页。（一）本课教学目标

1．巩固选择表格对象的方法。

2.进一步学习设置表格对象的属性。

3．掌握在网页中插入Flash动画文件，并学会设置Flash动画的参数的方法，以控制动画的播放效果。

4.能够灵活地在网页中使用文本。

5.初步认识并尝试使用辅助设计工具定位网页元素。（二）教学设计与教学建议

1．课堂引入分析在首页制作的过程中，我们已经使用表格进行了初步的布局。之所以叫做初步布局，就是因为我们还没有根据素材的具体情况对表格进行细致而精确的调整。有时候，我们可以利用鼠标大致调整表格对象的尺寸，但绝大部分情况下，都需要使用者精确地控制表格对象的高度、宽度、比例等属性，才能达到精确布局的目的。第4课星光闪烁第二十二页，共100页。Flash动画在网页中得到了广泛的采用，它使网络世界更加炫目，本课我们将学习使用在网页中插入Flash动画，并设置其属性和参数，使之更好地起到装饰网页、深化主题的作用。文本是网页中介绍说明各种信息的基本组成元素，在网页中使用文本并根据需要设置文本的属性是网页设计的重要组成部分，也是我们作为软件使用者的基本技能。在本课中我们要学习多种方式使用文本，以及插入特殊字符等。

2．重点内容分析

（1）调整表格在实际应用中，我们如果要设置表格对象的属性，前提是选择好表格对象，在前面我们已经探讨过使用“标签检查器”选择表格对象的方法，在本课的教材中介绍了使用Ctrl键搭配鼠标及使用鼠标单击行左或列首选择行、列的方法。这里我们补充介绍使用表格标题和列标题选择表格和列的方法，使学生最终能够灵活地选择表格对象。其操作方法如下：将插入点定位在表格内任意位置，当表格出现表格标题及列标题菜单的时候，单击标题菜单，执行“选择表格”或“选择列”命令即可，如图4.1所示。第二十三页，共100页。图4.1使用标题按钮选择表格和列

虽然已经为表格设置了高度和宽度，但这并不意味着表格一定以我们设置的尺寸显示，这是由于表格中的元素尺寸超出表格尺寸造成的。例如，我们在网页中插入一个2行1列的表格，设置表格的属性如下：宽度100，高度200，边框、填充和间距都为0，此时表格的尺寸和我们设置的相同，为100*200像素。如果我们将一个图像插入第一行中，并调整图像大小为200*100像素，此时表格的尺寸就会自动调整为200*200，保证内容得以完整显示，如图4.2所示。图4.2表格尺寸随内容自动调整第二十四页，共100页。

填充：单元格中的内容与单元格边框的距离，单位默认为像素。间距：单元格之间或单元格与表格边框之间的距离，单位默认为像素。表格属性中的“填充”和“间距”选项如果不进行设置，大多数的浏览器都会默认按照“填充”为1、“间距”为2来显示表格，如果不希望如此显示，就要设置其值。图4.3是分别将“填充”和“间距”设置为不同的值时表格的显示效果。注意：为了突出显示效果，可以预先将表格的边框设为1个像素的实线。填充：0间距：0填充：空白间距：空白填充：10间距：10填充间距图4.3设置表格的“填充”和“间距”第二十五页，共100页。

（2）插入Flash动画并设置参数在教材中介绍了执行“插入”→“媒体”→“Swf”命令来插入Flash动画文件，当熟悉DreamweaverCS5的工作界面后，我们一定会喜欢上使用“常用”工具栏中的“媒体：SWF”按钮来插入Flash的方法，Dreamweaver会自动保留上次使用过的元素，如图4.4所示。“媒体”按钮图标自动变为Flash图标图4.4使用“常用”工具栏插入Flash动画第二十六页，共100页。

（3）在网页中使用文本在DreamweaverCS5中，专门提供了一个“文本”工具栏来帮助使用者设置文本和插入特殊字符。“文本”工具栏中的各个按钮含义如图4.5所示，与使用菜单命令和“属性检查器”搭配设置文本相比，使用工具栏显然操作步骤少，执行速度快。粗体、斜体强调文本样式设置段落、块样式设置标题项目设置列表样式定义缩写首字母缩写插入特殊符号

图4.5“文本”工具栏第二十七页，共100页。

（三）教学补充格式化表格在DreamweaverCS5，取消了格式化表格功能，这个功能预先定义了很多漂亮的表格样式，适合初学者使用，我们可以通过使用低版本的Dreamweaver来完成格式化表格的操作，省去逐项设置的不便。

其具体步骤如下：

（1）启动Dreamweaver8软件，选中要格式化的表格，执行菜单“命令”→“格式化表格”命令。（2）在弹出的“格式化表格”对话框中，选择预设方案，此时可以直接使用预设方案，还可以在此对话框中选择一个方案为基础，再进行个人设定，创建出具有个人风格的表格，如图4.6所示，即为自定义风格的表格设置。

图4.6在“格式化表格”对话框中设置自定义风格第二十八页，共100页。

一、单元概述

在本单元中，学习如何创建框架网页，利用框架进行网页的结构划分和布局；学习如何创建网页模板，利用模板和框架统一网站风格，提高网页的制作效率。二、学习目标

1.了解框架网页的基本结构，掌握框架网页的制作方法，并能独立制作框架网页，利用框架对网页进行结构划分和布局。

2.了解网页模板的基本用途，掌握网页模板的创建方法，并能根据网站的风格创作网页模板。三、重点难点

教学重点

1．了解框架的基本概念和用途。

2．掌握框架网页的创建和保存的方法。

3．掌握用鼠标经过图像制作导航按钮的方法。

第2单元框架模板第二十九页，共100页。4．掌握表格的拆分、合并、嵌套等高级应用方法。

5．掌握制作外部链接和电子邮件链接的方法。

6．了解网页模板的基本概念和用途。

7．掌握网页模板的创建方法。

8．掌握可编辑区的添加、删除等基本操作。

9．掌握目标的设置方法和具体意义。教学难点

1．创建与保存框架的基本方法。

2．如何利用鼠标经过图像制作导航按钮。

3．创建网页模板的基本方法。

4．掌握表格的灵活运用方法及高级应用。

5．掌握目标设置的方法和具体意义。四、学时安排本单元共2课，总计2学时，每课占用1学时。第三十页，共100页。（一）本课教学目标

1．掌握拆分单元格的方法。

2．掌握创建与保存框架集的方法。

3．熟练掌握利用鼠标经过图像制作网页导航的方法。

4．掌握外部链接和电子邮件链接的制作方法。

5．掌握目标设置在网页制作过程中的作用和方法。（二）教学设计与教学建议

1．课堂引入分析在进行网站制作的时候，为了有效地统一网站的风格，常常需要将页面划分成多个区域，将各个网页的相同内容（如网站标题、网站导航等）固定在一个区域中，使网站导航结构清晰。利用框架可以轻松实现网页结构划分和布局。演示网页范例：给学生展示一些比较有特点的使用了框架的网页范例，通过观察了解网页布局的基本规律和框架在网页中的作用，对框架有一个初步的了解和感性认识。第5课统一风格第三十一页，共100页。

提出任务：用一节课时间，学习如何创建框架、制作框架网页。在制作的过程中，要注意随时保存文件。

2．重点内容分析

（1）创建和保存框架集利用“新建文档”的方式创建框架集，是比较直接的创建框架的方法。根据实际网页布局的需要，可以方便地选择框架集的样式，从而创建合适的框架。

可以单独保存每个框架集文件和带框架的文档，也可以同时保存框架集文件和框架中出现的所有文档。保存框架集时，要特别引导学生注意和体会保存文件的顺序。先存框架集文件，再保存带框架的文档以及框架中显示的网页文件。（2）利用鼠标经过图像制作导航按钮鼠标经过图像由页面载入时显示的原始图像和鼠标指针经过时显示的图像组成，这两个图像应大小相等，如果图像大小不等，将自动调整第2个图像的大小以匹配第1个图像的属性。在浏览器中当鼠标指针移过图像时，图像可以发生变化，利用鼠标经过图像的这种特殊效果，可以制作动态网页导航按钮。为了制作出效果特殊的鼠标经过图像，所需的原始图像和鼠标经过时显示的图像需要通过图像处理工具进行制作和处理。注意引导鼓励学生自己处理制作图像，以彰显学生个性，培养学生的创造能力。

第三十二页，共100页。

3．归纳提高分析

（1）表格的高级应用在本课的任务中，表格被广泛应用，在规则表格的基础上，通过合并单元格制作不规则的表格，以实现网页布局的特殊需要。①合并单元格选中需要合并的单元格，通过以下四种方法可以实现：a.执行“修改”→“表格”→“合并单元格”命令。b.在选中的单元格上右击，执行“表格”→“合并单元格”命令。c.按下组合键CTRL+ALT+M。d.单击“属性检查器”中的“合并所选单元格，使用跨度”按钮。②设置单元格背景结合插入图像和设置单元格背景，可以实现如教材图5.18所示的图像表格效果。用作表格边框的图像文件，需要利用图像处理工具进行加工处理，以符合页面布局的需要。

（2）目标设置属性检查器中的“目标”用来设置超链接的打开方式，共有4个选项可供选择。目标设置部分不太容易理解，在讲解的同时可配以直观有效的例子加以说明。第三十三页，共100页。（三）教学补充

1．创建框架

创建框架除了利用新建文档的方式以外，还可以通过以下方法创建。

（1）使用预定义的框架集将插入点放置在文档中。在“插入”栏的“布局”类别中，单击“框架”按钮上的下拉箭头，然后选择预定义的框架集，如图5.1所示。框架集图标提供应用于当前文档的每个框架集的可视化表示形式。框架集图标的蓝色区域表示当前文档，而白色区域表示将显示其他文档的框架。

（2）设计框架集在创建框架集或使用框架前，执行“查看”→“可视化助理”→“框架边框”命令，使框架边框在“文档”窗口的“设计”视图中可见。执行“修改”→“框架集”命令，然后从子菜单选择拆分项（例如“拆分左框架”或“拆分右框架”）。Dreamweaver将窗口拆分成几个框架。如果打开一个现有的文档，它将出现在其中一个框架中。

图5.1预定义框架集第三十四页，共100页。

2.在文档窗口中选择框架和框架集在“文档”窗口的“设计”视图中，在选定了一个框架后，其边框被虚线环绕；在选定了一个框架集后，该框架集内各框架的所有边框都被淡颜色的虚线环绕。（1）在“文档”窗口中选择框架在“设计”视图中，按住Alt键的同时单击框架内部，在框架周围显示一个选择轮廓。（2）在“文档”窗口中选择框架集在“设计”视图中，单击框架集的某一内部框架边框，（要执行这一操作，框架边框必须是可见的；如果看不到框架边框，则执行“查看”→“可视化助理”→“框架边框”命令以使框架边框可见。）在框架集周围显示一个选择轮廓。（3）选择不同的框架或框架集要在当前选定内容的同一层次级别上选择下一框架（框架集）或前一框架（框架集），按住Alt键的同时按下左箭头键或右箭头键，使用这些键，可以按照框架和框架集在框架集文件中定义的顺序依次选择这些框架和框架集。要选择父框架集（包含当前选定内容的框架集），可以在按住Alt键的同时按上箭头键。要选择当前选定框架集的第一个子框架或框架集（即，按在框架集文件中定义顺序中的第一个），可以在按住Alt键的同时按下箭头键。第三十五页，共100页。（一）本课教学目标

1．掌握合并单元格及插入嵌套表格的方法。

2．了解模板的概念和用途。

3．学会创建网页模板。

4．掌握定义、编辑可编辑区域的基本方法。

5．能够根据网站的需要创建网页模板。（二）教学设计与教学建议

1．课堂引入分析在进行大量的页面制作的时候，很多页面会用到相同的布局、图片和文字等元素。为了避免一次次地重复劳动，可以将具有相同版面结构的页面制作成模板，然后基于模板创建新的网页，最后根据需要对页面进行改动，加入个性化的内容。第6课事半功倍第三十六页，共100页。

演示模板范例：给学生展示一些比较有特点的网页模板，激发学生对模板的兴趣和认识，对网页模板有一个初步的了解和感性认识。提出任务：用一节课时间，学习如何创建网页模板。

2．重点内容分析

（1）模板的概念和用途模板可以被理解成一种网页模型，利用这个模型能够方便地做出很多页面，使用模板可以避免重复地在每个页面输入或修改相同的部分，等网站改版的时候，只要改变模板的设计，就能自动更改所有基于这个模板创建的网页。模板文件的扩展名为.dwt，存放在网站根目录的Templates文件夹中。

（2）创建模板文件利用“资源”面板可以直接创建模板文件，这是一种最直接最直观的方式，如图6.1所示。建议教师引导学生采用这种方式创建模板文件，这样对于整个网站的资源构架会有个一个逐步的了解，对于“资源”面板的用途也逐一掌握。图6.1资源面板第三十七页，共100页。

（3）定义可编辑区可编辑区域是基于模板的文档中的未锁定区域，它是模板用户可以编辑的部分。模板创作者可以将模板的任何区域指定为可编辑的，要让模板生效，它应该至少包含一个可编辑区域，否则，将无法编辑基于该模板的页面。可以把图像、文本、表格等页面元素设置成可编辑区，也可把整个表格及表格里的内容设置成一个可编辑区，还可以把某个单元格及内容设置成一个可编辑区，但不能把几个不同的单元格及内容设置为同一个编辑区。可编辑区域在模板中由高亮显示的矩形边框围绕，该边框使用在首选参数中设置的高亮颜色，如图6.2所示。该区域左上角的选项卡显示该区域的名称。如果在文档中插入空白的可编辑区域，则该区域的名称会出现在该区域内部。这一点，教师可通过对比的方式给学生解释清楚。图6.2可编辑区第三十八页，共100页。

（4）表格的高级应用在本课的任务中，表格被广泛应用，在规则表格的基础上，通过拆分单元格和插入嵌套表格的方式，实现网页布局的特殊需要。①拆分单元格选中需要拆分的单元格，通过以下四种方法可以实现：a.执行“修改”→“表格”→“拆分单元格”命令。b.在选中的单元格上右击，执行“表格”→“拆分单元格”命令。c.按下组合键CTRL+ALT+S。d.单击“属性检查器”中的“拆分单元格为行或列”按钮。②插入嵌套表格为了更好地布局网页，在表格中还可以嵌套新的表格。总表格负责整体的排版，嵌套表格负责各个子栏目的排版，并插入到总表格的相应位置中。总表格的高度和宽度一般使用像素值，嵌套表格一般使用百分比，以避免嵌套表格的高度和宽度与总表格发生冲突。第三十九页，共100页。（三）教学补充

1．创建模板文件的其他方法

除了利用“资源”面板新建模板文件的方式以外，还可以通过以下方法创建。

（1）“新建文档”的方式执行“文件”→“新建”命令，打开“新建文档”对话框，如图6.3所示。选择“空白页”类别中的“HTML模板”，单击“创建”按钮即可。

（2）“另存为模板”的方式

打开已经制作好的网页文件，执行“文件”→“另存为模板”命令，打开“另存为模板”对话框，如图6.4所示。在“站点”下拉列表框中选择要保存模板的站点，在“另存为”文本框中输入模板的文件名，单击“保存”按钮即可。图6.3“新建文档”对话框图6.4“另存为模板”对话框第四十页，共100页。

2．模板区域的类型创建模板时，可编辑区域和锁定区域都可以更改。但是，在基于模板的文档中，模板用户只能在可编辑区域中进行更改；无法修改锁定区域。共有四种类型的模板区域：（1）可编辑区域是基于模板的文档中的未锁定区域；它是模板用户可以编辑的部分。模板创作者可以将模板的任何区域指定为可编辑的。要让模板生效，它应该至少包含一个可编辑区域；否则，将无法编辑基于该模板的页面。（2）重复区域是文档中设置为重复的布局部分。例如，可以设置重复一个表格行。通常重复部分是可编辑的，这样模板用户可以编辑重复元素中的内容，同时使设计本身处于模板创作者的控制之下。在基于模板的文档中，模板用户可以根据需要使用重复区域控制选项添加或删除重复区域的副本。（3）可选区域是用户在模板中指定为可选的部分，用于保存有可能在基于模板的文档中出现的内容（如可选文本或图像）。在基于模板的页面上，模板用户通常控制是否显示内容。（4）可编辑标签属性使用户可以在模板中解锁标签属性，以便该属性可以在基于模板的页面中编辑。例如，可以“锁定”在文档中出现的图像，但让模板用户将对齐设为左对齐、右对齐或居中对齐。第四十一页，共100页。

一、单元概述在本单元中，我们将综合运用框架和模板创建网页，通过制作“日常生活”篇和“校园内外”篇中的网页，学习使用“鼠标经过图像”制作导航栏进行站内导航，对锚记链接、水平线、图像热点超链接等编辑网页的常用技巧加以应用，并运用滚动字幕、CSS样式和层布局及美化网页。二、学习目标通过前面2个单元的学习，学生已经具备了一些网站制作和网页设计的基本知识，掌握了一定的网站编辑技能。本单元的内容都是网页制作过程中较为常用的技巧，知识点多而繁杂，因此要在此单元的教学中注重能力的培养，而不是将注意力停留在学生具体学会了哪个命令、那个面板的使用上。知识：使用使用“鼠标经过图像”制作导航栏，插入水平线，制作锚点链接，制作图像热点链接，使用滚动字幕，应用CSS样式和层布局。技能：通过模板创建网页，在网页上应用模板，用多种方法创建相似网页，将网页从模板中分离，正确设置框架网页中的链接目标。在学生的学习过程中，动员学生通过动手实践操作来理解本单元的内容，不妨多采用小组讨论和自学的方式，使学生深入地体会到软件设计的理念及内部联系，从而起到举一反三的积极作用。第3单元编辑网页第四十二页，共100页。

三、重点难点教学重点

1．掌握应用模板创建网页的方法，能够通过鼠标的形状变化分辨可编辑区域和锁定区域。

2．熟悉“资源”面板的使用。

3．能够制作导航按钮实现站内导航。

4．灵活地使用水平线分隔网页元素。

5．学会使用锚记链接、图像热点链接，掌握网页内部、网站内外等跳转。

6．综合利用滚动字幕和APDiv元素（层），增强网页表现力。

7．应用CSS样式表和层美化网页。教学难点

1．套用和分离模板，综合运用多种方式快速生成网页。

2．根据需要正确设置链接对象的目标框架。

3.使用滚动字幕制作动态标题，与APDiv元素（层）的搭配使用。

4.CSS样式表的导入导出应用。四、学时安排本单元共5课，总计5学时，每课占用1学时。

第四十三页，共100页。（一）本课教学目标

1．掌握利用模板创建网页的方法。

2．熟练运用“鼠标经过图像”制作导航栏进行站内导航。

3．理解链接对象的目标框架的含义。（二）教学设计与教学建议

1．课堂引入分析在第2单元中，我们设计了模板和框架，本课主要任务就是应用框架和模板打造风格统一的网页，使它们真正地发挥作用，加快我们制作网页的速度。在教学中，引导学生观察使用常规方法编辑的网页和基于模板创建网页的异同，并对鼠标指针形状的变化引起重视。第7课驾轻就熟第四十四页，共100页。学生在进行探索尝试新知识的时候，经常会出现操作错误，当计算机弹出窗口或对话框对使用者进行提示时，很多学生会下意识地关闭提示信息，忽略掉系统“善意”的“提醒”，缺乏人机交互的意识，这将导致学生完全寄希望于教师或他人的指导，造成自身的时间浪费及教师的分身无术，最终导致课堂效率低下和学生能力发展停滞不前。如要解决上述情况，需要教师针对此种情况进行专门的强化训练，引导学生重视计算机提供的反馈信息，遵循计算机的工作方式，只有如此才能驾驭它，使之顺从地为我们服务。也许我们不能完全避免出现问题，但是能否利用工具灵活快速地解决问题则是衡量现代人信息素养的重要标准。当应用模板创建网页后，制作导航栏成为势在必行的工作。导航栏的重要性众所周知，制作方法也多种多样，本课我们要介绍的是使用动感十足又操作简单的“鼠标经过图像”来充当导航栏按钮。在DreamweaverCS5中我们可以不必使用Flash软件而直接使用多张静态图片来制作具有动态效果的导航按钮。第四十五页，共100页。2．重点内容分析（1）应用模板创建网页应用模板在本课是首次接触，模板设计好后，要利用它来创建网页或将其应用于现有的网页上，才能发挥其减少工作量的作用。应用模板的步骤并不复杂，但是要建立模板也是一种“资源”的理念，才能利用好模板，制作出具有“换肤”效果的网页。在本课的“视野拓展”中，我们介绍了将已经制作好导航栏的“日常生活”页面转为模板的方法，通过这个操作，日常生活篇中的“交通出行”、“生活用电”和“家务劳动”页都可以利用这个新模板来创建，从而直接继承了导航栏按钮、标题等内容，甚至导航栏的链接也都是设置好的，非常方便。图7.1利用module2.dwt创建网页第四十六页，共100页。需要注意的问题是：当我们将应用模板module.dwt创建的页面保存到Templates中时，所有继承元素能够正确的显示，此时拖动页面到rcsh文件下，图像的相对路径会自动改变，因此显示确保正确，但是如果我们直接将用模板创建的页面存入到rcsh文件夹下，则会出现路径错误，找不到图像素材。图7.2利用模板module2.dwt创建的网页未保存时的状态图7.3网页保存到Templates中后，正确显示的页面状态第四十七页，共100页。

（2）“鼠标经过图像”的使用在DreamweaverCS5中，取消了旧版本中提供的Flash按钮功能，如果需要使用的话，也可以打开旧版本的软件进行编辑，提供40余种Flash按钮的样式，我们只需要选择样式，输入按钮显示文本并设置链接就可以使用。

如果我们创建的鼠标经过图像按钮并不用来进行站内导航，仅仅用来装饰或者与Internet中的资源链接，那么将“插入鼠标经过图像”对话框中的“链接”文本框保持空白或输入如格式的URL地址，在浏览器中单击按钮时可以实现超链接跳转。

另外，在此对话框中，还有“替换文本”设置，在这里我们输入文本“交通出行”，一旦制作鼠标经过图像按钮的源图像丢失或者路径不正确，不能正确在浏览器中显示时候，浏览器将会显示出“交通出行”文本来替换按钮。图7.4替换文本在IE中的作用第四十八页，共100页。（三）教学补充

更新模板模板的功能就是把网页布局和内容分离，这样相同布局的网页可以通过模板创建，因此能极大地提高工作效率。当对模板更新后，所有通过模板创建网页和应用此模板的网页都可以随之更新，因此我们就可以利用此功能在短时间内重新设计网站并对大量的网页进行修改。

图7.5“更新模板文件”对话框

具体步骤如下：（1）打开已有的网页模板，进行修改。（2）执行“文件”→“保存”命令保存模板，系统弹出如图7.5所示的“更新模板文件”对话框，提示是否更新。第四十九页，共100页。

（3）单击“更新”按钮，系统弹出如图7.6所示的“更新页面”对话框，在“查看”下拉列表中选择“文件使用”选项，在“更新”项目中确保选中了“模板”复选框。单击“开始”按钮，DreamweaverCS5将按照指示更新文件。如果选中了“显示记录”复选框，系统将提供它试图更新的文件的信息，包括它们是否成功更新的信息。

图7.6“更新页面”对话框第五十页，共100页。（一）本课教学目标

1．灵活地使用水平线分隔网页元素。

2．学会插入命名锚记以创建锚点链接。

3.掌握电子邮件、网页内指定位置、网站内文件、因特网资源等多种超级链接目标的设置方法。（二）教学设计与教学建议

1．课堂引入分析当初步制作“交通出行”网页后，可以看出本页包含的内容很多，不同主题的文字和图片罗列在一起，页面比较长，浏览起来不是很方便，因此我们考虑使用水平线分隔元素，并为页面添加锚点链接，实现网页的局部跳转，快速地将访问者带到特定主题或者网页顶部，使用这种方法，还可以指向不同页面的指定位置。第8课自由穿梭第五十一页，共100页。2．重点内容分析（1）插入水平线水平线对于组织信息很有用。插入水平线，操作比较简单，执行菜单“插入”→HTML→“水平线”命令就可以插入默认属性的水平线，其宽度为100%，自动填满所在的单元格，高度默认为2个像素，呈现灰色，带有阴影。另外，还可以打开“插入”工具栏中的HTML工具栏，单击“水平线”按钮插入水平线，如图8.1所示。在水平线的“属性检查器”面板中，可以设置水平线的宽度、高度、对齐方式、是否带有阴影，应用的CSS样等，如要设置水平线的颜色可使用“快速标签编辑器”按钮或在“拆分”视图中通过添加代码操作。宽和高：以像素为单位或以页面尺寸百分比的形式指定水平线的宽度和高度。

图8.1使用HTML工具栏插入水平线第五十二页，共100页。

对齐：指定水平线的对齐方式（“默认”、“左对齐”、“居中对齐”或“右对齐”）。仅当水平线的宽度小于浏览器窗口的宽度时，该设置才适用。阴影：指定绘制水平线时是否带阴影。取消选择此选项系统将使用纯色绘制水平线。需要注意的是，水平线的有些设置在编辑窗口无法直接看到效果，需要在IE浏览器中预览，例如图8.2所示的为2条不同属性设置的水平线在编辑窗口中的状态和IE浏览器中预览效果的对比。这2条水平线属性如下：宽：100像素高：3像素水平线A：居中对齐，带阴影水平线B：右对齐，无阴影，颜色#ff3300A编辑窗口中的状态

B

IE中的预览效果图8.2非“所见即所得”的水平线第五十三页，共100页。

（2）创建锚记链接在教材中我们将创建锚点链接分为两个步骤：命名锚记和链接锚记。在进行链接锚记的时候，我们采用是在“属性检查器”的“链接”文本框中输入锚记名称的方法，这就要求我们记住各个锚记对应的主题内容才能操作，否则还需要单击相应的锚记名称，通过该锚记的“属性检查器”找到锚记名。其实，在进行链接设置的时候，锚记也可以像文件一样，直接被鼠标选择作为链接目标，其步骤如下：①选择要添加链接的主题文本，如“非机动车交通安全”。②单击“属性检查器”中的“<>HTML按钮”，再单击“链接”文本框后的“指向文件”按钮，直接拖动按钮到页面上，此时将会出现黑色的箭头，我们将此箭头拖动到需要链接的锚记即可，如图8.3所示。

图8.3用“指向文件”链接锚记第五十四页，共100页。（一）本课教学目标

1．理解图像热点超链接的含义。

2.学会绘制各种形状的热区，并为之设置链接目标。

3．将网页与所应用的模板分离，使之成为可以自由编辑的普通网页。（二）教学设计与教学建议

1．课堂引入分析在DreamweaverCS5中，我们可以用多种方式综合使用图像，为网站增添生命力，同时加深浏览者对网站的良好印象。第9课按图索骥第五十五页，共100页。

本课我们继续介绍应用图像的方式：图像热点超链接。同一个图像的不同部分分别制作为热区，单击这些区域，就可以可以链接到不同的链接目标，这就是图像热点超链接。

2．重点内容分析

（1）图像热点超链接在“家务劳动”页面中，我们插入了一张尺寸较大的图像，图像的不同区域代表不同的主题内容，我们要为此图像设置局部图像链接，制作出“一图多链”的效果。在Dreamweaver中，这种被分为多个区域（或称“热区”）的图像就称为“图像地图”。

图9.1图像地图的属性

在图像上绘制热区之后，观察此图像的“属性检查器”，在“地图”文本框中自动出现Map，如图9.1所示。这是系统自动为图像地图分配的名称，我们也可以自己定义图像地图的名称便于记忆。当同一网页中使用多个图像地图时，要确保每个地图都有唯一名称。第五十六页，共100页。

本图像地图包含3个热区，它们链接的目标既有命名锚记，也有新创建的网页，其对应链接关系和目标框架如图9.2所示。

图9.2设置图像地图的属性第五十七页，共100页。（2）网页与模板分离当网页通过执行“修改”→“模板”→“从模板中分离”命令与模板分离之后，网页保留了原来的全部内容，只是把原来模板限定的不可编辑区域转换为可以编辑的区域，网页在编辑区域如图9.3所示的提示将会消失。

图9.3使用的模板提示

（三）教学补充（1）将模板应用于现有文档当网页与模板分离后，还可以重新选择模板加以应用。

操作步骤：（1）打开要应用模板的网页。（2）执行“修改”→“模板”→“应用模板到页”命令，即会出现“选择模板”对话框。如图9.4所示。

图9.4“选择模板”对话框第五十八页，共100页。

（3）从列表中选择一个模板并单击“选定”按钮。如果文档中存在不能自动指定到模板区域的内容，将出现“不一致的区域名称”对话框，如图9.5所示。此对话框用于将文档中的内容指定给模板区域，若要将现有内容指定给新文档中的可编辑区域，请执行以下操作：①在“将内容移动到新区域”弹出式菜单中，执行以下操作之一：■在新模板中选择一个要将现有内容移动到其中的区域。■选择“不在任何地方”可将该内容从文档中删除。②若要将所有未解决的内容移到选定的区域，单击“用于所有内容”按钮。③单击“确定”按钮应用模板，或单击“取消”按钮取消将模板应用到文档的操作。

图9.5“不一致的区域名称”对话框第五十九页，共100页。

（2）图像查看器

在Dreamweaver的旧版本中，能够制作图片自动切换的图像查看器，在制作图像查看器之前，先要准备素材图片，对3种格式图像的支持是最好的，它们是GIF、JPEG和PNG。但是IE浏览器只能部分支持PNG图像的显示，所以我们最好选用GIF和JPEG格式的图像制作图像检查器。我们不仅可以通过执行“插入”→“媒体”→“图像查看器”命令的方法插入图像检查器，还可以直接单击“Flash元素”工具栏中的“图像查看器”按钮，如图9.6所示。图像查看器的制作过程也是制作swf格式的Flash动画文件的过程，我们在“Flash元素”面板中设置的参数直接影响此动画文件的效果。在“窗口”菜单中，我们会发现其实并没有“Flash元素”命令，如果打开“标签检查器”面板，然后在编辑窗口中单击创建好的图像查看器的图标，那么“标签检查器”面板会自动变为“Flash元素”面板，再此设置图像查看器的参数就可以了。图9.6Flash元素工具栏第六十页，共100页。（一）本课教学目标

1．掌握综合运用多种软件制作导航栏的方法。

2.学会使用marquee标签制作滚动字幕。

3.初步掌握使用层来进行布局。（二）教学设计与教学建议

1．课堂引入分析从本课开始制作网站的“校园内外”篇，共包含栏目介绍页面、“体育健身”、“集体活动”、“校内实践”和“野外拓展”5个页面。在标题部分，我们将会学习用滚动字幕来实现动态效果，同时为了更好的控制页面的布局，学习使用层来作为容器精确定位多种对象。第10课左右逢源第六十一页，共100页。

2．重点内容分析（1）综合多种方法制作导航条按钮导航条所需的按钮图像要事先准备好，为了看出导航条按钮的动态效果，我们至少要为每个按钮准备2张图像，用来在弹起状态和鼠标悬停在按钮上时进行切换，制作这些图像，使用Photoshop和AAAlogo等软件搭配是比较好的选择，可以显著降低我们的工作量，并能获得效果较好的图像。如果能够使用Flash来制作按钮，那么网页就能更加精美。另外，因特网上也提供了很多在线工具来帮助我们快捷的完成按钮的设计，只需要选择喜欢的样式并输入需要的文字就能直接输出指定格式的按钮图像了。例如，右图10.1所示就是一个在线的按钮工具。

图10.1按钮工厂页面第六十二页，共100页。（2）使用marquee标签制作滚动字幕

教材中已经详尽的介绍了marquee标签制作滚动字幕的方法，插入marquee标签后，要在“标签检查器”中设置好属性，那么不论是文字还是图像（包括多张）的滚动就不在话下了。

设置好属性后，注意观察代码视图，此时字幕部分的代码如下图10.2所示，对照“标签检查器”中的属性和教材提供的属性列表，我们可以轻松看懂这些代码，它表示字幕将先向右再向左以两个方向滚来滚去，滚动速度是3，滚动停顿时间是1毫秒。标题文字应用的样式是ys02（关于样式的内容我们在下节课集中介绍）。

图10.2设置滚动字幕后的代码视图

图10.3设置图片滚动后的代码视图第六十三页，共100页。（3）使用APDiv元素布局网页

教材中我们使用“布局工具栏中”的“绘制APDiv”工具创建新的绝对定位层元素，另外还有一种比较常用的方法，是通过执行“插入”→“布局对象”→APDiv命令插入层。

（三）教学补充插入日期、时间我们经常在网页上看到最近一次修改网页的时间，这说明网页是在不断更新的，从而吸引访问者再次光顾。Dreamweaver提供了一个方便的日期对象，可以以多种格式插入当前日期。其具体操作步骤如下：

图10.4“插入日期”对话框（1）打开网页，将插入点设置在要插入时间的位置上。（2）执行“插入”→“日期”命令，打开如图10.4所示的“插入日期”对话框。第六十四页，共100页。（3）在此对话框中，分别设置星期格式、日期格式和时间格式，并且注意要选中“储存时自动更新”复选框，这样才会不断更新时间、日期。

（4）切换到代码窗口，可以看出在body标签内，增加了一句代码，它的含义就是按照指定格式显示并更新当前系统日期和时间。

（5）调整日期时间的文字显示格式删除插入的“日期时间”：单击设计窗口中的日期时间显示部分，会发现整个区域一起被选中，而不是普通字符的闪烁插入点状态，此时直接单击键盘上的Delete删除即可，相应的代码窗口内容也会自动删除。

图10.5插入日期时间后的代码窗口第六十五页，共100页。（一）本课教学目标

1．掌握通过属性检查器创建CSS样式的方法

2.理解运用多种方式进行编辑样式、套用样式、导出样式表文件、应用外部样式表的原理及基本方法。

3.了解使用APDiv层和样式表美化网页的方法。（二）教学设计与教学建议

1．课堂引入分析网页内容较多的情况下，分别为各种元素设定样式属性比较麻烦，为了能够快速高效地控制网页样式，我们将在本节课重点介绍CSS样式表的功能和使用方法。第11课最佳搭档第六十六页，共100页。

2．重点内容分析（1）CSS样式表的基本语法

教材中，我们没有对语法多做介绍，仅是按照网页的需求进行了简单的样式表创建和基础编辑，但是了解一些基本语法，对于提高网页编辑水平还是非常必要的。CSS的基本语法由三部分构成：选择器、属性和属性值。

selector{property:value}

下面这行代码的作用是将h1元素内的文字颜色定义为红色，同时将字体大小设置为14像素。在这个例子中，h1是选择器，color和font-size是属性，red和14px是值。

h1{color:red;font-size:14px;}

这就是一条完整的声明，h1代表定义的最大标题。第六十七页，共100页。（2）用菜单命令创建CSS样式表

打开文档设计视图，在需要插入样式的地方，执行“格式”→“CSS样式”→“新建”命令，弹出如图11.1所示的对话框，这与使用属相检查器中单击“目标规则”区域选择“<新CSS规则>”，再单击下方的“编辑规则”按钮后的效果相同。适合已经存在CSS规则后，仍然需要重新建立新规则的情况下采用此方法。

图11.1使用“属性检查器”新建规则的方法第六十八页，共100页。（3）建立标签样式

在教材中，我们使用属性检查器为文本设置CSS规则，当设置“选择器类型”时，我们选中的是“标签（重新定义HTML元素）”，这就是建立标签样式，我们选择“p”标签来定义CSS样式。

在HTML中，标签<p>和</p>代表的是段落的开始和结束，那么定义标签p的CSS样式，就代表本文档中，所有的段落都应该按照编辑后的规则来显示。如果设置HTML的样式，选择器通常将是某个HTML元素，比如p、h1、em、a，甚至可以是html本身：html{color:black;}h1{color:blue;}h2{color:silver;}（4）建立类样式类选择器允许以一种独立于文档元素的方式来指定样式，可以单独使用，也可以与其他元素结合使用。第六十九页，共100页。

图11.2代码窗口中的样式表代码

标签p样式类ys01样式，text-indent设置为30px，代表首行缩进30个像素在教材中，我们通过“CSS样式”面板创建的样式“ys01”，就是一种类选择器样式。

观察下图所示的代码界面，能够清晰地看到目前设置的标签p的样式和类ys01样式。

下面，我们以教材中xynw.html网页中文本应用上述2种样式为实例进行深入分析，感受应用样式的不同之处和各自特点。第七十页，共100页。

图11.3仅仅贴入无格式文本后的情况

图11.4把文本分段后，p标签样式发挥作用后的情况我们将文档用“选择性粘贴”中的“仅文本”选项将文本贴入到页面中，如图11.3所示，可以看出，此时文本保持默认状态，两种样式都没有起作用。我们按照原文段落，将文本输入回车划分为3个段落，此时如图11.4所示，每段文本的代码视图中增加了p标签，瞬间应用了p样式，字体、颜色等都按照p样式定义的方式发生了改变。第七十一页，共100页。

图11.5套用ys01样式后的情况选中3段文本，打开CSS样式面板，右击“ys01”样式，在弹出菜单中执行“套用”命令，此时如图11.5所示，段落实现了首行缩进30个像素，同时在代码窗口中标签p后面增加了“class=ys01”的字样，表示对这个p标签套用ys01样式。

选择器类型除了“标签”和“类”外，还另外有“ID”和“复合内容”，在这里就不多做介绍了，可以建议感兴趣的同学查看网络资源。第七十二页，共100页。

（三）教学补充

设置网页的刷新定义了自动刷新的页面，页面在被访问者经过一段时间的延迟会自动刷新或转到另一个网页。设置网页自动刷新的操作步骤如下：（1）打开要设置自动刷新的网页。（2）执行“插入”→HTML→“文件头标签”→“刷新”命令，打开“刷新”对话框，如图11.6所示。（3）在“延迟”文本框中输入延迟时间，在“操作”区域选择“转到URL”单选按钮，并在其后面的文本框中设置要转到页面的路径和名称即可，既可以是网站内的相对路径，也可以因特网中某个页面。

图11.6“刷新”对话框第七十三页，共100页。

一、单元概述在本单元中，我们将利用交换图像行为制作具有动态效果的导航栏，并应用其他行为和层为网页添加动态效果；学习在网页中添加多媒体内容制作多媒体网页；学习制作表单网页。最后测试整个网站的链接，完成网

人人文库> 全部分类> 专业文献 > 工程机械

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论