网页设计与制作任务驱动式实用教程06单元6使用模课件.ppt

1、网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢网页设计与制作网页设计与制作任务驱动式教程任务驱动式教程单元单元6 6使用模板和库制作网页使用模板和库制作网页网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢教学环节教学环节【教学导航教学导航 】 1【操作准备操作准备 】 2【引导训练引导训练/引导训练考核评价引导训练考核评价】 3【同步训练同步训练 /同步训练考核评价同步训练考核评价】 4【拓展训练拓展训练 /拓展训练考核评价拓展训练考核评价】5网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【教学导航教学导航】教学目标教学目标（1

2、1）学会将现有的网页生成网页模板）学会将现有的网页生成网页模板（2 2）能正确编辑模板，掌握设置可编辑区域和可选区域的方法）能正确编辑模板，掌握设置可编辑区域和可选区域的方法（3 3）熟悉用模板生成新网页的操作方法，并能对新网页进行编辑加工）熟悉用模板生成新网页的操作方法，并能对新网页进行编辑加工（4 4）能熟练地修改网页模板，并同步更新该模板生成的网页）能熟练地修改网页模板，并同步更新该模板生成的网页（5 5）学会创建库项目，并且能修改库项目，更新包含库项目的网页）学会创建库项目，并且能修改库项目，更新包含库项目的网页（6 6）掌握插入图像占位符的方法）掌握插入图像占位符的方法（7 7）理解

3、模板和库的作用）理解模板和库的作用（8 8）了解）了解CSSCSS样式的简单应用样式的简单应用 本单元重点本单元重点 （1 1）将现有的网页生成网页模板）将现有的网页生成网页模板（2 2）用模板生成新网页，并对新网页进行编辑加工）用模板生成新网页，并对新网页进行编辑加工（3 3）修改网页模板并同步更新该模板生成的网页）修改网页模板并同步更新该模板生成的网页（4 4）创建库项目，并且修改库项目，更新包含库项目的网页）创建库项目，并且修改库项目，更新包含库项目的网页 本单元难点本单元难点 （1 1）用模板生成新网页，并对新网页进行编辑加工）用模板生成新网页，并对新网页进行编辑加工（2 2）修改网页

4、模板并同步更新该模板生成的网页）修改网页模板并同步更新该模板生成的网页 教学方法教学方法 任务驱动法、分组讨论法、四步训练法（操作准备引导训练同步训任务驱动法、分组讨论法、四步训练法（操作准备引导训练同步训练拓展训练）练拓展训练） 课时建议课时建议 2课时（含考核评价）课时（含考核评价） 网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【操作准备操作准备】1 1新建新建1 1个个本地站点本地站点（1 1）创建所需的文件夹，拷贝所需的资源）创建所需的文件夹，拷贝所需的资源（2 2）启动）启动Dreamweaver CS6Dreamweaver CS6（3 3）创建本地站点）创

5、建本地站点2 2制作用制作用来来生成生成网页网页模板的模板的网页网页（1 1）新建）新建1 1个网页个网页（2 2）在网页中插入表格）在网页中插入表格1 1（3 3）在网页中插入表格）在网页中插入表格2 2（4 4）在网页中插入表格）在网页中插入表格3 3保存网页，预览其效果。保存网页，预览其效果。网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【引导训练引导训练】【任务任务6-16-1】使用模板和库制作上海游的网页使用模板和库制作上海游的网页 本单元本单元“引导训练引导训练”的任务卡如表的任务卡如表6-46-4所示。所示。网页设计与制作任务驱动式教程陈承欢网页设计与制作任

6、务驱动式教程陈承欢【引导训练引导训练】（1 1）将网页中的版权信息区域定义为库项目。）将网页中的版权信息区域定义为库项目。（2 2）将现有网页）将现有网页nav_left0601.htmlnav_left0601.html中的景点导航表格转中的景点导航表格转换为库项目。换为库项目。【任务描述任务描述】【任务任务6-1-16-1-1】创建库项目创建库项目 网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【任务实施任务实施】1 1使用使用【新建文新建文档档】对话对话框框创创建建库库（1 1）在）在Dreamweaver CS6Dreamweaver CS6主界面中，选择命令主界

