07嵌套表格教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5） .ppt

07嵌套表格教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5）表格嵌套静态网站制作教学资源课件静态网站制作教学资源课件表格嵌套 表格嵌套是为了达到特殊的效果而在单元格里再插入一个表格。页面的外部需要一个总表格来控制总体布局，可内部排版的细节如果也通过总表格来实现，就容易引起行高列宽等的冲突，给表格的制作带来困难，同时加大 浏览器分析页面的难度。用表格布局页面的时候，应该用总表格负责整体排版，由嵌套的表格负责细节性版面设计。通过嵌套表格，利用表格的背景图像、边框、单元格间距和单元格边距等属性可以得到漂亮的边框效果，制作出精美的图文网页。实例实例6：在练习3的基础上，利用嵌套表格制作如图所示的页面排版效果。注意：应先将图片文件复制到站点的images文件夹中，图片文件可以在资料包“实例素材chapter2shili6_pic”文件夹中找到。1、将光标放置表格第四行左侧单元格中，设置该单元格的宽度是170px,背景色是“#98FEEA”，水平居中对齐，垂直顶端对齐。2、插入一个1行1列的表格，宽度160像素，边框为0，单元格边距为10px。3、在该表格中再插入一个4行1列的表格，宽度150px，边框为0，单元格边距为3px,，拖动选中所有的单元格，设置背景色为#C8EBFF，水平居中对齐。4、依次插入四个导航按钮图片。实例实例7：制作如图所示的个人网站的小站长介绍页面的正文部分。1.插入一个一行一列的表格，宽度：778px，单元格边距：0，单元格间距：0。2.在属性面板中设置单元格，高度：330px。3.选择属性面板的“CSS”选项卡，单击“编辑规则”按钮，新建样式“.bj”,设置背景图像为：beijing.gif。4.在新建的表格中再插入一个6行1列的表格。宽度：60%，单元格边距：0，单元格间距：0。5.在表格属性面板中设置新插入的表格对齐方式：右对齐。