网页设计与制作 第6章模 版.ppt

《网页设计与制作 第6章模 版.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作 第6章模 版.ppt（20页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第六章第六章 模模 版版6.1创建模板6.2创建模板可编辑区域6.3创建模板重复区域6.4创建模板中可选区域6.5嵌套模板6.6模板的应用2023/1/36.1创建模板创建模板6.1.1 使用已有页面创建模板6.1.2 使用菜单命令创建模板6.1.3 使用模板子面板创建模板2023/1/36.1.1 使用已有页面创建模板使用已有页面创建模板应用已有的页面可以将其另存为模板，这是最常用的创建模板的方法，具体的步骤如下：（1）打开一个已完成的网页；（2）删除页面中与其他页面有变化的区域，留下相同的区域；（3）选择菜单命令【文件】另存为模板】，弹出【另存为模板】对话框；（4）单击【保存】按钮，在站点

2、文件下会自动产生一个新的文件夹templates，模板index.dwt保存在该文件夹下。2023/1/36.1.2 使用菜单命令创建模板使用菜单命令创建模板选择菜单命令【文件 新建】，在【类别】列表框中选择【模板页】，在右侧的【模板页】列表框中选择相应的模板类型，单击【创建】按钮，即可创建一个新的空白模板。2023/1/36.1.3 使用模板子面板创建模板使用模板子面板创建模板（1）使用快捷键F11，或者选择菜单命令【窗口资源】，打开【资源】面板；（2）单击左侧的【模板】按钮，在下方的空白处右击，在弹出的菜单中选择【新建模板】选项，可以创建一个新模板；（3）给创建的模版重命名以便于记忆，此处

3、命名为new.dwt。2023/1/36.2创建模板可编辑区域创建模板可编辑区域创建模版后，就要划分模版中的可编辑区域，具体步骤如下：（1）在文件列表中双击刚才建立的模版index.dwt；（2）选中文档中的可编辑区域；（3）选择菜单命令【插入模版对象可编辑区域】，弹出【新建可编辑区域】对话框；（4）在【名称】文本框中输入可编辑区域的名称；（5）单击【确定】按钮，在当前模版中创建名为“EditRegion3”的可编辑区域；（6）同上图，可编辑区域由虚线包围，并显示可编辑区域的名称；（7）选中可编辑区域，切换至代码视图，可以看到可编辑区域的起始标记代码；（8）用同样的方法，将模版index.dw

4、t最右侧表格内的单元格也创建为可编辑区域；2023/1/36.2创建模板可编辑区域创建模板可编辑区域（9）保存模版，关闭当前页面；（10）选择菜单命令【文件新建从模版中新建】，选择刚才创建模版中的站点，选中刚创建的模版名称；（11）单击【创建】按钮，则有刚才创建的模版创建了一个新的页面；（12）选中【可编辑单元】中的第一个表格，将其删除，只留下【最新动态】这个表格；（13）选中【右侧可编辑区域】中的所有内容，将其删除，输入新的内容，并进行修饰；（14）保存刚建立的页面，命名为index.htm；（15）切换至代码视图，查看代码，发现代码中不可编辑的代码均为灰色，即使将光标移至灰色代码中，也不能

5、进行修改、删除等操作。2023/1/36.3创建模板重复区域创建模板重复区域l6.3.1 创建重复区域l6.3.2 创建重复表格2023/1/36.3.1 创建重复区域创建重复区域（1）打开上节创建好的模版index.dwt，另存为table.dwt。（2）选中【右侧可编辑区域】，将其删除，在此处建立模版重复区域。（3）在刚删除的单元格中，建立如图6-13所示的内容。（4）从图6-13可以看到该表格中的第1行，第3行，第5行、第7行都是重复的，如果网站中有许多这样的页面，在更新当前行的内容时就得必须对每一个页面进行操作，此时用模版的重复区域就可以轻松解决问题。（5）选中重复的行，然后选择菜单命

6、令【插入模板对象重复区域】，弹出如图6-14所示的对话框。（6）在文本框中输入“重复区域1”，单击【确定】按钮，则在模板中创建了重复区域，如图6-15所示。2023/1/36.3.2 创建重复表格创建重复表格（1）插入一个1行1列的表格。（2）选择菜单命令【插入模板对象重复表格】，弹出【插入重复表格】对话框，在对话框中设置各参数属性，如图6-16所示。（3）单击【确定】按钮，在文档中成功插入一个重复表格，效果如图6-17所示。（4）选择菜单【文件】保存】，弹出【另存为模板】的对话框，设置模板的名称和描述，即可保存新建的模板。2023/1/36.4创建模板中可选区域创建模板中可选区域使用模板创建