7、面中，选择命令【文件文件】【新建新建】，在弹出的在弹出的【新建文档新建文档】对话框中选择对话框中选择“空白页空白页”“库项目库项目”。然后单。然后单击击【创建创建】按钮，创建按钮，创建1 1个空白网页，个空白网页，（2 2）保存库项目文件）保存库项目文件 单击单击【标准标准】工具栏中的工具栏中的【保存保存】按钮，在弹出的按钮，在弹出的【另存为另存为】对话框对话框中的中的“保存在保存在”列表框中选择列表框中选择“webpage”webpage”，“保存类型保存类型”下拉列表框下拉列表框中选择中选择“库文件库文件( (* *.lbi)”.lbi)”，“文件名文件名”文本框中输入文本框中输入“nav

8、_bottom0601.nav_bottom0601.lbi”lbi”，然后单击，然后单击【保存保存】按钮，保存库项目文件。按钮，保存库项目文件。（3 3）设置页面的边距）设置页面的边距（4 4）在网页中插入表格）在网页中插入表格（5 5）在表格中输入文字）在表格中输入文字 在表格的第在表格的第2 2行单元格中输入以下文字行单元格中输入以下文字“返回首页返回首页 | | 旅游服务旅游服务 | | 联系联系方式方式 | | 旅游调旅游调（6 6）保存库文件，浏览其效果）保存库文件，浏览其效果网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【任务实施任务实施】2 2利用利用现现

9、有有网页内网页内容容转换为库项转换为库项目目（1 1）打开文件夹）打开文件夹“webpage”webpage”中网页文档中网页文档“nav_left0601.html”nav_left0601.html”。（2 2）选中该网页文档中的）选中该网页文档中的2424行行1 1列的景点导航表格。列的景点导航表格。（3 3）在）在Dreamweaver CS6Dreamweaver CS6主界面中，选择命令主界面中，选择命令【修改修改】【库库】【增加对象到库增加对象到库】，将选中的表格转化为库文件。此时会出现，将选中的表格转化为库文件。此时会出现“提示信提示信息息”对话框，在该对话框中单击对话框，在该

10、对话框中单击【确定确定】按钮，库项目的内容随即会出按钮，库项目的内容随即会出现在现在【资源资源】面板中，等待输入新的库文件名称。面板中，等待输入新的库文件名称。在名称框中输入新的库文件名称在名称框中输入新的库文件名称“nav_left0601.lbi”nav_left0601.lbi”，“.lbi”.lbi”为库文件为库文件的扩展名。然后按的扩展名。然后按【EnterEnter】键即可。键即可。（4 4）Dreamweaver CS6Dreamweaver CS6会把库项目文件保存在本地站点根文件夹下的会把库项目文件保存在本地站点根文件夹下的“Library”Library”子文件夹中，如果本

11、地站点没有该文件夹，子文件夹中，如果本地站点没有该文件夹，DreamweaverDreamweaver会会自动创建该文件夹。自动创建该文件夹。网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【引导训练引导训练】（1 1）在网页）在网页0601.html0601.html的表格的表格3-23-2中插入库项目中插入库项目nav_left0nav_left0601.lbi601.lbi。（2 2）在网页）在网页0601.html0601.html的底部插入库项目的底部插入库项目nav_bottom06nav_bottom0601.lbi01.lbi。【任务描述任务描述】【任务任务

12、6-1-26-1-2】在网页中插入库项目在网页中插入库项目 网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【任务实施任务实施】1 1在表格在表格3-23-2中中插插入入库项库项目目nav_left0601nav_left0601（1 1）打开）打开【操作准备操作准备】环节创建的网页文档环节创建的网页文档0601.html0601.html，将光标置于表，将光标置于表格格3-23-2中。中。（2 2）在）在Dreamweaver CS6Dreamweaver CS6主界面，选择命令主界面，选择命令【窗口窗口】【资源资源】，切，切换到换到【资源资源】面板，也可以在面板，也可以

