Dreamweave布局与框的架.pptVIP

第7章 Dreamweaver中 布局和框架的应用; 布局表格和布局单元格 使用布局视图 　1.切换到布局视模式的方法是：　　在“插入”面板中的“布局”标签中，单击“布局模式”按钮，如图所示。  布局模式”按钮 　　在布局面板上，有两个较为重要的按钮，一个是“布局表格”按钮，可以让用户像绘图一样在页面里绘制表格，进行表格布局；另一个是“绘制布局单元格”按钮，可以在表格中直接绘制单元格。 ;创建布局表格和布局单元格 1、绘制布局表格 具体操作步骤如下： 开启布局模式，然后在布局面板上单击“布局表格”按钮。然后在文档窗口中绘制表格，如下图所示。; 表格外边框呈绿色，拖动表格的边框可调整它的大小，或在下面的属性面板中调整宽和高的参数。　　若要绘制多个表格，不必每次都点击布局表格按钮，只需在绘制过程中按Ctrl键即可。当绘制多个表格时，表格间不可相互重叠，但可以层层嵌套。布局表格中不可直接插入网页元素（图像和文字等），需要在布局表格中插入布局单元格。 ;2、绘制布局单元格 　　一般来说，单元格是包含于表格中的，所以似乎必须先绘制表格，然后再在里面绘制单元格。在布局模式下并非如此，在这里可以直接绘制布局单元格，Dreamweaver会自动创建布局表格，其宽度和文档窗口大小一致。绘制布局单元格的具体步骤如下：　　在布局模式下，单击“布局单元格”按钮，如图所示。; 布局模式下的“布局单元格”按钮 　　将光标放到绘制单元格的位置，按下并拖动鼠标，就完成布局单元格的绘制。;将布局转换为表格 　　 绘制完成后，在布局面板中按下“标准模式”按钮，将布局模式的表格转换为标准模式的表格，如下图所示。我们可任意调整表格，也可切换回布局模式继续绘制。 ;添加内容 　　在布局视图中可以将文本、图像和其他内容添加到布局单元格中，就象在标准视图中将内容添加到表格单元格一样。　　单击您要添加内容的单元格，然后键入文本或插入其他内容。 【知识拓展】可以将内容插入布局???元格中，而不是布局表格的空白（灰色）区域，因此要添加内容，必须先创建布局单元格。 如下图所示：;图 在布局模式下输入内容; 建立框架 框架在网页设计中，可以将一个浏览器窗口分成多个独立的小窗口，而且在每个小窗口中，可以分别显示不同的网页，达到在浏览器中同时浏览不同网页的效果。 使用框架可以非常方便地完成导航工作，而且各个框架之间不存在干扰问题，所以框架技术一直被普遍应用于页面导航。 ; 1、框架结构 框架的基本结构主要包括两部分： 框架集 框架 它主要是利用frameset标签和frame标签来定义的。; 框架集是在一个文档内定义一组框架结构的HTML网页，它定义了网页显示的框架数、框架的大小、载入框架的网页源和其他可以定义的属性，用frameset标签来定义一个窗口框架。; 框架是指在网页上定义的一个显示区域，用frame标签来定义窗口框架中的子窗口的内容。 在使用了框架集的页面中，页面的body标记被frameset标记所取代，再通过frame标记定义每一个框架。;2、框架的基本结构 html head title /title /head frameset frame src=“url地址” frame src=“url地址”… /frameset /html ;3、框架分割方式 左右分割窗口 采用cols属性，在垂直方向上分割窗口。 结构如下： frameset cols=“value，value，……” frame src=“url” / frame src=“url” / …... /frameset;左右分割框架实例;程序代码;上下分割窗口 采用rows属性，在水平方向上分割窗口。 结构如下： frameset rows=“value,value,…….” frame src=“url” / frame src=“url” / …... /frameset ;上下分割框架实例;程序代码;嵌套分割窗口 一个浏览器窗口可以既左右分割，又上下分割，这种窗口就是嵌套分割窗口。 frameset cols=“value,value,…….” frame src=“url” / frameset rows=“value,value,…….” frame src=“url” / frame src=“url” / /frameset /frameset;上下分割