05层叠样式、模板与库.pptVIP

单击模板面板上的“扩展”按钮，在弹出菜单中选择“新建模板”这是在浏览窗口出现一个未命名的模板文件，给模板命名。然后单击“编辑”按钮，打开模板进行编辑。编辑完成后，保存模板，完成模板建立。 2）将普通网页另存为模板 打开一个已经制作完成的网页，删除网页中不需要的部分，保留几个网页共同需要的区域。 选择【文件】|【另存为模板】命令将网页另存为模板。 3）从文件菜单新建模板 　　 选择【文件】|【新建】命令，打开“新建文档”对话框，然后再类别中选择“模板页”，并选取相关的模板类型，直接单击“创建”按钮即可。见下图： 2 定义模板可编辑区域 模板创建好后，要在模板中建立可编辑区，只有在可编辑区里，我们才可以编辑网页内容。可以将网页上任意选中的区域设置为可编辑区域。 在文档窗口中，选中需要设置为可编辑区域的部分，单击常用工具栏的“模板”按钮，在弹出菜单中选择“可编辑区域”项。见下图： 在弹出的“新建可编辑区域”对话框中给该区域命名，然后单击“确定”按钮。新添加的可编辑区域有蓝色标签，标签上是可编辑区域的名称。 如果希望删除可编辑区域，可以将光标置于要删除的可编辑区域内，选择【修改】|【模板】|【删除模板标记】命令，光标所在区域的可编辑区即被删除。 定义可编辑区域的注意问题： 表格布局的模板：可将整个表格或表格的某个单元格定义为可编辑区域，不能同时将多个单元格定义为一个单独的可编辑区域。 层布局的模板：层设置为可编辑区域，可改变层的位置与层中内容；层内容为可编辑区域时，不能改变层位置。 3 创建基于模板的页面 新建一个网页文档，选择【窗口】|【资源】命令，打开“资源”面板，切换到模板子面板，选中一个模板文件，按住鼠标左键直接拖拽到网页文档窗口中。即可将该模板应用到该网页文档中。 5.3 库的应用 DM可以将文档中的任意内容存储为库项目，使它在其它地方被重复使用。 当库项目编辑修改后，所有引用该库项目的网页能自动更新。 1 创建库项目 在文档窗口中选择需要保存为库项目的内容。 选择【窗口】|【资源】命令，打开“资源”面板，单击资源面板“库”分类中右下角的“新建库项目”按钮。 一个新的项目出现在资源面板“库”分类的列表中，预览框中显示预览的效果，还可以给该项目键入新名称。这样，一个库项目就创建好了。 2 插入库项目 将光标放在网页中需要插入库项目的位置，在资源面板“库”分类中选择需要插入的库项目，直接拖动到光标所在位置即可。 3 更改库项目 1）在库面板中修改库项目 选择【窗口】|【资源】命令，打开“资源”面板，切换到库子面板，双击一个库项目，打开库项目的编辑窗口，完成修改后，选择【文件】|【保存】命令，弹出“更新库项目”对话框，询问是否更新网站中使用了该库文件的网页。单击“更新”按钮，将更新网站中使用了该库文件的网页。 2）在网页上修改库项目 在网页中选中已插入的库项目 在库项目的属性面板中，单击“从源文件中分离”按钮（把一个库项目从网页中分离出来后，以后更新库项目时不会对网页上该库项目进行更新） 修改库项目并保存 思考题： 1.什么是CSS,它有何作用？ 2.什么是模板,它有何作用？ 3.什么是库项目,它有何作用？ 随类型不同，名称栏自动调整 设置“行高”需要注意的是，单位应该和文字的单位一致，行高的数值是包括字号数值在内的。例如，文字设置为12pt，如果要创建一倍行距，则行高应该为24pt。 DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个区块 第5章 层叠样式、模板与库 5.1 层叠样式表 5.2 模板的应用 5.3 库的应用 1．CSS的概念 Cascading Style Sheets的缩写，中文译为“层叠样式表”。 术语“层叠”是指对同一个元素或 Web 页面应用多个样式的能力。例如，可以创建一个 CSS 规则来应用颜色，创建另一个规则来应用边距，然后将两者应用于一个页面中的同一文本。 层叠样式表 (CSS) 是一系列格式设置规则，它们控制 Web 页面内容的外观。使用 CSS 设置页面格式时，内容与表现形式是相互分开的。页面内容（HTML 代码）位于自身的 HTML 文件中，而定义代码表现形式的 CSS 规则位于另一个文件（外部样式表）或 HTML 文档的另一部分（通常为 head 部分）中。 优点：CSS 能够同时控制多个文档的格式，当CSS 样式表被修改后，使用该CSS 样式的网页文档格式都将自动更新。 5.1 层叠样式表 2 创建CSS样式 1）菜单【窗口】|【CSS样式】，打开CSS样式面板。 2）单击“CSS样式”面板右下角的“新建CSS规则”按钮，打开“新建CSS规则”对话框。