计算机网络与网页制作 Chapter 15 ：使用模块化技术

计算机网络与网页制作Chapter 15：使用模块化技术复旦大学计算机学院肖川 cxiao@fudan.edu.cn

目标 • 添加代码片断 • 使用库重用一些常用项 • 新建和修改页面模板 • 新建和复制模板内可编辑区

效果

1. 代码片断的介绍 代码片断库类似于超级剪贴板 • 代码片断库 • 页面内任何元素(即代码片断)可存储为库元件 • 库是DW软件的一部分，不限于某个站点 • 任何站点都可使用库里的代码片断 • 通过“代码片断”面板管理库元件 • 修改库元件不会影响已经在页面内使用的此元件实例

2. 使用代码片断 代码片断库 • “代码片断”面板 • 添加、编辑代码片断 • 选中代码片断并拖至页面内 • 很多现成的代码片断

示例在面板内选中某个代码片断时，在面板的上半部显示的是当前代码片断的预览（设计或代码）把代码片段拖至页面的特定位置

3. 新建代码片断 从“代码片断”面板直接创建新的代码片断用页面上被选中的页面元素创建代码片断

把phonetips.html的表格做成代码片断 注意，库里的表格没有呈现样式。自动生成“插入代码”的内容。在面板内可以改变代码片断所在文件夹。选中表格，再单击“代码片断”面板右下角的“新建代码片断”图标

在main.html中使用新建的代码片断 库里的代码片断并不包含CSS代码，此表格之所以有样式，是因为main.html引用了外部样式文件。在页面内定位光标，再双击面板内的代码片断。

修改面板里的代码不会影响页面上已经使用的代码片断修改面板里的代码不会影响页面上已经使用的代码片断

4. 库和库项 库是Dreamweaver的另一种模块化技术，每个站点有自己的库(即站点内Library文件夹)，站点之间不能共享库。可以把任何页面元素放入库成为库项。每个库项单独地保存为一个文件，后缀名为.lbi。 (library item) 添加至网页的库项称为实例。库项与其多个实例始终保持关联，修改库项会自动更新该库项的所有实例。通过面板资源>>库进行管理。

新建库项 Div呈现高亮黄色，表明它是库项的一个实例。选中页面元素，面板资源>>库>>新建库项。

插入库项 演示：分别在phonetips.html 和recommend.html 页面内插入 GNav库项 1) 把库项拖至页面内 2) 定位光标，在“资源”面板内选中库项，再单击“插入”按钮。若库项是AP Div则无需定位光标。

修改库项 打开库项，不包含样式 1) 在“资源”面板内双击库项 2) 在页面内选中库项的一个实例，之后在“属性”面板单击“打开”按钮来编辑库项

添加超链接 了解更新时是否发生错误保存时弹出“更新库项目”对话框，决定是否要把库项的改动反映到该库项的实例

库项对应的全部实例自动更新 注意导航超链接路径的自动变化，因此库项对超链接导航尤其有用。

把被链接的网页移到新文件夹 • 新建文件夹GlobalNavigation • 把login.html拖至新文件夹后，自动弹出“更新文件”对话框。列出了由于login.html的移动而受到影响的页面——这些页面包含指向login.html的超链接。

解除某个实例与库项的关联 在页面内选中库项实例，之后在“属性”面板单击“从源文件中分离”按钮。分离后库项的更改不会影响到这个实例。

删除库项 在“资源”面板内选中库项，再单击底部的“删除”图标。在面板内删除库项将自动删除Library文件夹下对应的lbi文件。删除库项不会影响页面中已有的该库项实例。

5. 模板的介绍 Dreamweaver的模板是用于创建其他网页的母版。当你创建一个模板时，你需要指定页面内只读区域和可编辑区域。用模板创建的网页继承了模板的全部元素，你可以修改网页的可编辑区使之包含特有的内容和元素。与库项相同，当你修改一个模板后，所有基于此模板的网页会自动更新以反映模板的改动。每个站点有自己的模板库(即站点内Templates文件夹)，站点之间不能共享模板。可以把任何页面转成模板。每个模板单独地保存为一个文件，后缀名为.dwt。 (dreamweaver template) 通过面板资源>>模板进行管理。

新建模板 模板文件将保存于Templates文件夹内，故文件中链接的相对路径需要更新。分别从category.html和phone_detail.html创建模板。先把GNav库项添加至phone_detail.html，这一步不是创建模板所必需的。打开页面文件，菜单文件>>另存为模板。

设置模板的可编辑区 插入三个可编辑区域。用此模板创建的网页只有这三个区域是可修改内容的。在“文件”面板双击模板文件或者在“资源”面板双击模板均可打开模板。选中模板内页面元素，菜单插入>>模板对象>>可编辑区域，再输入区域名称。

用模板新建网页 1) 在“资源”面板选中模板，再从右键快捷菜单选择“从模板新建” 2) 菜单文件>>新建>>模板中的页，再从模板列表选中模板，之后单击“创建”按钮。

保存网页 表示这个网页与模板phone_detail关联。如此形状的光标表示不可编辑。这是可编辑区域

2个实例 phone1.html phone2.html

修改模板 打开模板phone_detail，菜单插入>>模板对象>>可编辑区域。

插入重复区域 用模板创建网页时，你可以多次添加或重复模板的“重复区域”来显示信息。一个重复区域并非自动就是可编辑的，因此，为了在网页中可以添加或编辑重复区域的内容，你需要在重复区域内设置可编辑区域。

往category模板插入重复区域 打开模板，选中表格，再菜单插入>>模板对象>>重复区域，

在重复区域内插入可编辑区域 一个模板内区域名称不能重复。在模板内选中页面元素，菜单插入>>模板对象>>可编辑区域，则所选内容位于可编辑区域内。

在网页中编辑重复区域 表示这个网页是用模板category创建的。用于添加、删除或者上下移动重复区域。用category模板新建网页category_phone.html。在新建的网页中通过单击“+”按钮把重复区域Phones增加一次。

修改页面的可编辑区域

调整重复项的上下位置 上下移动光标所在重复区域

把网页从模板中分离 打开网页，菜单修改>>模板>>从模板中分离。分离之后，就可以修改一个基于模板的网页中可编辑区域之外的内容；同时，你对原始模板所做的任何改变不再会更新这个网页。

小结 • 代码片断 • “代码片断”面板 • 库项 • “资源”面板>>库 • 模板 • “资源”面板>>模板

计算机网络与网页制作 Chapter 15 ：使用模块化技术