13、在【文件文件】面板中直接单击面板中直接单击“资源资源”选项卡选项卡切换到切换到【资源资源】面板。面板。（3 3）在）在【资源资源】面板中单击左侧的面板中单击左侧的【库库】按钮，显示本站点所有的库按钮，显示本站点所有的库项目文件，选中要插入的库项目项目文件，选中要插入的库项目“nav_left0601”nav_left0601”，单击该面板中左下角，单击该面板中左下角的的【插入插入】按钮，即可插入按钮，即可插入1 1个库项目。个库项目。插入到网页中的库项目背景会显示为淡黄色，同样是不可编辑的。插入到网页中的库项目背景会显示为淡黄色，同样是不可编辑的。2 2在表格在表格3 3的下方的下方插插入入库

14、项库项目目nav_bottom0601nav_bottom0601 将光标置于表格将光标置于表格3 3的右侧，在的右侧，在【资源资源】面板中选中要插入的库项目面板中选中要插入的库项目“nanav_bottom0601”v_bottom0601”，然后单击该面板中左下角的，然后单击该面板中左下角的【插入插入】按钮，即可在表按钮，即可在表格格3 3的下方插入另的下方插入另1 1个库项目。个库项目。 保存网页，预览其效果。保存网页，预览其效果。网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【引导训练引导训练】利用现有网页文档利用现有网页文档“0601.html”0601.htm

15、l”创建网页模板创建网页模板“0601.dwt”0601.dwt”。【任务描述任务描述】【任务任务6-1-36-1-3】创建网页模板创建网页模板 网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【任务实施任务实施】（1 1）在）在Dreamweaver CS6Dreamweaver CS6主窗口中，选择命令主窗口中，选择命令【文件文件】【另存为模另存为模板板】，弹出，弹出【另存模板另存模板】对话框。对话框。（2 2）在）在【另存模板另存模板】对话框中的对话框中的“站点站点”下拉列表框选择模板保存的下拉列表框选择模板保存的站点，本项目选择站点，本项目选择“单元单元6”6”。在

16、。在“现存的模板现存的模板”列表框中显示了当前站列表框中显示了当前站点中的所有模板，由于本站点暂时没有创建模板，所以显示点中的所有模板，由于本站点暂时没有创建模板，所以显示“（没有模（没有模板）板）”。在。在“另存为另存为”文本框中输入模板的名称，这里输入文本框中输入模板的名称，这里输入“0601”0601”。（3 3）设置完毕后，在）设置完毕后，在【另存模板另存模板】对话框中，单击对话框中，单击【保存保存】按钮，弹按钮，弹出出1 1个个 “要更新链接吗要更新链接吗”提示信息对话框。如果在该对话框中单击提示信息对话框。如果在该对话框中单击【是是】按钮。则当前网页会被转换成模板，同时系统将自动在

17、所选择站点的根按钮。则当前网页会被转换成模板，同时系统将自动在所选择站点的根目录下创建目录下创建“Templates”Templates”文件夹，并将创建的模板文件保存在该文件夹文件夹，并将创建的模板文件保存在该文件夹中。中。网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【引导训练引导训练】（1 1）将文字）将文字“北京北京”定义为可编辑区域。定义为可编辑区域。（2 2）将表格）将表格3-33-3中的图像中的图像“002.jpg”002.jpg”定义为可编辑区域。定义为可编辑区域。（3 3）将表格）将表格3-43-4和表格和表格3-53-5定义为可编辑区域。定义为可编辑区

