模板库以及其它网ppt课件

《模板库以及其它网ppt课件》由会员分享，可在线阅读，更多相关《模板库以及其它网ppt课件（37页珍藏版）》请在金锄头文库上搜索。

1、第11章 模板、库以及其它网页制作技术,Dreamweaver 支持模板和库 模板用于控制大的设计区域,以及重复使用完整的布局。 库项目用于个别设计元素，如站点的版权信息或徽标。,模板,模板创作者在模板中设计“固定的”页面布局。然后创作者在模板中创建可在基于该模板的文档中进行编辑的区域 模板使用者只能对模板中可编辑区域进行修改 模板最强大的用途之一在于一次更新多个页面，便于开发和维护大量网页,模板区域的类型,共有四种类型的模板区域： 可编辑区域 是基于模板的文档中的未锁定区域；它是模板用户可以编辑的部分 要让模板生效，应该至少包含一个可编辑区域 重复区域 是文档中设置为重复的布局部分 例如，可

2、以设置重复一个表格行。通常重复部分是可编辑的，这样模板用户可以编辑重复元素中的内容，同时使设计本身处于模板创作者的控制之下 可选区域 可编辑标签属性,模 板,任务,准备站点和项目文件 创建模板 按需要进行修改 创建可编辑区域 应用模板 修改&更新模板,模 板,准备站点和项目文件,如前几章所述，确保已经建立cafe_townsend站点 并在Dreamweaver中打开了此站点,模 板,创建模板,打开index.html文件，该文件是已经制作好的首页，其中包括设置格式的cafe_townsend.css文件 选择菜单“插入” “模板对象” “创建模板” 或 在“插入”栏的“常用”类别中，单击“模

3、板”按钮上的箭头，然后选择“创建模板”。 出现“另存为模板”对话框,模 板,创建模板,将模板名字改为model（或任何你想取的名字） 然后单击“保存” 在随后出现的对话框中单击“是”，要更新链接，Dreamweaver会自动创建一个Templates文件夹，将新创建的模板存放其下，文件名为model.dwt，并自动将原链接更新。,模 板,按需要进行修改,因为需要在其它网页中保留第一个表格、第二个表格左侧单元格和第三个表格的内容，所以将第二个表格第2、3单元格的内容清除,并将这两个单元格合并 将第一表格第二行删除,模 板,创建可编辑区域-content,将鼠标指针放在第二个表格合并后的单元格内

4、选择菜单“插入” “模板对象” “可编辑区域” 或 在“插入”栏的“常用”类别中，单击“模板”按钮上的箭头，然后选择“可编辑区域”。 出现“新建可编辑区域”对话框 对新建的可编辑区域输入一个名称，如content 则在鼠标所在位置插入一可编辑区域,模 板,创建可编辑区域-nav_link,选中第一个表格第2个单元格(原第3个单元格)，将其中插入的图片删除，并将该图片设置成该单元格的背景图 将鼠标指针放在这个单元格内 选择菜单“插入” “模板对象” “可编辑区域” 出现“新建可编辑区域”对话框 将第二个可编辑区域命名为nav_link,模 板,应用模板,现在基于model模板为Cuisine栏目

5、新建一个网页 新建一个空白的HTML网页，保存在网站根下，文件名为cuisine.html 在“文件”面板组窗口中点击 “资源”标签，或按F11键， 打开“资源”面板 单击左侧的“模板”按钮 就在“资源”面板窗口中 显示为该网站创建的所有模板 将model.dwt拖至左侧的 cuisine.html网页中,模 板,应用模板,可以看到只有定义为可编辑区域的content和nav_link可以编辑，其余部份均不可更改 类似的，可以分别利用模板为其它菜单创建网页,模 板,修改&更新模板,可对模板进行修改 修改后的模板会应用到采用该模板的页面中,模 板,库,随着 Web 站点开发的进行，积累的资源会越

