项目13 利用模板和库提高网页制作效率.pptVIP

* 项目十三 利用模板和库提高网页制作效率 情 境 设 置 大家在浏览网站时，会发现每一个网站都有自己的风格，同一个站点内的页面样式都会大体相同，因此在开发一个站点时，为了使其页面达到样式一致，就必须每个页面都做一次同样的样式设置，若网站样式改版，那就必须逐个页面修改，很麻烦。但Dreamweaver为我们提供了模板和库这两个工具，有效地解决了这个问题，使用模板和库不但可以使得网页制作效率提高，并且在批量修改网页的样式和内容时更具方便性。 项 目 展 示 用来生成模板的网页效果图（不要求大家做的和样张完全一样，但要尽量模仿） 项 目 展 示 用模板生成的网页效果图 项 目 目 标 能理解模板的作用 能将现有的网页生成模板 能编辑模板 能利用模板生成新的网页 能更新模板 能理解库的作用 能创建库项目 能修改库 项 目 分 析 具体工作任务： 创建一个网站，主题为“天天美食”。 制作一个用来生成模板的网页。 编辑模板。 利用编辑好的模板制作一个页面。 创建一个库项目。 在网页中插入库。 在模板上插入库后更新模板。 实 施 步 骤 步骤一：新建站点并按效果图建立建立网页 步骤二：创建模板 将前面制作的页面另存为模板 实 施 步 骤 步骤三：编辑模板 将需要做调整的位置设置可编辑区域，选择【插入】下拉菜单中的【模板对象】级联菜单中的【可编辑区域】，在弹出的对话框中进行命名，效果如图： 实 施 步 骤 步骤四：利用模板创建网页 选择【文件】下拉菜单中的【新建…】选项， 在弹出的对话框中。切换到【模板】选项卡， 选中模板名称，单击【创建】按钮，即可从模 板新建一个文档，对可编辑区域进行修改，效 果如图所示： 实 施 步 骤 实 施 步 骤 步骤五：同样的方法创建其他页面 步骤六：创建库项目 在每个页面底端添加如图所示的效果，并有热区链 接 。这也就是大家要建立的库项目。 选择【文件】下拉菜单中的【新建…】选项，在弹出的对话框中，选择【基本页】中的【库项目】，然后用前面讲过的方法设计出如图的效果，保存成为库文件。 实 施 步 骤 步骤七：在网页中插入库 单击【资源】面板左侧的最后一个按钮【库】，在如图所示的库面板中 ，选中库文件单击资源库面板下方的【插入】按钮，即可完成操作。 实 施 步 骤 步骤八：修改模板 打开模板文件，在页面下方再插入一个1行1 列的定位表格，然后在这个表格中插入库。 这样只要使用这个模板建立的页面，将跟随 同时变换。效果如图所示。 实 施 步 骤 知 识 链 接 一、【资源】面板 【资源】面板将网页的元素划分为9类，在面 板的左侧垂直排列，从上到下依次排列：图 像 ，颜色，链接，FLASH，Shockwave，影 片，脚本，模板，库。 知 识 链 接 二、创建模板 模板的扩展名是.dwt 。 注意：当创建模板文档并将其命名保存后，系统会自动在站点管理器中出现一个保存模板文件的文件夹，一个名称为“Templates”的文件夹，如果站点中有这个文件夹，那么模板将会自动保存在这个文件夹中。 知 识 链 接 三、创建和删除可编辑区域 创建可编辑区域时，可以将整个表格或单独的表格单元格创建为可编辑区域，但不能将多个表格单元格标记为单个可编辑区域。 将鼠标指针移到要删除的可编辑区域内，选择【修 改】下拉菜单中【模板】级联菜单中的【删除模板 标记】命令，即可删除可编辑区域,也可以在编辑 窗口中单击可编辑区域的名称标签，然后按退格键 或删除键。 知 识 链 接 四、删除文档中使用的模板 打开利用模板创建好的网页文档，选择【修改】下拉菜单中【模板】级联菜单中的【从模板中分离】命令。 五、将模板应用到已存在的文档 打开要套用模板的网页，从资源面板中选中一个模板，单击下面的【应用】按钮，或者选择【修改】下拉菜单中【模板】级联菜单中的【套用模板到页】命令，在弹出的对话框中选择一个模板，单击【选定】按钮。 知 识 链 接 六、创建库项目 库文件的扩展名是.lbi 。 注意：当创建库项目文件并将其命名保存时，系统默认的保存目录是一个名称为“Library”的文件夹，当然也可以根据个人选择保存目录。 知 识 链 接 七、库项目属性面板 可以通过库项目属性面板来设置库项目 的一些属性 。 知 识 拓 展 项目展示 知 识 拓 展 制作要点提示 创建站点，制作主题为“时尚服装商城”的网页 将网页中的【友情链接】这个Flash按钮，设置样式、链