18、域。（4 4）将标签）将标签“background”background”和和“bgcolor”bgcolor”定义为可编辑的标签属性。定义为可编辑的标签属性。（5 5）将表格）将表格1 1定义为不可编辑的可选区域。定义为不可编辑的可选区域。（6 6）将表格）将表格3-13-1中的图像中的图像“001.jpg”001.jpg”定义为可编辑的可选区域。定义为可编辑的可选区域。（7 7）修改可编辑区域和可选区域。）修改可编辑区域和可选区域。【任务描述任务描述】【任务任务6-1-46-1-4】定义与修改可编辑区域和可选区域定义与修改可编辑区域和可选区域 网页设计与制作任务驱动式教程陈承欢网页设计与制

19、作任务驱动式教程陈承欢【任务实施任务实施】1 1打打开网页开网页模板文件模板文件 打开当前站点文件夹打开当前站点文件夹“Templates”Templates”中模板文件中模板文件“0601.dwt”0601.dwt”。2 2定定义义可可编辑区编辑区域域（1 1）将文字定义为可编辑区域）将文字定义为可编辑区域 选中表格选中表格2 2中的文字中的文字“北京北京”，在，在Dreamweaver CS6Dreamweaver CS6主界面，选择命令主界面，选择命令【插入插入】【模板对象模板对象】【可编辑区域可编辑区域】，弹出，弹出【新建可编辑区域新建可编辑区域】对话框。对话框。在在【新建可编辑区域新

20、建可编辑区域】对话框中的对话框中的“名称名称”文本框中输入可编辑区域的名称文本框中输入可编辑区域的名称“E EditRegion1”ditRegion1”。然后单击。然后单击【确定确定】按钮，完成可编辑区域的创建。按钮，完成可编辑区域的创建。（2 2）将图像定义为可编辑区域）将图像定义为可编辑区域 选中表格选中表格3-33-3中的图像中的图像“002.jpg”002.jpg”，单击，单击【插入插入】工具面板工具面板“常用常用”工具中工具中【模板模板】按钮右侧的箭头按钮，在弹出的下拉菜单中单击按钮右侧的箭头按钮，在弹出的下拉菜单中单击【可编辑区域可编辑区域】按钮，按钮，在弹出的在弹出的【新建可编

21、辑区域新建可编辑区域】对话框中的对话框中的“名称名称”文本框中输入第二个可编辑文本框中输入第二个可编辑区域的名称区域的名称“EditRegion2”EditRegion2”。网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【任务实施任务实施】（3 3）将表格定义为可编辑区域）将表格定义为可编辑区域 选中表格选中表格3-43-4，在，在【模板模板】下拉菜单中单击下拉菜单中单击【可编辑区域可编辑区域】按钮，在按钮，在弹出的弹出的【新建可编辑区域新建可编辑区域】对话框中的对话框中的“名称名称”文本框中输入第三个可文本框中输入第三个可编辑区域的名称编辑区域的名称“EditRegio

22、n3”EditRegion3”。 按类似的方法，将表格按类似的方法，将表格3-53-5定义为可编辑区域，且将该可编辑区域命定义为可编辑区域，且将该可编辑区域命名为名为“EditRegion4”EditRegion4”。（4 4）定义可编辑的标签属性）定义可编辑的标签属性 定义可编辑的标签属性定义可编辑的标签属性“background”background” 定义可编辑的标签属性定义可编辑的标签属性“bgcolor”bgcolor”网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【任务实施任务实施】3 3定定义义不可不可编辑编辑的可的可选区选区域域（1 1）选择要设置为不可编

23、辑的可选区域的表格）选择要设置为不可编辑的可选区域的表格1 1。（2 2）在）在Dreamweaver CS6Dreamweaver CS6主界面中，选择命令主界面中，选择命令【插入插入】【模板对象模板对象】【可选区域可选区域】。或者在。或者在【插入插入】工具面板工具面板“常用常用”工具中，单击工具中，单击【模模板板】下拉菜单中的下拉菜单中的【可选区域可选区域】按钮。弹出按钮。弹出【新建可选区域新建可选区域】对话框。对话框。（3 3）在）在【新建可选区域新建可选区域】对话框中对话框中“基本基本”选项卡的选项卡的“名称名称”文本框文本框中输入该可选区域的名称。如果选中中输入该可选区域的名称。如果