6、来越多。在某些情况下，可能在多个站点上使用同一资源，或者可能在所有站点上使用一组特别喜欢的资源。 使用 Macromedia Dreamweaver 8 来管理站点资源，可以轻松地跟踪和预览已存储在站点中的多种资源，如图像、影片、颜色、脚本和链接。也可以将某种资源直接拖至当前文档以将其插入到某一页中。,创建库项目,可以从文档 body 部分中的任意元素创建库项目，这些元素包括文本、表格、表单、Java applet、插件、ActiveX 元素、导航条和图像。 对于链接项（如图像），库只存储对该项的引用。原始文件必须保留在指定的位置，才能使库项目正确工作。 尽管如此，在库项目中存储图像还是很有用

7、的；例如，可以在库项目中存储一个完整的 img 标签，它将使你可以方便地在整个站点中更改图像的 alt 文本，甚至更改它的 src 属性。（,库,创建库项目,若要基于选定内容创建库项目，请执行以下操作： 在“文档”窗口中，选择文档的一部分并另存为库项目。 执行下列操作之一： 将选定内容拖到“资源”面板的“库”类别中。 在“资源”面板中，单击“资源”面板的“库”类别底部的“新建库项目”按钮。 选择“修改”“库”“增加对象到库”。 为新的库项目键入一个名称，然后按 Enter 键 Dreamweaver 在站点本地根文件夹的 Library 文件夹中，将每个库项目都保存为一个单独的文件（文件扩展名

8、为 .lbi）。,库,在文档中插入库项目,当向页面添加库项目时，将把实际内容以及对该库项目的引用一起插入到文档中。 将插入点放在“文档”窗口中。 在“资源”面板（“窗口”“资源”）中，选择面板左侧的“库”类别。 将一个库项目从“资源”面板拖动到“文档”窗口中。 若要在文档中插入库项目的内容而不包括对该项目的引用，请在从“资源”面板向外拖动该项目时按 Ctrl 键 用这种方法插入项目，则可以在文档中编辑该项目，但当更新使用该库项目的页面时，文档不会随之更新。 另一种方法是选择一个库项目，然后单击面板底部的“插入”按钮。,库,编辑库项目,当编辑库项目时，可以更新使用该项目的所有文档。如果选择不更新

9、，那么文档将保持与库项目的关联；可以在以后更新它们。 若要编辑库项目，请执行以下操作： 在“资源”面板中，选择面板左侧的“库”类别。 选择库项目。,库,编辑库项目,执行下列操作之一： 单击面板底部的“编辑”按钮。 双击库项目。 Dreamweaver 将打开一个用于编辑该库项目的新窗口。此窗口非常类似于“文档”窗口，但它的“设计”视图的背景为灰色，表示正在编辑库项目而不是文档。,库,编辑库项目,编辑库项目然后保存更改。 在出现的对话框中，选择是否更新本地站点上那些使用编辑过的库项目的文档： 选择“更新”将更新本地站点中所有包含编辑过的库项目的文档。 选择“不更新”将不更改任何文档，直到使用“修

10、改”“库”“更新当前页”或“更新页面”才进行更改。,库,编辑库项目,若要更新整个站点或所有使用特定库项目的文档，请执行以下操作： 选择“修改”“库”“更新页面”。 在“查看”弹出式菜单中执行下列操作之一： 选择“整个站点”，然后从相邻的弹出式菜单中选择站点名称。 这会更新所选站点中的所有页面，使其使用所有库项目的当前版本。 选择“文件使用”，然后从相邻的弹出菜单中选择库项目名称。 这会更新当前站点中所有使用所选库项目的页面。 请确保在“更新”选项中选择了“库项目”。 单击“开始”。,库,其它网页制作技术,锚链接 滚动文字或图像 导航条 鼠标经过图像 跳转菜单 图像热点 图像提示（替代）文本 背

11、景音乐,锚链接,链接到HTML文档本身的某个指定位置 方法 定义锚点：单击“常用”插入栏上的“命名锚记”按钮 在弹出对话框中输入锚记名称，如chp1 定义指向这个锚点的链接 #chp1 (#加上锚记名称，表示指向相应锚点),其它网页制作技术,滚动文字或图像（1/3）,使用标识可以形成滚动效果 这种移动不仅仅局限于文字，也可以应用于图片，表格等等 属性 方向 Direction：left, right ,up ,down 例 从右向左移！ 方式 Behavior： scroll, slide, alternate 例 一圈一圈绕着走！ 只走一次就歇了！ 来回走,其它网页制作技术,滚动文字或图像（

