1

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

复旦大学计算机学院

肖川cxiao@fudan.edu.cn

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

2

3

效果

4

1. 代码片断的介绍 代码片断库

页面内任何元素 ( 即代码片断 ) 可存储为库元件

库是 DW 软件的一部分，不限于某个站点 任何站点都可使用库里的代码片断 通过“代码片断”面板管理库元件 修改库元件不会影响已经在页面内使用的此元

件实例

代码片断库类似于超级剪贴板

5

2. 使用代码片断 “ 代码片断”面板

添加、编辑代码片断 选中代码片断并拖至页面内 很多现成的代码片断

代码片断库

6

示例 在面板内选中某个代码片断时，在面板的上半部显示的是

当前代码片断的预览（设计或代码） 把代码片段拖至页面的特定位置

7

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

8

把 phonetips.html 的表格做成代码片断

选中表格，再单击“代码片断”面板右下角的“新建代码片断”图标

自动生成“插入代码”的内容。

在面板内可以改变代码片断所在文件夹。

注意，库里的表格没有呈现样式。

9

在 main.html 中使用新建的代码片断

在页面内定位光标，再双击面板内的代码片断。

库里的代码片断并不包含 CSS代码，此表格之所以有样式，是因为main.html 引用了外部样式文件。

10

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

11

4. 库和库项 库是 Dreamweaver 的另一种模块化技术，每个站点有

自己的库 ( 即站点内 Library 文件夹 ) ，站点之间不能共享库。

可以把任何页面元素放入库成为库项。每个库项单独地保存为一个文件，后缀名为 .lbi 。 (library item)

添加至网页的库项称为实例。 库项与其多个实例始终保持关联，修改库项会自动更新该

库项的所有实例。 通过面板 资源 >> 库 进行管理。

12

新建库项 选中页面元素，面板 资源 >> 库 >> 新建

库项。

Div 呈现高亮黄色，表明它是库项的一个实例。

13

插入库项 1) 把库项拖至页面内 2) 定位光标，在“资源”面板内选中库项，再单

击“插入”按钮。若库项是 AP Div 则无需定位光标。

演示：分别在phonetips.html 和recommend.html 页面内插入 GNav 库项

14

修改库项 1) 在“资源”面板内双击库项 2) 在页面内选中库项的一个实例，之后在

“属性”面板单击“打开”按钮来编辑库项

打开库项，不包含样式

15

添加超链接

保存时弹出“更新库项目”对话框，决定是否要把库项的改动反映到该库项的实例

了解更新时是否发生错误

16

库项对应的全部实例自动更新

注意导航超链接路径的自动变化，因此库项对超链接导航尤其有用。

17

把被链接的网页移到新文件夹 新建文件夹

GlobalNavigation

把 login.html 拖至新文件夹后，自动弹出“更新文件”对话框。

列出了由于 login.html的移动而受到影响的页面——这些页面包含指向 login.html 的超链接。

18

解除某个实例与库项的关联 在页面内选中库项实例，之后在“属性”

面板单击“从源文件中分离”按钮。分离后库项的更改不会影响到这个实例。

19

删除库项 在“资源”面板内选中库项，再单击底部

的“删除”图标。 在面板内删除库项将自动删除 Library 文

件夹下对应的 lbi 文件。 删除库项不会影响页面中已有的该库项实

例。

20

5. 模板的介绍 Dreamweaver 的模板是用于创建其他网页的母版。当你

创建一个模板时，你需要指定页面内只读区域和可编辑区域。

用模板创建的网页继承了模板的全部元素，你可以修改网页的可编辑区使之包含特有的内容和元素。

与库项相同，当你修改一个模板后，所有基于此模板的网页会自动更新以反映模板的改动。

每个站点有自己的模板库 ( 即站点内 Templates 文件夹 ) ，站点之间不能共享模板。

可以把任何页面转成模板。每个模板单独地保存为一个文件，后缀名为 .dwt 。 (dreamweaver template)

通过面板 资源 >> 模板 进行管理。

21

新建模板 分 别 从 category.html 和 phone_detail.html

创建模板。 先把 GNav 库项添加至 phone_detail.html ，

这一步不是创建模板所必需的。 打开页面文件，菜单 文件 >> 另存为模板。模板文件将保存于

Templates 文件夹内，故文件中链接的相对路径需要更新。

22

设置模板的可编辑区 在“文件”面板双击模板文件或者在“资源”面板双击模

板均可打开模板。 选中模板内页面元素，菜单 插入 >> 模板对象 >> 可编

辑区域，再输入区域名称。

插入三个可编辑区域。用此模板创建的网页只有这三个区域是可修改内容的。

23

用模板新建网页 1) 在“资源”面板选中模板，再从右键快捷菜单选择

“从模板新建” 2) 菜单 文件 >> 新建 >> 模板中的页，再从模板列表选

中模板，之后单击“创建”按钮。

24

保存网页如此形状的光标表示不可编辑。

这是可编辑区域

表示这个网页与模板phone_detail 关联。

25

2 个实例

phone1.html

phone2.html

26

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

27

插入重复区域 用模板创建网页时，你可以多次添加或重

复模板的“重复区域”来显示信息。 一个重复区域并非自动就是可编辑的，因

此，为了在网页中可以添加或编辑重复区域的内容，你需要在重复区域内设置可编辑区域。

28

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

>> 重复区域，

29

在重复区域内插入可编辑区域 在模板内选中页面元素，菜单 插入 >> 模板对象 >> 可

编辑区域，则所选内容位于可编辑区域内。

一个模板内区域名称不能重复。

30

在网页中编辑重复区域 用 category 模板新建网页 category_phone.html 。在

新建的网页中通过单击“ +” 按钮把重复区域 Phones增加一次。

表示这个网页是用模板 category创建的。

用于添加、删除或者上下移动重复区域。

31

修改页面的可编辑区域

32

调整重复项的上下位置

上下移动光标所在重复区域

33

把网页从模板中分离 打开网页，菜单 修改 >> 模板 >> 从模板中分离。 分离之后，就可以修改一个基于模板的网页中可

编辑区域之外的内容；同时，你对原始模板所做的任何改变不再会更新这个网页。

34

小结 代码片断

“ 代码片断”面板 库项

“ 资源”面板 >> 库 模板

“ 资源”面板 >> 模板