24、选中“默认显示默认显示”复选框，则该可选区复选框，则该可选区域在默认情况下将在网页中显示。域在默认情况下将在网页中显示。（4 4）切换到）切换到“基本基本”选项卡，然后单击选项卡，然后单击【确定确定】按钮，即可定义按钮，即可定义1 1个不个不可编辑的可选区域。可编辑的可选区域。 设置完成后，页面中可选区域有蓝色标签，标签上是可选区域的名称设置完成后，页面中可选区域有蓝色标签，标签上是可选区域的名称“If OptionalRegion1”If OptionalRegion1”。网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【任务实施任务实施】4 4定定义义可可编辑编辑的可的

25、可选区选区域域（1 1）选择要设置为可编辑的可选区域的表格）选择要设置为可编辑的可选区域的表格3-13-1中的图像中的图像“001.jpg”001.jpg”。（2 2）在）在Dreamweaver CS6Dreamweaver CS6主界面中，选择命令主界面中，选择命令【插入插入】【模板对象模板对象】【可编辑的可选区域可编辑的可选区域】。或者在。或者在【插入插入】工具面板工具面板“常用常用”选项卡中，单击选项卡中，单击【模板模板】下拉菜单中的下拉菜单中的【可选区域可选区域】按钮。弹出按钮。弹出【新建可选区域新建可选区域】对话框。对话框。（3 3）在）在【新建可选区域新建可选区域】对话框对话框“

26、基本基本”选项卡的选项卡的“名称名称”文本框中输入该可文本框中输入该可编辑的可选区域的名称。如果选中编辑的可选区域的名称。如果选中“默认显示默认显示”复选框，则该可编辑的可选区复选框，则该可编辑的可选区域在默认情况下将在基于模板的网页中显示。域在默认情况下将在基于模板的网页中显示。切换到切换到“高级高级”选项卡，选择现有参数或输入选项卡，选择现有参数或输入1 1个表达式，确定该区域是否可见。个表达式，确定该区域是否可见。（4 4）切换到）切换到“基本基本”选项卡，然后单击选项卡，然后单击【确定确定】按钮，即可定义按钮，即可定义1 1个可编辑的个可编辑的可选区域。可选区域。 设置完成后，页面中可

27、编辑的可选区域有蓝色标签，标签上是可选区域的名设置完成后，页面中可编辑的可选区域有蓝色标签，标签上是可选区域的名称称“If OptionalRegion2”If OptionalRegion2”，由于该区域的内容允许用户修改，也显示，由于该区域的内容允许用户修改，也显示1 1个可编辑个可编辑区域的标签区域的标签“EditRegion5”EditRegion5”。网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【任务实施任务实施】5 5修改可修改可编辑区编辑区域域（1 1）单击网页模板中可编辑区域左上角的标签，如）单击网页模板中可编辑区域左上角的标签，如“EditRegion

28、1”EditRegion1”，选中该可编辑区域。选中该可编辑区域。（2 2）在）在“可编辑区域可编辑区域”【属性属性】面板中输入面板中输入1 1个新的名称，按回车键确个新的名称，按回车键确认。认。6 6、修改可、修改可选区选区域域 可选区域设置完成后，如果需要对可选区域的名称及其他参数进行修可选区域设置完成后，如果需要对可选区域的名称及其他参数进行修改，可以先选中可选区域，然后单击可选区域改，可以先选中可选区域，然后单击可选区域【属性属性】面板中的面板中的【编辑编辑】按钮，弹出对话框，重新修改其名称或设置其参数即可。按钮，弹出对话框，重新修改其名称或设置其参数即可。 保存所创建的模板。保存所创