12、2/3）,循环 loop:次数；若未指定则循环不止(infinite) 例 只走 3 趟 速度 scrollamount 例 啦啦啦，我走得好快哟！ 延时 scrolldelay 例 啦啦啦，我走一步，停一停！,其它网页制作技术,滚动文字或图像（3/3）,外观(Layout)设置 底色 bgcolor: rrggbb 或预定义色彩 面积 面积！ 空白 (Margins) 面积！,其它网页制作技术,导航条,针对每个栏目用图像处理软件准备 状态图像 鼠标经过图像 按下图像 菜单：插入图像对象导航条 依次添加每个项目 选择“修改”“导航条”。,其它网页制作技术,鼠标经过图像,鼠标经过图像是一种在浏览

13、器中查看并使用鼠标指针移过它时发生变化的图像。 使用两个图像文件创建鼠标经过图像：主图像（当首次载入页时显示的图像）和次图像（当鼠标指针移过主图像时显示的图像）。 鼠标经过图像中的这两个图像应大小相等；如果这两个图像大小不同，Dreamweaver 将自动调整第二个图像的大小以匹配第一个图像的属性。,其它网页制作技术,鼠标经过图像,在“文档”窗口中，将插入点放置在要显示鼠标经过图像的位置。 使用以下方法之一插入鼠标经过图像： 在“插入”栏中，选择“常用”，然后单击“鼠标经过图像”图标。 在“插入”栏中，选择“常用”，然后将“鼠标经过图像”图标拖到“文档”窗口中的所需位置。 选择“插入”“图像对

14、象”“鼠标经过图像”。 随即显示“插入鼠标经过图像”对话框。 完成对话框。,其它网页制作技术,跳转菜单,执行下列操作之一： 选择“插入”“表单”“跳转菜单”。 在“插入”栏的“表单”类别中单击“跳转菜单”按钮。 出现“插入跳转菜单”对话框。 完成对话框。,其它网页制作技术,图像热点,也称图像地图 指已被分为多个区域（或称“热点”）的图像；当用户单击某个热点时，会发生某种操作（例如，打开一个新文件）。 若要定义图像地图区域，请执行下列操作之一： 选择圆形工具，并将鼠标指针拖至图像上，创建一个圆形热点。 选择矩形工具，并将鼠标指针拖至图像上，创建一个矩形热点。 选择多边形工具，在各个顶点上单击一下

15、，定义一个不规则形状的热点。然后单击箭头工具封闭此形状。,其它网页制作技术,图像提示（替代）文本,当在Dreamweaver中插入图像时，出现如下对话框 在“替换文本”中输入的文字在浏览时，当鼠标置于该图片上时会显示出来 也可以在图像的“属性”面板中设置,其它网页制作技术,添加背景音乐,提示：在网页制作过程中遇到不会的操作时，还有一种很好的学习方法是 访问搜索引擎，如Google、Baidu等，输入相关的搜索关键字，即可找到所需的资料,其它网页制作技术,Flash按钮,在Dreamweaver中方便地插入Flash按钮 在“文档”窗口中，将插入点放置在要插入 Flash 按钮的位置。 若要打开

16、“插入 Flash 对象”对话框，请执行以下操作之一： 在“插入”栏的“常用”类别中，选择“媒体”，然后单击“Flash 按钮”图标 选择“插入”“媒体”“Flash 按钮”,其它网页制作技术,显示隐藏层,“显示隐藏层”动作显示、隐藏或恢复一个或多个层的默认可见性。此动作用于在用户与页进行交互时显示信息。 例如，当用户将鼠标指针滑过一个植物的图像时，您可以显示一个层给出有关该植物的生长季节和地区、需要多少阳光、可以长到多大等详细信息。,其它网页制作技术,Html页面中嵌入另一个html页面,Iframe frameborder 框架边框 scrolling 是否显示滚动条,其它网页制作技术,Html页面中嵌入另一个html页面,object ,其它网页制作技术,