7、的可选区域有2种类型：（1）可选区域：用户可以自己设定是否显示标注的区域，在这个区域内，用户无法编辑该区域的内容。（2）可编辑的可选区域：用户可以自己设定是否显示标注的区域，在这个区域内，用户可以编辑该区域的内容。6.4.1 创建可选区域6.4.2创建可编辑的可选区域2023/1/36.4.1 创建可选区域创建可选区域（1）打开要创建可选区域的文件，选择要设置为可选区域的元素。（2）选择菜单命令【插入模板对象可选区域】，或者在工具栏中选择【模板】类别，单击【可选区域】按钮，如图6-18所示。（3）弹出【新建可选区域】对话框，设置名称为“可选区域”，如图6-19所示。（4）单击【高级】选项卡，进

8、入新建可选区域的高级选项，设置该可选区域是否可见，如图6-20所示。（5）单击【确定】按钮，在文档中创建一个可选区域，如图6-21所示。（6）回到文档视图，选中可选区域，在【属性】面板中单击“编辑”按钮，可以修改可选区域的名称以及条件，如图6-22所示。（7）单击【保存】按钮，该文档将会自动保存为模板。2023/1/36.4.2创建可编辑的可选区域创建可编辑的可选区域（1）将光标定位在要插入可选区域的位置。（2）选择菜单命令【插入模板对象可编辑可选区域】，或单击【常用】工具栏中的【选择可编辑可选区域】按钮，弹出【新建可选区域】对话框，设置【基本】和高级两个选项卡中的参数，如图6-23和6-24

9、所示。（3）单击【确定】按钮，在文档中插入一个新建的可编辑可选区域，如图6-25所示。2023/1/36.5嵌套模板嵌套模板l6.5.1 创建嵌套模板l6.5.2 防止可编辑区域传递2023/1/36.5.1 创建嵌套模板创建嵌套模板（1）选择【资源】面板中的【模板】类别，然后选择一个已创建的模板，在此选择index_o.dwt。（2）右击在弹出的快捷方式中选择【从模板中创建】选项。（3）此时文档窗口就打开了一个名为“Untitle-1”的HTML文档，在文档的左侧窗口出现“模板：index_o”的黄色标记，标识该模板是从模板index_o.dwt中创建的，如图6-26所示。（4）在【常用】工

10、具栏中单击【插入嵌套模板】按钮，或者选择菜单命令【插入模板对象】创建嵌套模板】，如图6-27所示。（5）弹出【另存为模板】对话框，设置对话框中的“描述”和“另存为”两个参数，如图6-28所示。2023/1/36.5.2 防止可编辑区域传递防止可编辑区域传递有时会根据需要防止可编辑区域传递到嵌套模板，按下面的步骤操作即可：（1）打开基模板文件，切换到代码视图，找到需要阻止传递的可编辑区域。（2）使用标记（“”）环绕可编辑区域即可。2023/1/36.6模板的应用模板的应用l6.6.1 应用模板l6.6.2 模板分离2023/1/36.6.1 应用模板应用模板（1）选择菜单命令【文件新建从模板新建

11、】，在模板中选择之前做好的模板index_o，选中如图6-29所示对话框右下角的【当模板改变时更新页面】复选框；（2）单击【创建】按钮，创建了一个应用index_o.dwt模板的网页；（3）对该文档内的可编辑区域进行编辑，编辑后的页面如图6-30所示；（4）保存文档为produnct.htm；2023/1/36.6.1 应用模板应用模板（5）打开index_o.dwt模板在导航里制作链接，保存模板时，会弹出【更新链接文件】对话框，如图6-31所示；（6）单击【更新】按钮，应用index_o.dwt模板创建的所有文件将会自动更新，更新完成弹出【更新页面】对话框，如图6-32所示；（7）选中对话框

12、中的【显示记录】复选框，可以查看更新的详细记录，如图6-33所示；（8）单击【关闭】按钮，完成页面更新。2023/1/36.6.2 模板分离模板分离应用模板创建的网页，有时需要在某个网页中针对不可编辑区域进行编辑，这时需要将当前页面脱离原来的模板，具体的操作步骤如下：（1）打开已创建好的一个网页Lnews.html，如图6-34所示，在页面的右上角显示该页为基于模板index_o.dwt所创建的页面。（2）选择菜单命令【修改模板从模板中分离】，如图6-35所示。此时页面成为一个独立的页面，当模板index_o.dwt更新时该页面不会发生同步更新，因而当模板修改保存后，更新文件的列表中也不会显示Lnews.html。2023/1/3