网页制作 第五章.pptVIP

第五章框架实现多窗口页面 框架 框架和框架集 设置框架页中的链接 框架实现多窗口页面 浮动框架 概述 在网页中除了使用表格和层进行内容的组织定位外,还有一种布局方式,那就是框架。框架是网页的基本构造,通过框架可实现多窗口页面。框架通常用于布局论坛或网站后台管理页面等。 框架集 使用框架可以把浏览器窗口划分为若干个区域，每个区域就是一个框架。 即在一个浏览器窗口分别显示不同的HTML页面。在框架网页中同时还需要有一个文件记录框架的数量、布局方式、链接和属性等信息，这个文件就是框架集。 框架结构的网页 用HTML代码中创建框架网页 frameset rows=30%,* frame src=first.html frameset cols= 30%,* frame src= second.html frame src= third.html /frameset /frameset 框架集Frameset属性 框架Frame属性 在Dreamweaver中创建框架页 在Dreamweaver中创建框架页 自定义创建框架 【杳看】/【可视化助理】菜单下选择“框架边框”命令，框架页的边框就会显示出来 。 将鼠标放置在最上面的框架边框上，鼠标变成形状后 拖曳边框到合适位置，将浏览器拆分为上下两个窗口。 按住【Alt】键将鼠标放在要拆分的框架窗口内单击，鼠标移至边框上变成形状 拖曳，可继续将框架进行水平拆分为左右两个窗口 。 自定义创建框架 框架页的选择 单击【窗口】/【框架】执行菜单命令可打开【框架】面板 。黑色粗线条围起来的是框架集（Frameset）灰色线条围起来的是(Frame) 设置框架的属性 框架建立好后就可以在其【属性面板】对框架的样式进行设置。如设置边框及颜色，是否要滚动条，框架窗口的大小等。 框架布局网页 该网页将浏览器窗口分割成三个部分：分别是上、左下、右下3个框架。这种框架称为嵌套结构框架 指定框架页的超链接 为了确定超链接网页在指定的目标框架中显示必须为框架命名 设置链接的目标窗口 浮动框架 浮动框架是一种可以嵌入网页的特殊框架。与一般框架不同，它不以框架集为基础，可以插入到任何网页中。 课后练习 创建如图所示的框架结构网页，上部为固定的导航区，左边栏目为网页导航区，右边为信息内容区。 网页设计与制作技术 网页设计与制作技术 单击左侧导航图像，右边窗口内容发生变化 左侧窗口为固定内容，不发生变化 定义不支持框架时显示的内容 noframes 框架与框架间保留的空白距离 Framespacing 设定边框的颜色 bordercolor 设定边框的宽度，以像素为单位。 border 设定框架的边框，值：0或1，0表示无边框；1表示有边框 Frameborder 横向切割窗口（上、下分割），设置框架的行高及行数，参数设定同上。 Rows 垂直切割窗口（左、右分割），设置框架的列宽及列数，参数单位：像素、百分数。数值个数以逗号隔开。如：Cols=“40，＊，30%”，分割为三个窗口，第一部分宽40像素，＊号表示第一、第三窗口分割后剩下部分为中间窗口，第三部分占全部窗口宽的30%。 Cols 描述 属性 设定框架内文档距左、右边的界空白距离。单位：像素 marginwidth 设定框架内文档距上、下边界的空白距离。单位：像素 marginheight 设置框架中是否使用滚动条。参数值：yes、no、Auto(由浏览器自行设置) scrolling 设定框架大小不可改变 noresize 指明框架中HTML文件的文件名或超链接网址 src 框架名称 name 描述 属性 方法一： 单击【文件】菜单打开【新建文档】对话框，在【常规】选项中选择“框架集” 方法二： 在网页编辑窗口单击【布局】工具栏中的框架 按钮。 方法三： 框架的名称，用来进行识别 Name 浮动框架的宽度 FrameBorder 当src指定的文件在区域内显示不完时，是否滚动 Scrolling 浮动框架区域的宽与高 width、height 文件的路径，表示浮动框的源文件 src 描述 属性 Iframe标记的常用属性 网页设计与制作技术