框架和模板.ppt

第七章 框架和模板 教学要求： 理解框架和模板的作用及应用范围 掌握框架和模板的基本操作； 教学内容： 框架的概念和用途 框架的操作 模板的概念和用途 模板的操作 1 框架的基础知识 框架是网页的魔术师，可将一个浏览器页面分割成几个独立的区域，每个区域都可以显示一个单独的网页。 框架的优点 框架通常用来定义页面的导航区域和内容区域，使整个网站结构清晰，让浏览者的定位与浏览操作更加简便。 可将复杂页面分解成若干子网页，分而治之。 可使页面布局紧凑，让不同页面呈现相同显示效果，利于保持整个网站的整体风格。 结合JavaScript脚本，还可以制作出折叠框架等网页特效。 框架的不足 由于框架将浏览器进行了分割，每个区域的显示空间相对受限； 如果布局不合理，属性设置不恰当，将使得整个页面有拼凑的感觉，显得不和谐。 由于框架实际是由多个页面在其中同时显示，因此在下载网页时，速度上会相对较慢。 并不是所有浏览器都支持框架，如早期的IE3.0。 小结 虽然框架存在一定的缺点，但由于其特殊的显示效果，加上现在用户使用的大都已是IE 4.0 或更高版本的浏览器，它们都支持框架技术，因此，框架一直是一种很受欢迎的网页结构，目前使用框架制作的网站也愈来愈多。 框架的构成 frameset rows=80,* cols=* frame src=file1path name=topFrame / frameset rows=* cols=150,* frame src=file2path name=leftFrame/ frame src=file3path name=mainFrame / /frameset /frameset 框架集标记FRAMESET 框架集标记FRAMESET定义了框架的开始和结束。它还定义一组框架的结构，包括框架的数量、尺寸等。 FRAMESET标记的属性如下。 ① cols属性 ② rows属性 ③ framespacing属性：边框宽度 ④ bordercolor属性 ⑤ frameborder属性：是否显示框架集边框 框架标记FRAME FRAME标记是用于定义每个框架的内容。每个框架最终都要有一个显示的页面，通过装载该页面就可以显示网页的内容了。 框架标记FRAME的属性如下。 ① src属性 ② name属性 ③ frameborder属性 ④ scrolling属性 ⑤ marginwidth属性、marginheight属性 ⑥ noresize属性 2 在页面中创建框架 DW中框架基本操作步骤 （1）启动Dreamweaver，创建一个空白页面。 （2）选择“插入”工具栏下的“布局”选项 （3）单击“框架”图标，在框架类型选项中选择其中一种结构并单击。 （4）单击框架面板示图中的相应区域，可选择页面中的相应框架或框架集。 （5）将鼠标移到框架的边框上，按下左键并拖动，可以改变框架区域各组成部分的大小。 （6）将鼠标移到选定框架或框架集的外边缘，按下左键进行拖动，还可以创建新的框架。 DW中框架基本操作步骤 （7）对于不想保留的框架，用鼠标按住相应框架的边框，将其拖出页面即可删除。 （8）单击“框架”控制面板中的框架集，在属性面板中进行框架集属性的设置。 （9）设置好各框架的属性后，对框架进行保存。在页面中将文档划分为框架后，Dreamweaver会自动创建一个无标题的框架集文件，另外在每个框架中都会创建一个新的无标题文档，即1个含有N个框架的页面实际是由N+1个文件构成。这在页面保存时要特别注意。 （10）“保存框架集/页”是指保存那个总的网页文件；“保存框架”是指某个区域所对应的那个网页；“保存全部”包含以上两方面 DW中框架基本操作步骤 也可以先创建一个框架集页，然后在框架面板中选择各个区域，为其指定源文件，最后只需要保存框架集页面就行了 注意：在head /head中使用 base target=“mainFrame” 3 框架应用实例 综合实例I 内嵌框架(iframe) iframe是嵌入到网页中的一块区域，用于显示另一个网页的内容。通过iframe标签指定，其代码如下： iframe src=filepath/iframe 常用属性： Src：默认情况下其中显示的网页路径。 Align：指定该内嵌框架的对齐方式，其值可以是TOP、BOTTOM、LEFT、RIGHT或MIDDLE。 Frameborder：指定边框是否显示。 Height和width：指定高度和宽度。 Scrolling：指定是否显示滚动条， yes /no /auto。 Name