第06讲模板库和框架的应用_精品文档.ppt

第06讲模板库和框架的应用_精品文档.ppt

《第06讲模板库和框架的应用_精品文档.ppt》由会员分享，可在线阅读，更多相关《第06讲模板库和框架的应用_精品文档.ppt（25页珍藏版）》请在冰豆网上搜索。

网页设计与制作电子教案授课教师：

颜一鸣网页设计与制作网页设计与制作模板、库和框架的应用模板、库和框架的应用模板、库和框架的应用模板、库和框架的应用网页设计与制作电子教案授课教师：

颜一鸣难点疑点难点疑点重点知识重点知识主要任务主要任务第第6讲讲模板、库和框架的应用模板、库和框架的应用课程导入课程导入网页设计与制作电子教案授课教师：

颜一鸣难点疑点难点疑点重点知识重点知识课程导入课程导入第第6讲讲模板、库和框架的应用模板、库和框架的应用掌握使用掌握使用Dreamweaver创建站点创建站点任务任务1：

掌握使用掌握使用Dreamweaver创建和应用模板创建和应用模板任务任务2：

主要任务主要任务掌握使用掌握使用Dreamweaver创建和应用库项目创建和应用库项目任务任务3：

掌握框架技术的应用掌握框架技术的应用任务任务4：

网页设计与制作电子教案授课教师：

颜一鸣难点疑点难点疑点主要任务主要任务课程导入课程导入重点知识重点知识第第6讲讲模板、库和框架的应用模板、库和框架的应用网页设计与制作电子教案授课教师：

颜一鸣主要任务主要任务重点知识重点知识课程导入课程导入难点疑点难点疑点第第6讲讲模板、库和框架的应用模板、库和框架的应用网页设计与制作电子教案授课教师：

颜一鸣1.1模板和库项目的应用模板和库项目的应用1.2框架技术的应用授课提纲授课提纲第第6讲讲模板、库和框架的应用模板、库和框架的应用网页设计与制作电子教案授课教师：

颜一鸣1.1模板和库项目的应用模板和库项目的应用使用使用DreamweaverDreamweaver创建站点创建站点1在在Dreamweaver中创建站点，就是在中创建站点，就是在Dreamweaver中定义中定义站点、策划站点结构、部署开发环境。

定义站点是为了更好地站点、策划站点结构、部署开发环境。

定义站点是为了更好地利用利用【文件文件】面板对站点文件进行管理，也是为减少一些错误面板对站点文件进行管理，也是为减少一些错误的出现，如的出现，如路径出错，链接出错路径出错，链接出错等等。

许多初学者开始做网页等等。

许多初学者开始做网页时，就只知道做单一网页，对文件的条理性、结构性不加以管时，就只知道做单一网页，对文件的条理性、结构性不加以管理，没有对文件进行分类管理，使整个站点结构显得很乱；所理，没有对文件进行分类管理，使整个站点结构显得很乱；所以在开发之前应该认真策划好站点结构。

下面以以在开发之前应该认真策划好站点结构。

下面以DreamweaverCS3为例，讲解站点的创建。

为例，讲解站点的创建。

1/6网页设计与制作电子教案授课教师：

颜一鸣1.1模板和库项目的应用模板和库项目的应用使用使用DreamweaverDreamweaver创建站点创建站点12/6步骤步骤1可以不填可以不填网页设计与制作电子教案授课教师：

颜一鸣1.1模板和库项目的应用模板和库项目的应用使用使用DreamweaverDreamweaver创建站点创建站点13/6网页设计与制作电子教案授课教师：

颜一鸣1.1模板和库项目的应用模板和库项目的应用使用使用DreamweaverDreamweaver创建站点创建站点14/6目录不存在则会新建目录不存在则会新建网页设计与制作电子教案授课教师：

颜一鸣1.1模板和库项目的应用模板和库项目的应用使用使用DreamweaverDreamweaver创建站点创建站点15/6网页设计与制作电子教案授课教师：

颜一鸣1.1模板和库项目的应用模板和库项目的应用使用使用DreamweaverDreamweaver创建站点创建站点16/6网页设计与制作电子教案授课教师：

