讲模板库和框架的应用PPT课件.ppt

网页设计与制作 模板 库和框架的应用 难点疑点 重点知识 主要任务 第6讲模板 库和框架的应用 课程导入 难点疑点 重点知识 课程导入 第6讲模板 库和框架的应用 主要任务 难点疑点 主要任务 课程导入 重点知识 第6讲模板 库和框架的应用 主要任务 重点知识 课程导入 难点疑点 第6讲模板 库和框架的应用 授课提纲 第6讲模板 库和框架的应用 1 1模板和库项目的应用 使用Dreamweaver创建站点 1 在Dreamweaver中创建站点 就是在Dreamweaver中定义站点 策划站点结构 部署开发环境 定义站点是为了更好地利用 文件 面板对站点文件进行管理 也是为减少一些错误的出现 如路径出错 链接出错等等 许多初学者开始做网页时 就只知道做单一网页 对文件的条理性 结构性不加以管理 没有对文件进行分类管理 使整个站点结构显得很乱 所以在开发之前应该认真策划好站点结构 下面以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创建站点 1 5 6 1 1模板和库项目的应用 使用Dreamweaver创建站点 1 6 6 1 1模板和库项目的应用 模板的应用 2 一 模板的优势建立网站 有时需要建立风格统一 外观相同的大量网页 这些网页可能需要修改 为了提高工作效率 减少操作过程中的错误 可使用模板技术 在使用模板的站点中 如果需要更改应用模板的网页 只需修改模板的内容更新模板 就可以更新站点中所有的文件 从而大大提高工作的效率 特别对于维护静态的站点尤其显出其优势 1 3 1 1模板和库项目的应用 模板的应用 2 二 创建模板1 使用已有页面创建模板 菜单 文件 另存为模板 2 使用菜单命令创建空白模板3 使用模板子面板创建模板 快捷键F11 注 模板文件扩展名为dwt 一般模板文件不直接使用 而是通过它产生新的网页 模板文件存放在站点根目录下的 Templates 子目录下 此目录自动生成 2 3 1 1模板和库项目的应用 模板的应用 2 三 创建模板可编辑区域1 创建模板可编辑区域选择菜单命令 插入 模板对象 可编辑区域 可编辑区域的标记代码如下 content2 通过模板创建新网页四 模板分离选择菜单命令 修改 模板 从模板中分离 3 3 1 1模板和库项目的应用 库的应用 3 提高一个网站的页面制作效率 除了可以使用模板外 还可以应用库实现页面的批量更新 库与模板的区别在于库只针对于网页中的局部内容 而模板是针对整个网页 一 创建库菜单命令 文件 新建 空白页 库项目 或者使用模板子面板创建库项目 快捷键F11 二 插入库选择资源面板组 再从中选取要添加的库项目 直接拖拽到网页相对应的位置 1 2 1 1模板和库项目的应用 库的应用 3 三 更新库多个页面应用了某个库项目 如要修改 只需修改相就库项目 则所有引用页面都会变化修改 四 库的分离在引用页选中要分离的库项目 右键再选择 从源文件中分离 命令注 库文件扩展名为lib 库文件不直接使用 库文件存放在站点根目录下的 Library 子目录下 此目录自动生成 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值就是网页的路径和文件名 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 关于IframeIframe是框架的一种标记 在页面设计中经常用到 使用Iframe可以将一个文档嵌入在另一个文档中显示 可以随处引用不拘泥网页的布局限制 内嵌框架的代码标记2 设置Iframe属性3 设置Iframe自适应高度onload this height this contentWindow document documentElement scrollHeight 1 2 1 2框架技术的应用 内嵌框架Iframe的使用 3