第06讲模板、库和框架的应用.ppt

1、网页设计与制作模板、库和框架的应用,难点疑点,重点知识,主要任务,第6讲 模板、库和框架的应用,课程导入,难点疑点,重点知识,课程导入,第6讲 模板、库和框架的应用,主要任务,难点疑点,主要任务,课程导入,重点知识,第6讲 模板、库和框架的应用,主要任务,重点知识,课程导入,难点疑点,第6讲 模板、库和框架的应用,授课提纲,第6讲 模板、库和框架的应用,1.1 模板和库项目的应用,使用Dreamweaver创建站点,1,在 Dreamweaver 中创建站点，就是在 Dreamweaver 中定义站点、策划站点结构、部署开发环境。定义站点是为了更好地利用【文件】面板对站点文件进行管理，也是为减

2、少一些错误的出现，如路径出错，链接出错等等。许多初学者开始做网页时，就只知道做单一网页，对文件的条理性、结构性不加以管理，没有对文件进行分类管理，使整个站点结构显得很乱；所以在开发之前应该认真策划好站点结构。下面以DreamweaverCS3为例，讲解站点的创建。,1/6,1.1 模板和库项目的应用,使用Dreamweaver创建站点,1,2/6,步骤1,可以不填,1.1 模板和库项目的应用,使用Dreamweaver创建站点,1,3/6,1.1 模板和库项目的应用,使用Dreamweaver创建站点,1,4/6,目录不存在则会新建,1.1 模板和库项目的应用,使用Dreamweaver创建站

3、点,1,5/6,1.1 模板和库项目的应用,使用Dreamweaver创建站点,1,6/6,1.1 模板和库项目的应用,模板的应用,2,一、模板的优势 建立网站，有时需要建立风格统一、外观相同的大量网页，这些网页可能需要修改，为了提高工作效率，减少操作过程中的错误，可使用模板技术。 在使用模板的站点中，如果需要更改应用模板的网页，只需修改模板的内容更新模板，就可以更新站点中所有的文件，从而大大提高工作的效率，特别对于维护静态的站点尤其显出其优势。,1/3,1.1 模板和库项目的应用,模板的应用,2,二、创建模板 1.使用已有页面创建模板（菜单【文件】【另存为模板】） 2.使用菜单命令创建空白模

4、板 3.使用模板子面板创建模板（快捷键F11） 注：模板文件扩展名为dwt。一般模板文件不直接使用，而是通过它产生新的网页。模板文件存放在站点根目录下的【Templates】子目录下，此目录自动生成。,2/3,1.1 模板和库项目的应用,模板的应用,2,三、创建模板可编辑区域 1.创建模板可编辑区域 选择菜单命令【插入】 【模板对象】 【可编辑区域】 可编辑区域的标记代码如下： content 2.通过模板创建新网页 四、模板分离 选择菜单命令【修改】 【模板】 【从模板中分离】,3/3,1.1 模板和库项目的应用,库的应用,3,提高一个网站的页面制作效率，除了可以使用模板外，还可以应用库实现

5、页面的批量更新。库与模板的区别在于库只针对于网页中的局部内容，而模板是针对整个网页。 一、创建库 菜单命令【文件】【新建】【空白页】【库项目】 或者使用模板子面板创建库项目（快捷键F11） 二、插入库 选择资源面板组，再从中选取要添加的库项目，直接拖拽到网页相对应的位置。,1/2,1.1 模板和库项目的应用,库的应用,3,三、更新库 多个页面应用了某个库项目，如要修改，只需修改相就库项目，则所有引用页面都会变化修改。 四、库的分离 在引用页选中要分离的库项目，右键再选择【从源文件中分离】命令 注：库文件扩展名为lib。库文件不直接使用。库文件存放在站点根目录下的【Library】子目录下，此目

6、录自动生成。,2/2,授课提纲,第6讲 模板、库和框架的应用,1.2 框架技术的应用,关于框架,1,使用框架(Frame)，可以在浏览器窗口同时显示多个网页。每个Frame里设定一个网页，每个Frame里的网页相互独立。 框架的优缺点 优点：可以让网页的风格统一，更能加快浏览速度。 缺点：搜索引擎无法把带有框架的网页正确索引。,1.2 框架技术的应用,框架的使用,2,1.Frameset 决定如何划分Frame。有cols属性和rows属性。使用cols属性，表示按列分布Frame；使用rows属性，表示按行分布Frame。 2.Frame 用这个Tag设定网页。里有src属性，src值就是网

7、页的路径和文件名。,1/3,1.2 框架技术的应用,框架的使用,2,下面的代码的目的是：将Frameset分成2列，第一列25%，表示第一列的宽度是窗口宽度的25%；第二列75%，表示第一列的宽度是窗口宽度的75%。第一列中显示a.html，第二列中显示b.html。,2/3, ,1.2 框架技术的应用,框架的使用,2,假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 标签中加入：noresize=noresize。 为不支持框架的浏览器添加 标签。 重要提示：不能将 标签与 标签同时使用。但假如添加包含一段文本的 标签，就必须将这段文字嵌套于 标签内。,3/3,1.2 框架技术的应用,内嵌框架Iframe的使用,3,1. 关于Iframe Iframe是框架的一种标记，在页面设计中经常用到。 使用Iframe可以将一个文档嵌入在另一个文档中显示，可以随处引用不拘泥网页的布局限制。 内嵌框架的代码标记 2. 设置 Iframe属性 3. 设置Iframe自适应高度 onload=this.height=this.contentWindow.document.documentElement.scrollHeight,1/2,1.2 框架技术的应用,内嵌框架Iframe的使