六. 布局.ppt

六. 布局 网页“排版”-布局 网页实现布局设计的方法很多，在课程会逐渐简述 1.表格 2.框架 3.DIV+CSS 4.图像设计工具（PS、FW等） 5.其它，如Flash 网页的布局设计、链接、CSS样式表是静态网页中必须掌握的三大内容。 六.表格和布局视图 第5章 在网页中使用表格和框架 1.在页面中使用表格 2.设置表格和单元格的格式 3.编辑表格和单元格 4.使用布局表格和单元格 5.设置布局单元格和表格的格式 6.设置布局视图参数 1.在页面中使用表格 （1）插入表格 百分比和像素的区别 一行只能有一个表格，就是说在表格的右边 不能再有表格 （2）在表格中添加内容 如果插入内容较多时，单元格将自动扩展 1.在页面中使用表格 （3）选择表格元素 ① 选择单个单元格：在单元格中单击鼠标，然后按住鼠标左键不放，同时向相邻的单元格拖动，这是单元格出现黑色边框，表示选中。也可以ctrl键点击单元格。 ② 选择整个表格：单击表格左边线和上边线以外的任意表格线 ③ 选择一行或一列：可将光标移至单元格的左边线或上边线位置，当光标变为→或↓时单击鼠标。如果此时单击并拖动鼠标，则可同时选择多行或多列。 1.在页面中使用表格 ④ 要选择多个连续单元格，可将光标定位于第一个单元格后按下鼠标并拖动，或将光标定位在第一个单元格后，按下shift键单击其对角线上的单元格。 ⑤ 选择多个非连续单元格，使用ctrl键 2.设置表格和单元格的格式 （1）设置表格整体属性 （2）格式化行、列或单元格 当选择行、列或单元格后，进行属性设置 拆分或合并单元格： 合并时单元格区域必须为矩形而且连续 3.编辑表格和单元格 调整表格的整体尺寸、列宽和行高 鼠标拖动（shift键可以等比例调整表格大小） 添加和删除行、列和表格嵌套 可以一次复制和粘贴多个单元格，并且保留单元格的格式，也可仅复制与粘贴单元格的内容。 4.使用布局表格和布局单元格 切换到布局视图，可以在页面中添加布局表格和布局单元格，这些表格和单元格能够帮助用户设计页面布局 布局单元格不能存放在布局表格之外。在创建页面布局时可以在同一个布局表格中放置多个布局单元格，或创建多个布局表格，且布局单元格和布局表格不能相互重叠。同时在布局表格中可以嵌套其它的布局表格，并且在嵌套表格中的布局单元格的长宽变化不会受到外部表格的影响。 4.使用布局表格和布局单元格 在DW CS3、CS4要使用表格模式： “查看”--》“表格模式”-》“布局模式” 可以通过多种手段实现布局，如表格、图像工具、框 架、DIV+CSS，这些都会在课程内容里面逐渐介绍 4.使用布局表格和布局单元格 （1）绘制布局表格和布局单元格 ① 绘制布局表格和布局单元格 先拖动绘制好表格，再绘制单元格。如果没有绘制表格而直接绘制了单元格，页面自动创建一个大的布局表格。 在一空白文档绘制布局表格，表格总能捕捉到页面窗口的左上角 DW可以帮助用户自动捕捉以有的单元边界。如果在绘制布局单元格时使用Alt键，则暂时不会使用自动捕捉功能。 4.使用布局表格和布局单元格 ② 在布局单元格中，既不能再绘制布局单元格，也不能再绘制布局表格，但在布局表格中，既可以绘制布局单元格，也可以嵌套布局表格。 ③ 如果页面已经存在内容，布局表格只能在内容的下方，也就是说表格不能是平行的，不能在布局表格的右边再画布局表格。（一行只能有一个表格） 4.使用布局表格和布局单元格 （2）移动和调整布局表格和单元格 在页面布局中，可以移动或调整单元格或表格的位置和尺寸，在操作时，可以使用网格线做向导辅助移动或调整。 （3）为布局单元格添加内容 绘制布局表格时，表格以灰色填充，表示该区域不能插入内容，因此，必须在表格中创建布局单元格，才能在布局单元格中插入所需要的文本和图像等。在单元格中插入较大元素，单元格尺寸会自动调整。（建议在布局视图绘制好后，切换回标准视图，进行相应的操作) 5.设置布局单元格和表格的格式 （1）格式化布局单元格 选择单元格进行属性设置 添加间隔图像： 当在一个布局单元格中插入相对较大的元素时，单元格宽度的改变会使其它单元格改变大小甚至消失。为了解决问题，可以在每一列中插入间隔图像。 （2）格式化布局表格 5.设置布局单元格和表格的格式 （3）设置布局表格（单元格）列宽度 在布局视图中，设置列宽度有两类：固定宽度和自由 伸缩。自由伸缩时根据浏览器窗口大小自动设置的。 （显示为波浪线） ① 自动伸缩 ② 固定宽度 5.设置布局单元格和表格的格式 ③ 使用间隔图像 间隔图像是透明图像，它不能在浏览器