网页设计与制作课件第4章使用层和框架布局页面.ppt

网页设计与制作网页设计与制作第一章第一章 HTML语言基础语言基础 2第二章第二章 初识初识Dreamweaver 4第三章第三章 创建与应用表格创建与应用表格 3第四章第四章 使用层和框架布局页面使用层和框架布局页面 3第五章第五章 CSS样式与模板的使用样式与模板的使用 3第六章第六章 行为、库和资源管理行为、库和资源管理 3第七章第七章 建立动态网站建立动态网站 3 第八章第八章 Flash动画基础知识动画基础知识 3第九章第九章 创建动画创建动画 3第十章第十章 使用使用Fireworks编辑网页图像编辑网页图像 31第四章第四章 使用层和框架布局页面使用层和框架布局页面一、分层一、分层1.层的概念层的概念层是可将网页分割成层是可将网页分割成“一个个能包含任何元一个个能包含任何元 素的逻辑块素的逻辑块”。层的内容可重叠，位置可移动，在不同浏览层的内容可重叠，位置可移动，在不同浏览 器中由不同的标识符产生。器中由不同的标识符产生。2.建立一个新层建立一个新层对象面板对象面板/布局布局第四章第四章 使用层和框架布局页面使用层和框架布局页面3.修改层修改层选择一个层选择一个层调整层的大小及位置调整层的大小及位置手工拖动手工拖动属性面板属性面板全面使用层属性和控制面板全面使用层属性和控制面板给层命名给层命名可见性可见性堆栈顺序（堆栈顺序（Z轴轴）背景图案和背景色背景图案和背景色第四章第四章 使用层和框架布局页面使用层和框架布局页面4.创建嵌套层创建嵌套层父层中创建新层父层中创建新层层控制面板里：层控制面板里：ctrl+ctrl+拖动拖动剪辑和溢出剪辑和溢出p剪剪辑辑-要要将将自自动动生生成成的的前前面面的的代代码删除码删除5.对齐层（对齐层（shift选定）选定）修改修改/对齐对齐第四章第四章 使用层和框架布局页面使用层和框架布局页面7.应用层应用层转换层为表格（转换层为表格（P97P97）制作阴影字（制作阴影字（P99P99）飘落的花朵（飘落的花朵（P101P101）第四章第四章 使用层和框架布局页面使用层和框架布局页面 二、创建框架二、创建框架框架（框架（frame）：）：浏览器内的一个矩形区，它浏览器内的一个矩形区，它 具有一个网页的所有属性和功能。具有一个网页的所有属性和功能。框架系（框架系（frameset）：）：一个定义了一组框架一个定义了一组框架 及每个框架所含内容的特殊网页，用以设置及每个框架所含内容的特殊网页，用以设置 框架的各种属性。框架的各种属性。1.创建框架结构的网页创建框架结构的网页对象面板对象面板2.设置框架系属性设置框架系属性调整框架尺寸调整框架尺寸鼠标拖动鼠标拖动第四章第四章 使用层和框架布局页面使用层和框架布局页面框架系属性面板：框架系属性面板：窗口窗口/框架框架 鼠标单击框架面板中粗边框鼠标单击框架面板中粗边框 修改修改列列或行域或行域保存框架和框架系文件保存框架和框架系文件保存框架文件保存框架文件 鼠标定位在每个框架窗口，然后鼠标定位在每个框架窗口，然后文件文件/保存框架保存框架保存框架系文件保存框架系文件 文件文件/保存框架页保存框架页文件文件/保存全部保存全部第四章第四章 使用层和框架布局页面使用层和框架布局页面3.修改框架属性修改框架属性删除框架删除框架拖动框架边框到边界处即可。拖动框架边框到边界处即可。在框架中替换框架文件在框架中替换框架文件框架属性面板中的框架属性面板中的源文件源文件域域修改框架中的内容修改框架中的内容与普通页面的修改相同与普通页面的修改相同插入链接时注意使用插入链接时注意使用目标目标域域第四章第四章 使用层和框架布局页面使用层和框架布局页面4.典型案例典型案例用时间轴在网页中制作幻灯片（用时间轴在网页中制作幻灯片（P112）制作框架网页（制作框架网页（P114）