29、建的模板。网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【引导训练引导训练】（1 1）创建基于网页模板）创建基于网页模板0601.dwt0601.dwt的网页的网页0602.html0602.html。（2 2）修改和更新模板）修改和更新模板0601.dwt0601.dwt的属性。的属性。（3 3）编辑与更新网页）编辑与更新网页0602.html0602.html的内容。的内容。【任务描述任务描述】【任务任务6-1-56-1-5】创建基于网页模板的网页创建基于网页模板的网页 网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【任务实施任务实施】1 1应应

30、用用网页网页模板模板创创建建网页网页文文档档（1 1）在）在Dreamweaver CS6Dreamweaver CS6主界面中，选择命令主界面中，选择命令【文件文件】【新建新建】，弹出弹出【新建文档新建文档】对话框，在对话框，在【新建文档新建文档】对话框中依次单击选择对话框中依次单击选择【模模板中的页板中的页】【单元单元6 6】【06010601】选项。选项。（3 3）单击）单击【创建创建】按钮，这样将基于该模板创建按钮，这样将基于该模板创建1 1个新的网页。个新的网页。（4 4）将新创建的基于此模板的网页保存在站点内文件夹）将新创建的基于此模板的网页保存在站点内文件夹“task06-1”t

31、ask06-1”中，中，命名为命名为“0602.html”0602.html”，然后预览其效果。，然后预览其效果。网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【任务实施任务实施】2 2修改和更新修改和更新网页网页模板模板属属性性（1 1）显示或隐藏可选区域）显示或隐藏可选区域打开或切换到基于模板创建的网页，单击打开或切换到基于模板创建的网页，单击【修改修改】【模板属性模板属性】，弹，弹出出【模板属性模板属性】对话框，该对话框中列出了可选区域的名称和可编辑标对话框，该对话框中列出了可选区域的名称和可编辑标签属性的标签名称。签属性的标签名称。 在在【模板属性模板属性】对话框

32、中，单击选中对话框中，单击选中1 1个可选区域的名称个可选区域的名称“OptionalReOptionalRegion1”gion1”，并选中，并选中“显示显示OptionalRegion1”OptionalRegion1”复选框，单击复选框，单击【确定确定】按钮即按钮即可。可。（2 2）设置可编辑标签属性的属性值）设置可编辑标签属性的属性值 打开打开【模板属性模板属性】对话框，在该对话框中选中可编辑标签属性的名称对话框，在该对话框中选中可编辑标签属性的名称“background”background”，这时，这时【模板属性模板属性】对话框有所变化示。在对话框有所变化示。在“backgroub

33、ackground”nd”文本框中修改背景图像的路径和文件名为文本框中修改背景图像的路径和文件名为“images/bg_image/bg0images/bg_image/bg01.jpg”1.jpg”，然后单击，然后单击【确定确定】按钮即可。按钮即可。网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【任务实施任务实施】3 3编辑与编辑与更新基于更新基于网页网页模板模板创创建的建的网页网页（1 1）在）在【文档文档】工具栏中将网页标题修改为工具栏中将网页标题修改为“畅游上海城畅游上海城”。（2 2）将表格）将表格2 2中的文字中的文字“北京北京”修改为修改为“上海上海”。（3

34、 3）将表格）将表格3-33-3中的图像源文件中的图像源文件“06010601北京游北京游/image/002.jpg”/image/002.jpg”修改为修改为“06020602上海游上海游/image/002.gif”/image/002.gif”。（4 4）在表格）在表格3-43-4及其嵌套表格及其嵌套表格3-4-13-4-13-4-23-4-23-4-33-4-3和和3-4-43-4-4中输入文字和中输入文字和插入图像，文字内容也可以从文本文件插入图像，文字内容也可以从文本文件0602.txt0602.txt中拷贝。根据图像的大小和文字中拷贝。根据图像的大小和文字内容的多少，对嵌套表格

