第7章 利用框架布局页面.pptx

网页设计与制作《网页设计与制作》任正云赖玲严永松编著中国水利水电出版社2011.121

7.1框架与框架集的概念7.2创建框架7.3框架集的基本操作7.4设置框架集与框架的属性7.5在框架中使用链接7.6实践技能训练----制作“网上书店”的主页第7章利用框架布局页面2

7.1框架与框架集的概念框架是设计网页时经常用到的一种布局技术，利用框架可以将浏览器的窗口随意地分成多个窗口，在每个子窗口中可以显示不同的网页文档。通过子窗口中网页链接的目标窗口将指定网页显示在指定的子窗口中，在帮助页面中常常采用此功能。3

7.2创建框架1.自定义框架（1）新建一个网页文档，单击“插入”→“HTML”→“框架”，根据子菜单中的相应命令或者单击布局面板中需要预定义的框架结构图标创建框架。（2）将鼠标移到文档窗口的边界线上，当鼠标变成双向箭头时拖动鼠标至相应位置，即可创建一条边框线，如图7-2所示，拖出竖直边框线。（3）按下Alt键，拖动一个框架的边框线，可以对框架进行垂直或水平划分。2.直接插入预定义框架在“插入”面板中的“布局”标签中有框架对象，选择单击“插入”→“布局”，单击“框架”按钮就可以打开框架的下拉菜单，DreamweaverCS5提供13种框架。4

7.3框架集的基本操作1.框架集和框架的选择框架和框架集是两个完全分离的HTML文档，在文档窗口中或者使用“框架”面板都可以对框架或者框架集进行选择。框架面板的主要用途是显示框架和选择框架，如图7-5所示，可以看到，框架集都有一个较粗的立体边框包围，而每一个框架都有一格细边框。图7-4新建框架集文档图7-5“框架”面板在框架面板中用鼠标单击某框架内部或单击框架集的边框，可以在页面内选中对应的框架或框架集。5

7.3框架集的基本操作2.设置框架属性框架可以创建、选择也可以删除。特别是使用DreamweaverCS5默认提供的预定义框架集的时候，用户需要对个别不需要的框架进行删除操作。方法很简单，只要在页面编辑窗口中，用鼠标将框架边框拖曳至框架集边框上即可。3.框架和框架集的保存因框架网页包含多个网页文件，因此要对每一个框架的文档进行保存。（1）保存框架文件：要保存其中一个独立的框架文件，可以先单击该框架内部，然后执行菜单“文件”→“保存”命令。（2）保存框架集：若只保存框架集，可执行菜单“文件”→“保存框架页”或“文件”→“框架页另存为”即可。6

7.4设置框架集与框架的属性1．设置框架集属性通过框架面板选中框架或框架集，通过相应的属性面板可以设置：（1）框架名称。指链接的target属性或脚本在引用该框架时所用的名称。名称中不能使用“.”、“-”等特殊符号货空格，而且必须以字母开头。（2）源文件。指定在框架中显示的源文档。可以单击“浏览”按钮来选择文件或直接插入文件名称。（3）滚动。指定在框架中是否显示滚动条。包括“是”、“否”、“自动”、“默认”四项，分别表示显示、不显示、当空间不够时自动显示和由浏览器决定。大多数浏览器都默认为“自动”。（4）不能调整大小。当浏览带有框架的网页时，会发现有些框架的尺寸是可以改变的，而有些不可以。这主要是由“不能调整大小”复选框来控制的，如果选中该选项，那么在浏览该网页时，就不可以在浏览器中改变框架的大小。7

7.4设置框架集与框架的属性1．设置框架集属性（5）边框。框架的使用会影响页面的美观，解决的办法就是隐藏框架边框。每一个框架都有一个“边框”属性，有“是”（显示边框）、“否”（隐藏边框）和“默认值”三个选项。其中的“是”或“否”选项控制边框的显示。只有当临近的所有框架都没有设成“否”时，这条边框才会被隐藏，而其中的“默认”选项表明，该框架的显示情况根据其所属框架集的设置而确定，也就是说该框架继承其框架集的边框属性。（6）边框颜色。“边框颜色”可以设定两个相邻框架之间边框的颜色，这个颜色只是在编辑网页时起作用，在浏览器中浏览时框架的颜色不发生变化。（7）框架的边距。每个页面在页面属性窗口中都有页边距的设置，框架与页面一样，也存在着框架的边距。在框架属性面板的最下方的“边界宽度”和“边界高度”两个文本框可以设置框架边距，如果将数值设置为0，表示页面内容将紧贴框架的边界。8

7.4设置框架集与框架的属性2．设置框架集属性选中框架集，打开框架集属性面板，显示了该框架集的行数和列数，可以进行以下设置：（1）边框。确定在浏览器中查看文档时在框架周围是否应显示边框。要显示边框，则选择“是”；要使浏览器不显示边框，则选择“否”。要允许浏览器确定如何显示边框，则选择“默认值”。对于大多数浏览