[工程科技]Dreamweae布局与框架.ppt

第7章 Dreamweaver中 布局和框架的应用,布局表格和布局单元格 使用布局视图 1.切换到布局视模式的方法是： 在“插入”面板中的“布局”标签中，单击“布局模式”按钮，如图所示。 布局模式”按钮 在布局面板上，有两个较为重要的按钮，一个是“布局表格”按钮，可以让用户像绘图一样在页面里绘制表格，进行表格布局；另一个是“绘制布局单元格”按钮，可以在表格中直接绘制单元格。,创建布局表格和布局单元格 1、绘制布局表格 具体操作步骤如下： 开启布局模式，然后在布局面板上单击“布局表格”按钮。然后在文档窗口中绘制表格，如下图所示。,图 绘制表格,表格外边框呈绿色，拖动表格的边框可调整它的大小，或在下面的属性面板中调整宽和高的参数。 若要绘制多个表格，不必每次都点击布局表格按钮，只需在绘制过程中按Ctrl键即可。当绘制多个表格时，表格间不可相互重叠，但可以层层嵌套。布局表格中不可直接插入网页元素（图像和文字等），需要在布局表格中插入布局单元格。,2、绘制布局单元格 一般来说，单元格是包含于表格中的，所以似乎必须先绘制表格，然后再在里面绘制单元格。在布局模式下并非如此，在这里可以直接绘制布局单元格，Dreamweaver会自动创建布局表格，其宽度和文档窗口大小一致。绘制布局单元格的具体步骤如下： 在布局模式下，单击“布局单元格”按钮，如图所示。,布局模式下的“布局单元格”按钮 将光标放到绘制单元格的位置，按下并拖动鼠标，就完成布局单元格的绘制。,将布局转换为表格 绘制完成后，在布局面板中按下“标准模式”按钮，将布局模式的表格转换为标准模式的表格，如下图所示。我们可任意调整表格，也可切换回布局模式继续绘制。,图 将布局模式转换为标准模式,添加内容 在布局视图中可以将文本、图像和其他内容添加到布局单元格中，就象在标准视图中将内容添加到表格单元格一样。 单击您要添加内容的单元格，然后键入文本或插入其他内容。 【知识拓展】可以将内容插入布局单元格中，而不是布局表格的空白（灰色）区域，因此要添加内容，必须先创建布局单元格。 如下图所示：,图 在布局模式下输入内容,建立框架 框架在网页设计中，可以将一个浏览器窗口分成多个独立的小窗口，而且在每个小窗口中，可以分别显示不同的网页，达到在浏览器中同时浏览不同网页的效果。 使用框架可以非常方便地完成导航工作，而且各个框架之间不存在干扰问题，所以框架技术一直被普遍应用于页面导航。,1、框架结构 框架的基本结构主要包括两部分： 框架集 框架 它主要是利用标签和标签来定义的。,框架集是在一个文档内定义一组框架结构的HTML网页，它定义了网页显示的框架数、框架的大小、载入框架的网页源和其他可以定义的属性，用标签来定义一个窗口框架。,框架是指在网页上定义的一个显示区域，用标签来定义窗口框架中的子窗口的内容。 在使用了框架集的页面中，页面的标记被标记所取代，再通过标记定义每一个框架。,2、框架的基本结构 ,3、框架分割方式 左右分割窗口 采用cols属性，在垂直方向上分割窗口。 结构如下： . ,左右分割框架实例,程序代码, 左右分割窗口 ,上下分割窗口 采用rows属性，在水平方向上分割窗口。 结构如下： . ,上下分割框架实例,程序代码, 上下分割窗口 ,嵌套分割窗口 一个浏览器窗口可以既左右分割，又上下分割，这种窗口就是嵌套分割窗口。 ,上下分割框架实例,程序代码, 嵌套分割窗口 ,窗口框架设置 1、框架集属性 水平/垂直分割窗口属性rows/cols 语法： 参数值可以用数字，百分比和剩余值及这3种方式的混合方式来表示。,设置窗口框架宽度属性border 属性border,用于设定分割窗口的框架宽度。 语法： 设置边框颜色属性bordercolor 属性bordercolor,用于设定框架边框的颜色。 语法： ,设置框架隐藏属性frameborder 该属性用于设定是否显示框架。 标签：控制窗口框架的所有子窗口 标签：控制该标签所代表的子窗口 语法： value取值0(不显示边框)或1(显示边框),框架集属性网页实例,程序代码, 框架集边框宽度、边框颜色和边框显示属性 ,2 、框架窗口属性 (1) src属性 用于设定框架显示的文件路径 语法： (2) name属性 用于设定框架窗口的名称 语法： 框架名必须以字母开头，必须是单个单词；区分大小写；允许使用下划线，不允许使用空格、句点和连字符。,(3) scrolling属性 用于设定该窗口是否显示滚动条。 语法： value值有3个：yes、no和auto（默认） (4) noresize属性 用于设定用户能否自行调整框架窗口的大小。 语法： ,(5) marginwidth属性 用于设定框架中的内容与框架边缘的左右距离 语法： (6) marginheight属性 用于设定框架中的内容与框架边缘的上下距离 语法： ,框架窗口属性实例,程序代码, 框架窗口属性 ,浮动窗口 浮动框架是在浏览器窗口中可以嵌套子窗口，在其中显示网页的内容。在HTML中通过标签来实现。标签的属性和标签的属性基本相同。 语法： ,浮动窗口实例,程序代码, 浮动窗口 ,框架与超链接 使用框架的一个重要目的就是不同的框架中显示不同的页面。 在标签中name属性定义了窗口的名称，在标签中target属性指定链接文字出自哪个窗口。 语法： ,普通框架与超链接实例,1.普通框架与超链接,首页程序代码, 普通框架与超链接 ,左框架超链接代码, 查看图片 你想了解北京奥运会场地 国家体育场 北京科技大学体育馆 ,右框架超链接代码, 普通框架与超链接 国家体育场 建设地点：奥林匹克公园 建筑面积（万