《项目4 用框架布局网页》由会员分享，可在线阅读，更多相关《项目4 用框架布局网页（16页珍藏版）》请在金锄头文库上搜索。
1、 Dreamweaver CS3、Flash CS3应用基础案例教程 项目4用框架布局网页项目分解： 任务一 创建框架网页 创建、保存框架集和框架页面 设置框架属性 制作框架链接 任务二 创建IFRAME内框架 创建IFRAME内框架 IFRAME的链接方法教学准备素材：素材项目4eg 效果：素材项目4finaDreamweaver CS3、Flash CS3应用基础案例教程 框架是Dreamweaver的布局工具之一，它能够把网页分割 成几个独立的区域。当我们浏览页面拖动滚动条或单击导航按 钮时，一些部分区域文档会固定不动，而另外一部分区域文档 会随之滚动或跳转到其它文档。框架是浏览器窗口中
2、的一个区域，在框架中可以显示其他 的网页；而框架集则记录同一网页上多个框架的布局、链接和 属性信息。框架与框架集之间的关系其实就是包含与被包含的 关系。Iframe内框架也可以称为嵌入式框架或浮动框架，使用 Iframe可以将一个文档嵌入在另一个文档中显示，可以随处引 用不拘泥网页的布局限制。在当今互联网网络广告横行的时代 ，Iframe更是无孔不入，将嵌入的文档与整个页面的内容相互 融合，形成了一个整体。项目4用框架布局网页Dreamweaver CS3、Flash CS3应用基础案例教程 活动1 创建、保存框架集和框架 页面活动2 设置框架属性活动3 制作框架链接任务一： 创建框架网页项目
3、4用框架布局网页Dreamweaver CS3、Flash CS3应用基础案例教程 1.框架集的HTML标签：知识延伸属性“rows”表示横向切割、属性“cols”，表示的是垂直切割页面 。属性“Frameborder”设定框架的边框，其值只有 0 和 1 ， 0 表 示不要边框， 1 表示要显示边框。属性“Border”设定框架的边框厚度，以 pixels 为单位。属性“framespacing” 表示框架与框架间保留的空白的距离。Dreamweaver CS3、Flash CS3应用基础案例教程 1.框架集的HTML标签：知识延伸属性“src” 设定此框窗中要显示的网页档案名称，每个框窗一
4、定 要对应一个网页文件。 属性“name” 设定这个框窗的名称，这样才能指定框架来作链接 。 属性“scrlolling”设定是否要显示滚动条，YES 表示要显示滚动 条，NO 表示无论如何都不要显示，AUTO 表示看页面的内容 多少来定。 属性“noresize”设定不让使用者可以改变这个框框的大小，如没 有设定此参数，使用者可随意地拉动框架改变其大小。Dreamweaver CS3、Flash CS3应用基础案例教程 2.框架中链接的目标窗口：知识延伸_blank：在弹出的新窗口中打开所链接的文档； _parent：如果是嵌套的框架，会在父框架或窗口中打开链接的文档； 如果不是嵌套的框架，
5、则与选择top选项的效果相同，在整个浏览器窗口中 打开所连接的文档。 _self：浏览器默认的设置，在当前网页所在的窗口中打开链接的网页。 _top：在完整的浏览器窗口中打开网页。 在以前的链接里，只是看到：_blank，_parent，_self、_top几项的，现在 多了topFrame和mainFrame。topFrame指的是上框架，也就是上边的，如 果链接的目标选了topFrame，则单击链接时，内容将在上边出现； mainFrame指下面的主框架，链接目标为mainFrame则内容在下边的主框 架里出现；如果选_self刚在本窗口出现；选_parent则在框架窗口出现了（ 也就是替
6、换整个框架了），因为上级窗口就是_parent。Dreamweaver CS3、Flash CS3应用基础案例教程 1. 动手完成“index.html”页面中mainFrame框架的源页面 down.html的放置；2.动手完成topFrame框架中top.html页面“政策文件”和“环保讲 座”文本超级链接，设置在mainFrame框架中打开。小试身手Dreamweaver CS3、Flash CS3应用基础案例教程 任务二：创建IFRAME内框架活动1 创建IFRAME内框架活动2 IFRAME的链接方法项目4用框架布局网页Dreamweaver CS3、Flash CS3应用基础案例教
7、程 1. iframe内框架的Html代码：知识延伸属性“src”定义了内容页的位置，在显示该内框架的时候，里面显示的页面内容。 属性“name”定义了iframe的名字，此名称在框架页内的链接时使用，必须在链接中的目标选定该值，才能够显示在指定的内框架内。 属性“width”定义了框架的宽度，此宽度可以是以“px”像素为单位的常数值，也可以是相对应的百分比。 属性“height”定义了框架的高度，设置与宽度值属性一样。 属性“marginwidth”、 “marginheight”定义了框架中HTML文件显示的上下 边界的宽度、高度，取值为px，缺省值由浏览器决定。Dreamweaver C
8、S3、Flash CS3应用基础案例教程 1. iframe内框架的Html代码：知识延伸属性“scrolling”定义是否有滚动条，取值为yes、no、auto，缺省值为auto 。 yes代表一定显示滚动条，no代表无论如何也不显示滚动条，auto代表视页面情况需要时再来显示。 属性“frameborder”定义了内框架的边框，取值为1或者0，缺省值为1。1代表 显示边框，0代表不显示边框。 属性“align”定义了在内框架中垂直或水平对齐方式。 由于在iframe中，放置内框架的背景图片和iframe加载文件的背景很难重合， 我们可以设置这个iframe内框架为一个透明的内框架，这时候，
9、我们需要在 iframe属性中， 加入参数“allowtransparency”使它的值“true“。Dreamweaver CS3、Flash CS3应用基础案例教程 2.使用框架名称时要遵循的规则： （1）同一个网页中可以很多个框架，但“框架名称”是 唯一的，不能有相同的两个；（2）框架名称的大小写是区分的，但是同一网页中不 能出现拼写相同仅大小写不同的框架名称，例如名为 mainframe和MainFrame的框架名就不能同时出现在一 个同一个框架集当中。知识延伸Dreamweaver CS3、Flash CS3应用基础案例教程 1.动手完成“hbzs.html”页面“环境保护纪念日”的链接指 定页面为”2.html”。小试身手Dreamweaver CS3、Flash CS3应用基础案例教程 利用框架可以更加容易的整理网页文档，正确使 用框架与框架集属性有助于网页的制作。使用框架可 以非常方便的完成导航工作，而且各个框架之间不会 相互影响，所以在模板出现以前，框架技术一直普遍 应用于页面导航，它可以使网站的结构较为清晰。 归纳与小结项目4用框架布局网页Dreamweaver CS3、Flash CS3应用基础案例教程 实训准备原始文件 素材项目4实训4eg 最终文件 素材项目4实训4final下一项目：用CSS美化网页