35、进行适当的调整。内容的多少，对嵌套表格进行适当的调整。保存网页保存网页0602.html0602.html。（5 5）将表格）将表格3-53-5中第中第1 1行的文字行的文字“旅游景点导航图旅游景点导航图”修改为修改为“上海旅游景点导上海旅游景点导航图航图”，并且将这些文字的，并且将这些文字的“大小大小”设置为设置为“1818像素像素”，文字颜色设置为，文字颜色设置为“#8#896449”96449”。将第。将第2 2行中的图像占位符修改为上海旅游景点导航地图，其源文件为行中的图像占位符修改为上海旅游景点导航地图，其源文件为“06020602上海游上海游/image/mapshanghai.g

36、if”/image/mapshanghai.gif”，将第，将第2 2行的行的“高高”调整为调整为“365365像像素素”，将图像的，将图像的“高高”也设置为也设置为“365365像素像素”。 保存网页保存网页0602.html0602.html，预览其效果。，预览其效果。网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【引导训练引导训练】对网页模板对网页模板0601.dwt0601.dwt进行必要的修改，然后更新由该模进行必要的修改，然后更新由该模板生成的网页文档板生成的网页文档0602.html0602.html。【任务描述任务描述】【任务任务6-1-66-1-6】修改

37、网页模板并更新网页修改网页模板并更新网页 网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【任务实施任务实施】 对网页模板进行修改后，可以将网页模板的修改应用于所有由该模板生成的对网页模板进行修改后，可以将网页模板的修改应用于所有由该模板生成的网页。网页。（1 1）打开模板文档，对网页模板中的文字、图像或表格进行必要的修改，如将）打开模板文档，对网页模板中的文字、图像或表格进行必要的修改，如将表格表格3-53-5第第2 2行的行的“高高”修改为修改为“300300像素像素”，将表格，将表格3-53-5第第2 2行单元格的图像占行单元格的图像占位符的位符的“高高”修改为修改为

38、“300300像素像素”。（2 2）单击）单击【标准标准】工具栏中的工具栏中的【保存保存】按钮，弹出按钮，弹出【更新模板文件更新模板文件】对话框，对话框，在该对话框中单击在该对话框中单击【更新更新】按钮，系统开始更新模板文件，并且会弹出按钮，系统开始更新模板文件，并且会弹出【更新更新页面页面】对话框。对话框。（3 3）在）在【更新页面更新页面】对话框中选中复选框对话框中选中复选框“显示记录显示记录”，该对话框变成如图，该对话框变成如图6-6-4848所示的形式，在其下方所示的形式，在其下方“状态状态”列表框中显示检查文件数、更新文件数等详列表框中显示检查文件数、更新文件数等详细的更新信息。细的

39、更新信息。（4 4）在）在【更新页面更新页面】对话框中设置相应的参数，在对话框中设置相应的参数，在“查看查看”下拉列表框中如果下拉列表框中如果选择选择“整个站点整个站点”，则要选择需要更新的站点（如，则要选择需要更新的站点（如“单元单元6”6”），然后单击），然后单击【完完成成】按钮，对基于模板创建的网页全部进行更新。按钮，对基于模板创建的网页全部进行更新。（5 5）更新完成后，单击该对话框中的）更新完成后，单击该对话框中的【关闭关闭】按钮，更新页面操作结束。按钮，更新页面操作结束。 保存更新的网页保存更新的网页0602.html0602.html，预览其效果。，预览其效果。网页设计与制作任务

40、驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【引导训练引导训练】对库项目的内容进行必要的修改，然后对插入了该库项目对库项目的内容进行必要的修改，然后对插入了该库项目的网页进行更新。的网页进行更新。【任务描述任务描述】【任务任务6-1-76-1-7】修改库项目并更新网页修改库项目并更新网页 网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【任务实施任务实施】（1 1）选中网页模板）选中网页模板“0601.dwt”0601.dwt”中插入的库文件中插入的库文件“nav_left0601.lbi”nav_left0601.lbi”，在如图在如图6-476-47所示的所示的“

