《网页设计与制作任务驱动教程全套配套课件第3版陈承欢电子资源080102任务8-1】使用模板和库制作上海游的网页（2）》由会员分享，可在线阅读，更多相关《网页设计与制作任务驱动教程全套配套课件第3版陈承欢电子资源080102任务8-1】使用模板和库制作上海游的网页（2）（44页珍藏版）》请在金锄头文库上搜索。
1、网页设计与制作任务驱动教程 （第3版）,2,单元8 使用模板和库制作网页,【任务8-1】使用模板和库制作上海游的网页,3,【任务描述】,【任务8-1-3】创建网页模板,利用现有网页文档“0801.html”创建网页模板“0801.dwt”。,4,【任务实施】,利用图8-6所示的网页文档“0801.html”创建网页模板，如果该网页文档已被关闭，则应先打开该网页文档。 （1）在Dreamweaver CC主窗口中，选择命令【文件】【另存为模板】，弹出【另存模板】对话框。,5,（2）在【另存模板】对话框中的“站点”下拉列表框选择模板保存的站点，本项目选择“单元8”。在“现存的模板”列表框中显示了当
2、前站点中的所有模板，由于本站点暂时没有创建模板，所以显示“（没有模板）”。在“另存为”文本框中输入模板的名称，这里输入“0801”。,6,（3）设置完毕后，在【另存模板】对话框中，单击【保存】按钮，弹出一个如图8-8所示的“要更新链接吗”提示信息对话框。如果在该对话框中单击【是】按钮。则当前网页会被转换成模板，同时系统将自动在所选择站点的根目录下创建“Templates”文件夹，并将创建的模板文件保存在该文件夹中。,7,图8-8 “要更新链接吗”提示信息对话框,8,【任务描述】,【任务8-1-4】定义与修改可编辑区域 和可选区域,（1）将文字“北京”定义为可编辑区域。 （2）将表格3-3中的图
3、像“002.jpg”定义为可编辑区域。 （3）将表格3-4和表格3-5定义为可编辑区域。,9,（4）将标签“background”和“bgcolor”定义为可编辑的标签属性。 （5）将表格1定义为不可编辑的可选区域。 （6）将表格3-1中的图像“001.jpg”定义为可编辑的可选区域。 （7）修改可编辑区域和可选区域。,10,【任务实施】,1打开网页模板文件 打开当前站点文件夹“Templates”中模板文件“0801.dwt”。 2定义可编辑区域 （1）将文字定义为可编辑区域 选中表格2中的文字“北京”，在Dreamweaver CC主界面，选择命令【插入】【模板】【可编辑区域】，弹出【新建
4、可编辑区域】对话框。,11,在【新建可编辑区域】对话框中的“名称”文本框中输入可编辑区域的名称“EditRegion1”，如图8-11所示。然后单击【确定】按钮，完成可编辑区域的创建。,图8-11 【新建可编辑区域】对话框,可编辑区域创建完成后，该页面中的可编辑区域有蓝色标签，标签上有可编辑区域的名称。,12,（2）将图像定义为可编辑区域 选中表格3-3中的图像“002.jpg”，在【插入】面板中选择【模板】工具类型，然后在【模板】工具面板中单击选择【可编辑区域】按钮，在弹出的【新建可编辑区域】对话框中的“名称”文本框中输入第2个可编辑区域的名称“EditRegion2”。,13,（3）将表格
5、定义为可编辑区域 选中表格3-4，在如图8-12所示的【模板】工具面板中单击选择【可编辑区域】按钮，在弹出的【新建可编辑区域】对话框中的“名称”文本框中输入第3个可编辑区域的名称“EditRegion3”。 按类似的方法，将表格3-5定义为可编辑区域，且将该可编辑区域命名为“EditRegion4”。,14,（4）定义可编辑的标签属性 对于基于模板的网页，如果需要修改某些页面元素的属性，如背景图像、背景颜色等，则可以在创建模板时将这些属性定义为可编辑标签属性。,15, 定义可编辑的标签属性“background” 选择想要设置可编辑标签属性的表格3中第1列的单元格。 在Dreamweaver
6、CC主界面中，选择命令【修改】【模板】【令属性可编辑】。此时弹出【可编辑标签属性】对话框。 在【可编辑标签属性】对话框的“属性”下拉列表框中选择“BACKGROUND”。,16,如果需要设置的标签没有出现在下拉列表框，可以单击列表框右侧的【添加】按钮，弹出一个“添加属性标签”的【Dreamweaver】对话框，在该对话框中添加一个新的可编辑标签名称，例如“background”，如图8-14所示。,图8-14 “添加新的可编辑标签”对话框,17,单击【确定】按钮返回【可编辑标签属性】对话框，然后在该对话框单击选中“令属性可编辑”复选框，在“标签”文本框中输入该属性的标签“background”
7、，在“类型”下拉列表框中选择“URL”，即链接地址，在“默认”文本框设置该属性的默认值为“images/bg_image/bg01.jpg”，如图8-15所示。,图8-15 在【可编辑标签属性】对话框设置“background”为可编辑属性,18,设置完成后，单击【可编辑标签属性】对话框中的【确定】按钮，将表格3第1列单元格的“背景图像”设置为可编辑的标签属性。 页面元素的标签属性background设置完成后，表格3第1个单元格的标签中会出现如下属性设置：background=“(background)“。,19, 定义可编辑的标签属性“bgcolor” 选择想要设置可编辑标签属性的表格3中
8、第2列的单元格。 在Dreamweaver CC主界面的【修改】菜单中，选择命令【模板】【令属性可编辑】，此时弹出【可编辑标签属性】对话框。 在【可编辑标签属性】对话框的“属性”下拉列表框中选择“BGCOLOR”。,20,然后在此对话框单击选中“令属性可编辑”复选框，在“标签”文本框中输入该属性的标签“bgcolor”，在“类型”下拉列表框中选择“颜色”，即链接地址，在“默认”文本框输入该属性的默认值“#F6E0AE”，如图8-16所示。,图8-16 在【可编辑标签属性】对话框设置“bgcolor”为可编辑属性,21,设置完成后，单击【可编辑标签属性】对话框中的【确定】按钮，将表格3第2列单元
9、格的“背景颜色”设置为可编辑的标签属性。 页面元素的标签属性bgcolor设置完成后，表格3第2列单元格的【属性】面板中的“背景颜色”文本框中会出现“(bgcolor)”参数。表格3的第2列单元格标签中会出现如下属性设置：bgcolor=“(bgcolor)“。,22,按照类似的方法，将表格3的第4列单元格的“背景颜色”设置为可编辑标签属性。设置过程会弹出提示信息对话框，在该对话框中单击【是】即可。,23,3定义不可编辑的可选区域 对于基于模板创建的网页，如果有些区域想限制为不可编辑的区域，同时根据事先设置的条件控制该区域显示或隐藏，就可以设置不可编辑的可选区域。 （1）选择要设置为不可编辑的
10、可选区域的表格1。,24,（2）在Dreamweaver CC主界面中，选择命令【插入】【模板】【可选区域】。或者在【插入】面板【模板】工具面板中选择【可选区域】按钮。弹出【新建可选区域】对话框，如图8-19所示。,图8-19 【新建可选区域】对话框的“基本”选项卡,25,（3）在【新建可选区域】对话框中【基本】选项卡的“名称”文本框中输入该可选区域的名称。如果选中“默认显示”复选框，则该可选区域在默认情况下将在网页中显示。 切换到如图8-20所示的【高级】选项卡，在该对话框中选择现有参数或输入1个表达式，以确定该区域是否可见。,图8-20 【新建可选区域】对话框“高级”选项卡,26,（4）切
11、换到“基本”选项卡，然后单击【确定】按钮，即可定义1个不可编辑的可选区域。 设置完成后，页面中可选区域有蓝色标签，标签上是可选区域的名称“If OptionalRegion1”。,27,4定义可编辑的可选区域 （1）选择要设置为可编辑的可选区域的表格3-1中的图像“001.jpg”。 （2）在Dreamweaver CC主界面中，选择命令【插入】【模板】【可编辑的可选区域】。或者在【插入】工具面板“常用”选项卡中，单击【模板】下拉菜单中的【可选区域】按钮，弹出【新建可选区域】对话框。,28,（3）在【新建可选区域】对话框“基本”选项卡的“名称”文本框中输入该可编辑的可选区域的名称“Option
12、alRegion2”。如果选中“默认显示”复选框，则该可编辑的可选区域在默认情况下将在基于模板的网页中显示。 切换到“高级”选项卡，选择现有参数或输入1个表达式，确定该区域是否可见。,29,（4）切换到“基本”选项卡，然后单击【确定】按钮，即可定义1个可编辑的可选区域。 设置完成后，页面中可编辑的可选区域有蓝色标签，标签上是可选区域的名称“If OptionalRegion2”，由于该区域的内容允许用户修改，也显示1个可编辑区域的标签“EditRegion5”，如图8-22所示。,图8-22 网页中可编辑的可选区域的标记,30,5修改可编辑区域 （1）单击网页模板中可编辑区域左上角的标签，如“
13、EditRegion1”，选中该可编辑区域。 （2）在“可编辑区域”【属性】面板中输入1个新的名称，按回车键确认。 如果想要删除可编辑区域，先单击可编辑区域的标签，选中要删除的可编辑区域，然后选择命令【修改】【模板】【删除模板标记】，被选中的可编辑区域即可被删除。,31,6、修改可选区域 可选区域设置完成后，如果需要对可选区域的名称及其他参数进行修改，可以先选中可选区域，然后单击如图8-25所示的可选区域【属性】面板中的【编辑】按钮，弹出如图8-21所示的对话框，重新修改其名称或设置其参数即可。,图8-25 “可选区域”的【属性】面板,32,取消可选区域与取消可编辑区域的方法相同。 保存所创建
14、的模板0801.dwt。,33,【任务描述】,【任务8-1-5】创建基于网页模板的网页,（1）创建基于网页模板0801.dwt的网页0802.html。 （2）修改和更新模板0801.dwt的属性。 （3）编辑与更新网页0802.html的内容。,34,【任务实施】,1应用网页模板创建网页文档 （1）在Dreamweaver CC主界面中，选择命令【文件】【新建】，弹出【新建文档】对话框，在【新建文档】对话框中依次单击选择【网站模板】【单元8】【0801】选项，如图8-26所示。,35,图8-26 【新建文档】对话框中选择“模板中的页”,36,（3）单击【创建】按钮，这样将基于该模板创建1个新
15、的网页。 （4）将新创建的基于此模板的网页保存在站点内文件夹“task08-1”中，命名为“0802.html”，然后预览其效果。,37,2修改和更新网页模板属性 （1）显示或隐藏可选区域 打开或切换到基于模板创建的网页“0802.html”中，在Dreamweaver CC主窗口的【修改】菜单中选择【模板属性】命令。 弹出【模板属性】对话框，该对话框中列出了可选区域的名称和可编辑标签属性的标签名称。 在【模板属性】对话框中，单击选中1个可选区域的名称“OptionalRegion1”，并选中“显示OptionalRegion1”复选框，单击【确定】按钮即可。,38,（2）设置可编辑标签属性的
16、属性值 打开如图8-28所示的【模板属性】对话框，在该对话框中选中可编辑标签属性的名称“background”，这时【模板属性】对话框有所变化，如图8-29所示。在“background”文本框中修改背景图像的路径和文件名为“images/bg_image/bg01.jpg”，然后单击【确定】按钮即可。,图8-29 在【模板属性】对话框中修改背景图像标签属性,39,在如图8-28所示的【模板属性】对话框中选中可编辑标签属性的名称“bgcolor”，这时【模板属性】对话框有所变化，如图8-30所示。在“bgcolor”文本框中输入背景颜色值，然后单击【确定】按钮即可。,图8-30 在【模板属性】对话框中修改背景颜色标签属性,40,3编辑与更新基于网页模板创建的网页 （1）在【文档】工具栏中将网页标题修改为“畅游上海城”。 （2）将表格2中的文字“北京”修改为“上海”。 （3）将表格3-3中的图像源文件“0801北京游/image/002.jpg”修改为“0802上海游/image/002.g