颜一鸣1.1模板和库项目的应用模板和库项目的应用模板的应用模板的应用2一、模板的优势一、模板的优势q建立网站，有时需要建立风格统一、外观相同的大量网页，建立网站，有时需要建立风格统一、外观相同的大量网页，这些网页可能需要修改，为了提高工作效率，减少操作过程中这些网页可能需要修改，为了提高工作效率，减少操作过程中的错误，可使用模板技术。

的错误，可使用模板技术。

q在使用模板的站点中，如果需要更改应用模板的网页，只需在使用模板的站点中，如果需要更改应用模板的网页，只需修改模板的内容更新模板，就可以更新站点中所有的文件，从修改模板的内容更新模板，就可以更新站点中所有的文件，从而大大提高工作的效率，特别对于维护静态的站点尤其显出其而大大提高工作的效率，特别对于维护静态的站点尤其显出其优势。

优势。

1/3网页设计与制作电子教案授课教师：

颜一鸣1.1模板和库项目的应用模板和库项目的应用模板的应用模板的应用2二、创建模板二、创建模板q1.使用已有页面创建模板（菜单使用已有页面创建模板（菜单【文件文件】【】【另存为模板另存为模板】）q2.使用菜单命令创建空白模板使用菜单命令创建空白模板q3.使用模板子面板创建模板（快捷键使用模板子面板创建模板（快捷键F11）q注：

模板文件扩展名为注：

模板文件扩展名为dwt。

一般模板文件不直接使用，而。

一般模板文件不直接使用，而是通过它产生新的网页。

模板文件存放在站点根目录下的是通过它产生新的网页。

模板文件存放在站点根目录下的【Templates】子目录下，此目录自动生成。

子目录下，此目录自动生成。

2/3网页设计与制作电子教案授课教师：

颜一鸣1.1模板和库项目的应用模板和库项目的应用模板的应用模板的应用2q三、创建模板可编辑区域三、创建模板可编辑区域q1.创建模板可编辑区域创建模板可编辑区域q选择菜单命令选择菜单命令【插入插入】【模板对象模板对象】【可编辑区域可编辑区域】q可编辑区域的标记代码如下：

可编辑区域的标记代码如下：

contentq2.通过模板创建新网页通过模板创建新网页q四、模板分离四、模板分离q选择菜单命令选择菜单命令【修改修改】【模板模板】【从模板中分离从模板中分离】3/3网页设计与制作电子教案授课教师：

颜一鸣1.1模板和库项目的应用模板和库项目的应用库的应用库的应用3q提高一个网站的页面制作效率，除了可以使用模板外，还可提高一个网站的页面制作效率，除了可以使用模板外，还可以应用库实现页面的批量更新。

库与模板的区别在于库只针对以应用库实现页面的批量更新。

库与模板的区别在于库只针对于网页中的局部内容，而模板是针对整个网页。

于网页中的局部内容，而模板是针对整个网页。

q一、创建库一、创建库q菜单命令菜单命令【文件文件】【】【新建新建】【】【空白页空白页】【】【库项目库项目】q或者使用模板子面板创建库项目（快捷键或者使用模板子面板创建库项目（快捷键F11）q二、插入库二、插入库q选择资源面板组，再从中选取要添加的库项目，直接拖拽到选择资源面板组，再从中选取要添加的库项目，直接拖拽到网页相对应的位置。

网页相对应的位置。

1/2网页设计与制作电子教案授课教师：

颜一鸣1.1模板和库项目的应用模板和库项目的应用库的应用库的应用3q三、更新库三、更新库q多个页面应用了某个库项目，如要修改，只需修改相就库项多个页面应用了某个库项目，如要修改，只需修改相就库项目，则所有引用页面都会变化修改。

目，则所有引用页面都会变化修改。

q四、库的分离四、库的分离q在引用页选中要分离的库项目，右键再选择在引用页选中要分离的库项目，右键再选择【从源文件中分从源文件中分离离】命令命令q注：

库文件扩展名为注：

库文件扩展名为lib。

库文件不直接使用。

库文件存放在。

库文件不直接使用。

库文件存放在站点根目录下的站点根目录下的【Library】子目录下，此目录自动生成。

子目录下，此目录自动生成。

