Dreamweave布局与框架.ppt

第7章 Dreamweaver中 布局和框架的应用 布局表格和布局单元格 使用布局视图 1.切换到布局视模式的方法是： 在“插入”面板中的“布局”标签中，单 击“布局模式”按钮，如图所示。 布局模式”按钮 在布局面板上，有两个较为重要的按钮， 一个是“布局表格”按钮，可以让用户像绘图 一样在页面里绘制表格，进行表格布局；另一 个是“绘制布局单元格”按钮，可以在表格中 直接绘制单元格。 创建布局表格和布局单元格 1、绘制布局表格 具体操作步骤如下： 开启布局模式，然后在布局面板上单击“布局表 格”按钮。然后在文档窗口中绘制表格，如下图所示 。 图图 绘制表格绘制表格 表格外边框呈绿色，拖动表格的边框可调整 它的大小，或在下面的属性面板中调整宽和高的 参数。 若要绘制多个表格，不必每次都点击布局表 格按钮，只需在绘制过程中按Ctrl键即可。当绘 制多个表格时，表格间不可相互重叠，但可以层 层嵌套。布局表格中不可直接插入网页元素（图 像和文字等），需要在布局表格中插入布局单元 格。 2、绘制布局单元格 一般来说，单元格是包含于表格中的，所以似乎 必须先绘制表格，然后再在里面绘制单元格。在布局 模式下并非如此，在这里可以直接绘制布局单元格， Dreamweaver会自动创建布局表格，其宽度和文档窗 口大小一致。绘制布局单元格的具体步骤如下： 在布局模式下，单击“布局单元格”按钮，如图 所示。 布局模式下的“布局单元格”按钮 将光标放到绘制单元格的位置，按下并拖 动鼠标，就完成布局单元格的绘制。 将布局转换为表格 绘制完成后，在布局面板中按下“标准模式 ”按钮，将布局模式的表格转换为标准模式的表格 ，如下图所示。我们可任意调整表格，也可切换回 布局模式继续绘制。 图 将布局模式转换为标准模式 添加内容 在布局视图中可以将文本、图像和其他内容添加 到布局单元格中，就象在标准视图中将内容添加到表 格单元格一样。 单击您要添加内容的单元格，然后键入文本或插 入其他内容。 【知识拓展】可以将内容插入布局单元格中，而不是 布局表格的空白（灰色）区域，因此要添加内容，必 须先创建布局单元格。 如下图所示： 图 在布局模式下输入内容 建立框架 框架在网页设计中，可以将一个浏览器窗口分成 多个独立的小窗口，而且在每个小窗口中，可以分别 显示不同的网页，达到在浏览器中同时浏览不同网页 的效果。 使用框架可以非常方便地完成导航工作，而且各 个框架之间不存在干扰问题，所以框架技术一直被普 遍应用于页面导航。 1、框架结构 框架的基本结构主要包括两部分： v 框架集 v 框架 它主要是利用标签和 标签来定义的。 框架集是在一个文档内定义一组框架结构的 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.普通框架与超链接 首页程序代码 普通框架与超链接 左框架超链接代码 查看图片 你想了解北京奥运会场地 国家体育场 北京科技 大学体育馆 右框架超链接代码 普通框架与超链接 国家体育场 建设地点：奥林匹克公园 建筑面积（万M2）：25.8 座席数：9100