41、库项目库项目”【属性属性】面板中单击面板中单击【打开打开】按钮，打开按钮，打开库项目库项目“nav_left0601.lbi”nav_left0601.lbi”的页面。打开库项目的页面后，可对该库项的页面。打开库项目的页面后，可对该库项目的内容进行必要的修改。目的内容进行必要的修改。（2 2）选择命令）选择命令【文件文件】【保存保存】，这时会弹出如图，这时会弹出如图6-486-48所示的所示的【更更新库项目新库项目】对话框在该对话框中单击对话框在该对话框中单击【更新更新】按钮，将更新本地站点内按钮，将更新本地站点内插入了该库文件的网页，并且会弹出插入了该库文件的网页，并且会弹出【更新页面更新页

42、面】对话框。对话框。（3 3）更新完成后，单击该对话框中的）更新完成后，单击该对话框中的【关闭关闭】按钮，则更新操作结束。按钮，则更新操作结束。（4 4）保存更新的网页，预览其效果。）保存更新的网页，预览其效果。 最后，保存网页最后，保存网页0602.html0602.html，按，按F12F12预览其效果。预览其效果。网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【引导训练考核实战引导训练考核实战】本单元的本单元的“引导训练引导训练”考核评价内容如表考核评价内容如表6-66-6所示。所示。表表6-66-6单元单元6“6“引导训练引导训练”考核评价表考核评价表 网页设计与

43、制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【同步训练同步训练】【任务描述任务描述】【任务任务6-26-2】使用模板和库制作海口游的网页使用模板和库制作海口游的网页 表表6-76-7单元单元6“6“同步训练同步训练”任务卡任务卡 本单元本单元“同同步训练步训练”的任务的任务卡如表卡如表6-76-7所示。所示。网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【同步训练同步训练】【任务描述任务描述】【任务任务6-26-2】使用模板和库制作海口游的网页使用模板和库制作海口游的网页 本单元本单元“同步训练同步训练”所创建网页的浏览效果所创建网页的浏览效果如图如图6-5

44、06-50所示。所示。图图6-50同步训练网页的浏览效果同步训练网页的浏览效果 网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【同步训练考核实战同步训练考核实战】本单元的本单元的“同步训练同步训练 ”考核评价内容如表考核评价内容如表6-96-9所示。所示。表表6-96-9单元单元6“6“同步训练同步训练 ”考核评价表考核评价表 网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【拓展训练拓展训练】【任务描述任务描述】【任务任务6-36-3】使用模板和库制作南京游的网页使用模板和库制作南京游的网页 表表6-106-10单元单元6“6“拓展训练拓展训练”任务

45、卡任务卡 本单元本单元“拓展训练拓展训练”的任务卡如表的任务卡如表6-106-10所所示。示。网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【拓展训练考核实战拓展训练考核实战】本单元的本单元的“拓展训练拓展训练 ”考核评价内容如表考核评价内容如表6-126-12所示。所示。表表6-126-12单元单元6“6“拓展训练拓展训练 ”考核评价表考核评价表 网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢【单元小结单元小结】 本单元主要使用模板和库制作网页，使用模板和库的本单元主要使用模板和库制作网页，使用模板和库的组合可以使网站维护变得很轻松，尤其是在对组合可以使网站维护变得很轻松，尤其是在对1 1个规模较个规模较大的网站进行维护时，就更能体会使用模板的优点。另外，大的网站进行维护时，就更能体会使用模板的优点。另外，通过修改库项目，可以方便地对远程网站进行更新，而不通过修改库项目，可以方便地对远程网站进行更新，而不用将每用将每1 1个网页文件上传到远程网站中。个网页文件上传到远程网站中。网页设计与制作任务驱动式教程陈承欢网页设计与制作任务驱动式教程陈承欢快乐学习、高效学习快乐学习、高效学习谢谢你的阅读v知识就是财富v丰富你的人生