《网页设计与制作教程与实训》全套PPT电子课件教案-第七章 模板和库.ppt

第7章模板和库 7 1创建模板7 2编辑模板7 3应用模板7 4更新模板7 5库7 6综合实训 模板的创建 编辑和更新库的创建 编辑和更新 本章要点 7 1创建模板 网页模板实际上是一种文档 是用来作为创建其它网页文档的基础文档 我们在创建一个模板时 可以指定页面的哪些内容可以长期保存 不可编辑 哪些内容可以进行编辑修改 假如我们要编一份在线的杂志 报头应该是不变的 而标题和内容要时时更新 我们就可以把每日要更新的内容设为可编辑区 允许编辑 而把报头 栏目标题 版权信息等设为锁定区 不允许编辑 这样做可以大大提高效率 意味着我们可以摆脱不停地做一件事的痛苦了 而且可以使整个网页保持相对一致的风格 便于给浏览者留下好的映像 因此 我们在设计网页时 最好是使用模板来设计 应用模板创建和更新网页的基本流程是 创建模板 编辑模板 使用模板设计网页 最后通过修改模板来更新网页 在dreamweavermx2004里面创建模板十分容易 我们可以从空白的htmlll文档开始创建模板 也可以把现有的htmlll文档保存为模板 然后通过修改 使它符合要求 下面我们来看一看具体的方法 1 创建一个新的空白模板 我们选择主菜单中的 文件 新建 在 新建文档 对话框中选择 模板页 选项 打开一个模板文件 如图1所示 2 把现有的网页文档保存为模板 我们可以将一个网页文档选择 文件 另存为模板 然后在弹出的 另存模板 的对话框中选择站点 输入模板名称 如图2所示 最后单击 保存 模板文件就被保存在指定的站点的templates文件夹中 如图3所示 3 使用资源面板创建模板我们选择 窗口 模板 打开 资源 面板 如图4所示 然后单击下方的按钮 进入模板中 再打开按钮 新建一个模板页 在面板中为模板命名 如图5 在我们把模板建立好以后 在 网站 的管理器中会出现一个保存模板文件的目录 templates 里面会出现建好的模板 如图6所示 我们在保存模板时 如果此模板中没有定义任何可编辑的区域 那么dreamweaver会提醒我们模板不包含任何可编辑区域 此时 可以保存模板 它的后缀名为 dwt 但是我们不能修改基于这个模板创建的网页 我们在模板建好后 在它里面创建的都是不可编辑区域 如图7所示 7 2编辑模板 刚才我们创建元素都是不可编辑的 下面我们对模板创建可编辑区域 1 创建可编辑区域一个模板文档分为两个部分 可编辑区域和锁定区域 锁定区是用模板创建的网页中相对保持不变的区域 而可编辑区是网页中变化的部分 因此 利用模板创建的网页上 我们只能修改网页文档中的可编辑区 锁定区域是不能被修改的 这就省去了许多重复的工作 同时也可以防止随意编辑导致网页风格的不一样 设定可编辑区域 需要我们在制作模板的时候完成 当新创建一个模板或是把已有的文档保存为模板时 dreamweaver把所有的区域标记为锁定 因此我们必须把一些部分设定为可编辑区 有两种方法可以设定可编辑区域 1 1 把模板中已有的内容定义为可编辑区域 1 打开模板文件 在文档中选择要设定为可编辑区域的内容 2 选择 插入 模板对象 可编辑区域 命令 3 为新建的可编辑区域命名 2 在模板中定义新的可编辑区域 1 1 在模板中把光标置于想插入可编辑区的位置 2 选择 插入 模板对象 可编辑区域 命令 在 新建可编辑区域 对话框中输入名称 具体操作 打开刚才做好的 moban dwt 文件 1 在模板中把光标移到 姓名 左面的单元格里 单击 工具栏 里的 模板面板里 的按钮 在 新建可编辑区域里 为它命名 如图8所示 将其它的单元格定义为可编辑区域并命名 如图9 这时候我们可以看到 在可编辑区域上有蓝色的标签 标签上是可编辑区域的名称 表示当前区域为可编辑区域 当然 我们也可以删除可编辑区域 首先将光标置于要删除的区域里 然后选择 修改 模板 删除模板标记 光标所在的可编辑区域即被删除 如图10所示 我们在创建了可编辑区域后 在可编辑区域里面可以插入文本 图片 表格等对象 对象的编辑和正常的网页没有任何区别 2 创建可选区域在dreamweavermx2004里我们可以利用定义模板可选区这一个功能来设置一个区域在利用模板生成的文档中是否被显示 我们可以根据它来设定是否将一个区域显示给浏览者观看 定义模板可选区域的具体操作如下 1 在模板文档中 将光标置于要设置为可选区的位置 2 执行 插入 模板对象 可选区域 将弹出一个新建可选区域的对话框 如图11 图12所示 我们在名称对话框中为它命名 若选中 默认显示 对话框 则可以在默认情况下显示此区 单击 高级 选项卡 弹出对话框如图13所示 单击 使用参数 然后单击其右侧的下拉按钮 从弹出的下拉列表中选择参数的设置区域是否可见 1 单击 输入表达式 单选框 然后在其下方的文本框中输入表达式来设置区域显示与否 2 设置完以后 单击 确认 来完成设置 如图14所示 我们需要注意的是 可选区不是可编辑区 它仍然是锁定区 我们可以将可选区域设置为不可编辑区 3 创建重复区域重复区域是指在文档中重复出现的区域 它主要应用于动态网页中 我们在制作网页时经常用到重复区域 例如将文章标题排列在网页上 它下面用到的表格我们可以用重复区域来做 它包含的内容的数量是经常变换的 这样可以节约时间 提高效率 我们需要注意的是 重复区域不是可编辑区域 因此我们在插入重复区域后 还要插入可编辑区域 11 插入重复区域 1 将插入点放入文档中想要插入重复区域的地方 2 选择 插入 模板对象 重复区域 3 在 名称 文本框中为模板区域输入唯一的名称 不能对一个模板中的多个重复区域使用相同的名称 4 单击 确定 重复区域被插入到模板中如图15所示 我们在网页最下面插入一个表格 先将其定义为重复区域 然后单击重复区域上方的名称 将其选定后插入模板面板中的可编辑区域按钮 在出现的对话框中为其命名为 相关链接 这样 重复表格就做好了 我们可以在里面对其内容多次添加 效果如图16所示 此外 对一个已经创建好的模板 我们可以在文档窗口的下拉菜单中选择 窗口 资源 命令 打开 资源 面板 从中选择创建好了的模板 单击底部的按钮 即可打开它对它进行编辑 或者我们直接在 资源 面板里双击需要编辑的模板 也可对它进行修改 7 3应用模板 有了模板 我们就可以高效 快速的设计出风格一致的网页 在需要的时候 也可以通过修改模板来自动更新使用模板创建的网页 使网页的维护变得非常轻松 下面我们再来学习一下如何用模板来创建新的网页和应用模板于已存在的网页里 应用模板创建新的网页有两种操作方法 1 1 直接从模板中创建网页选择 文件 从模板新建 在弹出的对话框中选择一个模板就可以了 如图17所示 新建好以后 我们就可以打开文档 对它的可编辑区进行编辑了 如图18所示 2 使用新网页后再应用模板选择 文件 新建一个网页文档 然后在 资源 面板的模板中选定将要使用的模板 点击 应用 就可以把此模板应用到新建的文档中去 当然 我们也可以对已经存在的网页使用模板 具体操作如下 11 打开要应用模板的网页 22 选择 修改 模板 应用到模板 在弹出的模板中选择一个模板到网页里面 于是我们就可以在网页里对其进行编辑了 当然了 我们只能对其的可编辑区域进行操作 我们在应用模板时 为了满足网页需要 可以对模板的页面属性作设定 但是不能对文档的页面属性作修改 操作如下 1 选择 修改 页面属性 打开 页面属性 对话框以后 就可以对其作设定了 如图19所示 3 设定好以后 按 确定 按钮就可以把其运用于模板里了 除此之外 我们还可以定义模板的可编辑区和锁定区的高亮显示 操作如下 1 选择 编辑 首选参数 然后在弹出的对话框中选择 标记色彩 如图20所示 在这里 我们可以对模板里的一些参数 比如 可编辑区域 锁定的区域 以及 嵌套可编辑 区域的显示色彩作设置 首先单击它 然后在弹出的拾色器中选择一种颜色作为高亮显示色 其它区域照此操作 1 2 选中 显示 使其颜色能够在文档窗口中显示出来 2 3 单击 确定 按钮应用它 使用了这些高亮色以后 可以很轻松的让自己和使用其模板的人辨认出可编辑区域和锁定区域来 不过有时候我们需要对模板的不可编辑区域进行编辑 如添加网页的样式或者改变网页的外观等 这时我们就必须将模板生成的网页脱离原来的模板 具体的方法如下 1 打开由模板生成的网页 2 选择 修改 模板 从模板中分离 这时由模板生成的网页即脱离模板 成为普通意义上的网页 我们就可以按照一般网页的操作方法对其进行修改了 7 4更新模板 我们在创建一个网站时 如果网站里面的所有网页都是基于一个或者是几个模板创建的 那么我们的维护工作就会变得很简单 高效 这也是为什么我们要使用模板来创建网站的一个重要原因 用模板来更新整个网站或是一个网站里面的几个页面 可以通过修改模板 然后对它更新来实现 修改模板及更新的具体操作如下 1 打开 资源 面板 在 模板 菜单里选择要修改的模板 双击即可以对它进行操作了 2 在文档窗口编辑模板 如把 标题栏 里的 link 改为 新闻 体育 等链接 如图21所示 3 修改以后 选择 文件 保存 对修改的模板文件进行保存 这时会弹一个对话框 询问是否更新当前编辑模板创建的网页文件 对话框中列出的是使用本模板创建的所有网页文件 如图22所示 4 单击 更新 按钮 对网页中使用本模板的页面内容进行更新 并给出更新报告 如图23所示 5 我们浏览相关的网页 会发现其已经被更新了 我们需要注意的是 这种方法只能更新当前站点中的网页 对于其它站点里的网我们是无能为力的 如果要更新指定站点中应用的模板 可以采用下面的方法 1 选择 修改 模板 更新页面 这时会出现一个对话框 如图24所示 2 在 查看 中选择 整个站点 从相邻的下拉菜单中选择需要更新的站点名称 3 在选择好以后 单击 开始 这时dreamweaver将会搜索指定的站点 并对点中用该模板创建的网页进行更新 并给出更新报告 7 5库 库是一种特殊的dreamweaver文件 其中包含已经创建好了以便放在网页上的单独的资源或资源拷贝的集合 库文件夹由dreamweaver在站点的根目录中自动创建 库中可以存放各种各样的页面元素 比如图像 文本 表格 层 声音或是flash影片 我们一般把存入库中的元素叫做库项目或库元素 库项目是可以在多个页面里重复使用的存储页面元素 每当我们更改一个库项目的内容的时候 都可以更新所有使用该项目的页面 这一点上库和模板很相似 如果我们想让页面具有相同的标题和脚注 却有不同的页面布局 就应该使用库项目来保存标题和脚注 在使用库项目的时候 dreamweaver不是向网页中插入库项目 而是向库里插入一个链接 以后我们如果需要更改库项目 则自动更新已经插入该项目的页面更新库的实例 这样可以使得我们的工作变得高效而且简单 1 创建库项目在网页中 凡是位于 之间的htmlll元素都可以作为库项目 包含文本 图像 表格等 创建库项目有两种方法 新建库项目和将网页内容转换为库项目1 1 在网页中新建库项目 1 选择 窗口 资源 然后单击按钮 就可以进入库面板 如图25所示 这时我们看到在库面板里还没有库项目存在 它是一个空白的面板 在面板下方有4个按钮 分别是刷新站点列表 新建库项目 编辑和删除 2 单击新建库项目按钮 然后输入库名称即可 如图26所示 2 将现有的文档保存为库项目 1 在网页文档中选中要保存为库项目的内容 比如图片 如图27所示 2 单击库面板中的新建库项目按钮 3 输入库项目名称即可 如图28所示 此外 直接拖动选中的内容到库面板里也可以把它存贮为库项目 我们可以看到 库项目建好以后 它的后缀名为 lbi 同时保存在站点下一个单独的文件夹里 文件夹名称为library 以后便可以随时使用了 非常方便 2 编辑库项目我们新建了一个库项目以后 就可以通过编辑它来实现多网页的更新 编辑库项目的具体操作如下 1 选择 窗口 资源 打开 资源 面板 2 1 在 资源 面板里选择库项目 然后再单击面板下方的 编辑 按钮 或者双击库项目 如图29所示 这时会出项一个新的窗口 在里面我们可以对库项目进行编辑 3 编辑库项目 如图30所示 4 在编辑完成以后 我们再选择 文件 保存 保存修改后的库项目 5 编辑保存以后 我们选择 修改 库 更新页面 这时会弹出一个更新页面的对话框 如图31所示 我们选择更新 库 然后从下拉菜单中选择一个站点 更新上面的文档 最后在 查看 中选择 文件使用 在下拉菜单中选择一个库项目 更新指定的文档内容 如图32所示 选好以后 单击 开始 dreamweaver会自动更新文档 并将编辑过的库项目保存在相关的文档里 3 在文档中插入库项目在网页中添加库项目有如下几种方法 1 在库面板里 选择要添加到网页文档中的库项目 然后单击 插入 即可 2 直接拖动库项目到网页中 需要我们注意的是 如果想在文档中插入库项目的内容而不包含对该项目的引用则在从 库 里向外拖动库项目时按住 ctrl 键 用这种方法插入库项目 可以在文档中编辑该项目 但是当更新使用该库项目的时候 文档不会随之改变 当然了 我们不但可以在网页中添加库项目 还可以删除库项目 操作如下 1 在库面板的列表中 选中要删除的库项目 2 按删除键或者按delete键进行删除 3 确认删除操作 如图33所示 我们在使用库的时候有几点需要注意 1 添加到网页中的库项目是不能被编辑的 如确实对它编辑 必须先将文档中库项目与库中的库项目分离 分离以后我们就可以对它进行编辑了 但是被分离修改后的库项目将不能随着库项目的更新而更新了 2 库项目里不能包含时间轴和样式表 因此如果我们使用这些元素的话会出现错误 3 不能随便移动库文件夹library 否则会导致库项目的错误 下面我们再来看一看库的参数设置 首先选择 编辑 首选参数 在对话框中选择 标记色彩 在里面我们可以对库项目选取高亮色 此外 还需要把 显示 勾上 最后点 确定 对作设置作保存并退出 如图34所示 7 6综合实训 网页制作不仅是一种艺术上的创造 还是一种工业化的生产 我们制作网页 不仅要页面精美 还要提高制作效率 因此利用dreamweaver里的高效建网站工具模板 可以实现在网页里的对页面的风格保持一致 这样网页看起来很和谐并且统一 冬夏换壳1 特色说明我们在制作网页的时候 利用dremweavermx2004里模板的功能 可以制作同样格调的网页页面 并且能够迅速的改换网页的内容 对它进行更新 2 操作步骤7 6 1制作空模板首先我们制作一个空模板 具体步骤如下 1 打开dreamweavermx2004 新建一个文档 并命名为 index html 2 选择 修改 页面属性 对页面外观作设置 设置标题为 冬夏换壳 背景颜色为 ffff99 点 确定 保存此设置 3 回到设计视图里 在第一行插入一个1 1的表格 居中 并在里面写入文字 四季如歌 设置字体大小为 24 字体颜色为 ff0000 居中 如图35所示 4 1 在第二行再插入一个1 4表格 居中 在其中输入文字 春节如花 夏季如画 秋季如诗 冬季如歌 居中排列 如图36所示 5 在第三中插入1 1表格 居中排列 在里面输入文字如下 有的人喜欢春天 因为它让人振奋 有的人喜欢夏天 因为它给人热情 有的人喜欢秋天 因为它给人丰收 还有的人喜欢冬天 因为它给人以希望 那么 亲爱的朋友 你最喜爱哪一季呢 如图37所示 7 6 2为模板制作冬夏网页1 创建模板 选择 插入 模板对象 创建模板 将当前页创建为模板 如图38所示 在弹出的 另存模板 对话框中 将模板命名为 template 如图39所示 我们可以在 资源 面板里看到新建的模板 如图40所示 2 插入可编辑区 上面做好的模板由于没有可编辑区 因此不能编辑 首先我们要创建可编辑区 才能对它内容作改变 将光标插入表格下方 选择 插入 模板对象 可编辑区域 在弹出的对话框里 输入 editregion1 为它命名 完后单击 确定 如图41所示 我们可以看到可编辑区域在模板中由高亮显示的矩形边框围绕 3 制作冬夏不同的网页效果 选择 文件 新建 html 新建一个html文档 取名为 xia 同样的 再新建一个html文档 命名为 dong 4 选中 xia 在 资源 面板里选中刚才创建的模板 template 点击 应用 把它应用到网页里面 这时我们可以看到 在不可编辑区域里 光标变成了一个带一横杠的圆圈 我们在可编辑区域里面输入文字如下 只有当秋风渐起的时候 我们才能再次回味夏天的美丽 在我的记忆里 故乡拂晓的那层薄膜 是出土的蝉在脱壳时顶破的 当白杨树和老柳树在 知了 的奏鸣曲里摇曳时 我的摇篮也晃动了 当然 还有满树满树的米色女贞花 那诱人的清香 使