网页设计与制作技术第五章.ppt

《网页设计与制作技术第五章.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第五章框架实现多窗口页面网页设计与制作技术框架框架和框架集设置框架页中的链接框架实现多窗口页面浮动框架概述在网页中除了使用表格和层进行内容的组织定位外,还有一种布局方式,那就是框架。框架是网页的基本构造,通过框架可实现多窗口页面。框架通常用于布局论坛或网站后台管理页面等。框架集使用框架可以把浏览器窗口划分为若干个区域，每个区域就是一个框架。即在一个浏览器窗口分别显示不同的HTML页面。在框架网页中同时还需要有一个文件记录框架的数量、布局方式、链接和属性等信息，这个文件就是框架集。框架结构的网页单击左侧导航图像，右边窗口内容发生变化左侧窗口为固定内容，不发生变化用HTML

2、代码中创建框架网页框架集属性属性描述Cols垂直切割窗口（左、右分割），设置框架的列宽及列数，参数单位：像素、百分数。数值个数以逗号隔开。如：Cols=“40，＊，30%”，分割为三个窗口，第一部分宽40像素，＊号表示第一、第三窗口分割后剩下部分为中间窗口，第三部分占全部窗口宽的30%。

3、Rows横向切割窗口（上、下分割），设置框架的行高及行数，参数设定同上。Frameborder设定框架的边框，值：0或1，0表示无边框；1表示有边框border设定边框的宽度，以像素为单位。bordercolor设定边框的颜色Framespacing框架与框架间保留的空白距离noframes定义不支持框架时显示的内容框架属性属性描述name框架名称src指明框架中HTML文件的文件名或超链接网址noresize设定框架大小不可改变scrolling设置框架中是否使用滚动条。参数值：yes、no、Auto(由浏览器自行设置)marginheight设定框架内文档

4、距上、下边界的空白距离。单位：像素marginwidth设定框架内文档距左、右边的界空白距离。单位：像素在Dreamweaver中创建框架页方法一：单击【文件】菜单打开【新建文档】对话框，在【常规】选项中选择“框架集”在Dreamweaver中创建框架页方法二：在网页编辑窗口单击【布局】工具栏中的框架按钮。自定义创建框架【杳看】/【可视化助理】菜单下选择“框架边框”命令，框架页的边框就会显示出来。将鼠标放置在最上面的框架边框上，鼠标变成形状后拖曳边框到合适位置，将浏览器拆分为上下两个窗口。按住【Alt】键将鼠标放在要拆分的框架窗口内单击，鼠标移至边框上变成形状拖曳，可继续将

5、框架进行水平拆分为左右两个窗口。方法三：自定义创建框架框架页的选择单击【窗口】/【框架】执行菜单命令可打开【框架】面板。黑色粗线条围起来的是框架集（Frameset）灰色线条围起来的是(Frame)设置框架的属性框架建立好后就可以在其【属性面板】对框架的样式进行设置。如设置边框及颜色，是否要滚动条，框架窗口的大小等。框架布局网页该网页将浏览器窗口分割成三个部分：分别是上、左下、右下3个框架。这种框架称为嵌套结构框架指定框架页的超链接为了确定超链接网页在指定的目标框架中显示必须为框架命名设置链接的目标窗口浮动框架浮动框架是一种可以嵌入网页的特殊框架。与一般框架不同，它不以框架

6、集为基础，可以插入到任何网页中。属性描述src文件的路径，表示浮动框的源文件width、height浮动框架区域的宽与高Scrolling当src指定的文件在区域内显示不完时，是否滚动FrameBorder浮动框架的宽度Name框架的名称，用来进行识别Iframe标记的常用属性课后练习创建如图所示的框架结构网页，上部为固定的导航区，左边栏目为网页导航区，右边为信息内容区。