《Dreamweaver CS5网页设计与制作实例教程》课件_第5章 模板与库.pptxVIP

第5章模板与库

5.1模板

5.1.1创建模板

5.1.2编辑模板

5.1.3使用模板与脱离

5.1.4模板应用

5.2库

小结

5.1模板

用模板可以创建具有统一结构和外观的网站。在需要更改网站的整体外观时，只要对相应的模板文件稍作修改，即可对整个网站进行快速更新。

5.1.1创建模板

创建模板有两种方法：

在Assets面板中按“新建”按纽，创建模板，

修改已有的HTML文档然后存成模板。

模板可以自动保存在站点根目录下的Templates文件夹内。

边讲边操作

5.1.2编辑模板

模板内分为可编辑区及不可编辑区，缺省是不可编辑区。不可编辑区是指引入模板的文档而言；在模板环境下（.dwt）均可编辑。

可编辑区

!--TemplateBeginEditablename=aaa--

可编辑区的内容

!--TemplateEndEditable--

不可编辑区

普通网页的不可编辑区在Dreamweaver代码编辑器中以灰色字体显示，不能被修改，但在其他编辑器（如记事本）中不可编辑区代码是可以修改的。

5.1.2编辑模板

建立可编辑区

做表格，划分区域。

选中一区域－“插入”面板|“常用”选项卡|“可编辑区”按钮

删除可编辑区域

指向可编辑区执行右键菜单“模板”|“删除模板标记”

存盘

可以存成*.htm或*.dwt。

5.1.3使用模板

1．使用模板和脱离模板

使用：从“资源”面板中的“模板”类别中选中要插入的模板，直接拖动到网页中

脱离：如果要修改应用了模板的文档中的不可编辑区域，须将文档和模板分离。菜单命令“修改”|“模板”|“从模板中分离”

更新模板时，已分离的文档不再会随之更新！

5.1.3使用模板

2．用模板更新网站

文档中只有不可编辑的部分才会随模板更新

修改模板并执行菜单命令“文件”|“保存”

5.1.4模板创建和应用实例

【例5-1】制作一个简单的小商品销售网站模板,如图1。并应用该模版制作页面2和3。

【例5-1】详细步骤看教材

5.2库

库项目可以包含文本、表格、图象、Java程序、插件、Active元素；当修改某个库项目后，整个网站包含该库项目的网页均自动更新。

建立库项目：拖入“资源”面板的“库”中（起名）。若用Ctrl＋拖入，则文档中元素仍是文档元素，不是库元素，无指针。

应用库项目：拖出即可。

编辑库项目：双击库中目标对象—编辑库项目—存盘“文件”|“保存”—更新页面窗口。

更新：“修改”|“库”|“更新当前页”或

“修改”|“库”|“更新页面”

库项目“属性”面板：脱离库

5.2.1创建库项目

创建库文件有两种方法：

1.新建库文件

2.将网页内容转化为库文件。

5.2.2插入库项目

上面将网页内容转换为库文件后，对于转换成库文件的内容，网页中已经算是插入了这个库文件，背景显示为淡黄色，并且不可编辑。当然，我们同样可以反复地插入已建立的库项目。

5.2.3网页与库文件脱离

网页中使用了库文件，该部分元素在网页中不能直接被编辑，有时候也需要进行脱离以便单独进行修改。方法是：选中网页中插入的库文件，在其对应的“属性”面板中单击“从源文件中分离”按钮。这样，原来不可编辑的库文件区域也可以进行编辑修改了。

【例5-2】创建库项目并使用库更新页面文件

小结

由于模板文件决定了网页的布局框架，所以可能有时风格一致，但缺乏灵活性和个性。库项目则可以弥补这一不足。将若干网页元素，如图、表格等制作为一个库项目，可以直接插入到正在制作的网页中，这样，一个网站中有多个位置用到相同的元素，节省了时间。在站点的管理下，修改库文件，可以更新使用库项目的网页。