2/2网页设计与制作电子教案授课教师：

颜一鸣1.1模板和库项目的应用模板和库项目的应用1.2框架技术的应用授课提纲授课提纲第第6讲讲模板、库和框架的应用模板、库和框架的应用网页设计与制作电子教案授课教师：

颜一鸣1.2框架技术的应用框架技术的应用关于框架关于框架1q使用框架使用框架（Frame），可以在浏览器窗口同时显示多个网页。

每个，可以在浏览器窗口同时显示多个网页。

每个Frame里设定一个网页，每个里设定一个网页，每个Frame里的网页相互独立。

里的网页相互独立。

q框架的优缺点框架的优缺点q优点：

可以让网页的风格统一，更能加快浏览速度。

优点：

可以让网页的风格统一，更能加快浏览速度。

q缺点：

搜索引擎无法把带有框架的网页正确索引。

缺点：

搜索引擎无法把带有框架的网页正确索引。

网页设计与制作电子教案授课教师：

颜一鸣1.2框架技术的应用框架技术的应用框架的使用框架的使用2q1.Framesetq决定如何划分决定如何划分Frame。

有有cols属性和属性和rows属性。

使用属性。

使用cols属性，表示按列分布属性，表示按列分布Frame；使；使用用rows属性，表示按行分布属性，表示按行分布Frame。

q2.Frameq用用这个这个Tag设定网页。

设定网页。

里有里有src属性，属性，src值就值就是网页的路径和文件名。

是网页的路径和文件名。

1/3网页设计与制作电子教案授课教师：

颜一鸣1.2框架技术的应用框架技术的应用框架的使用框架的使用2q下面的代码的目的是：

将下面的代码的目的是：

将Frameset分成分成2列，第一列列，第一列25%，表示第一列的宽度是，表示第一列的宽度是窗口宽度的窗口宽度的25%；第二列；第二列75%，表示第一列的宽度是窗口宽度的，表示第一列的宽度是窗口宽度的75%。

第一列中显。

第一列中显示示a.html，第二列中显示，第二列中显示b.html。

2/3网页设计与制作电子教案授课教师：

颜一鸣1.2框架技术的应用框架技术的应用框架的使用框架的使用2q假如一个框架有可见边框，用户可以拖动边框来改变它的大小。

假如一个框架有可见边框，用户可以拖动边框来改变它的大小。

为了避免这种情况发生，可以在为了避免这种情况发生，可以在标签中加入：

标签中加入：

noresize=noresize。

q为不支持框架的浏览器添加为不支持框架的浏览器添加标签。

标签。

q重要提示：

重要提示：

不能将不能将标签与标签与标签同时使用标签同时使用。

但。

但假如添加包含一段文本的假如添加包含一段文本的标签，就标签，就必须将这段文字嵌套于必须将这段文字嵌套于标签内。

标签内。

3/3网页设计与制作电子教案授课教师：

颜一鸣1.2框架技术的应用框架技术的应用内嵌框架内嵌框架IframeIframe的使用的使用31.关于关于IframeqIframe是框架的一种标记，在页面设计中经常用到。

是框架的一种标记，在页面设计中经常用到。

q使用使用Iframe可以将一个文档嵌入在另一个文档中显示，可以随可以将一个文档嵌入在另一个文档中显示，可以随处引用不拘泥网页的布局限制。

处引用不拘泥网页的布局限制。

q内嵌框架的代码标记内嵌框架的代码标记2.设置设置Iframe属性属性3.设置设置Iframe自适应高度自适应高度qonload=this.height=this.contentWindow.document.documentElement.scrollHeight1/2网页设计与制作电子教案授课教师：

颜一鸣1.2框架技术的应用框架技术的应用内嵌框架内嵌框架IframeIframe的使用的使用34.设置设置Iframe背景透明背景透明qIframe有一个好处，可以设置框架透明，让框架内容的背景和有一个好处，可以设置框架透明，让框架内容的背景和主页面背景一样。

让主页面背景一样。

让Iframe支持背景透明，在支持背景透明，在Iframe标记中加上标记中加上如下属性如下属性allowtransparency=true2/2网页设计与制作电子教案授课教师：

颜一鸣