Download presentation
Presentation is loading. Please wait.
1
课题：表格布局 授课教师：陈树胜
2
项目5 表格布局 学习目标：了解表格在网页设计中的用途 掌握表格的基本操作 利用表格布局页面 任务要求：
项目5 表格布局 学习目标：了解表格在网页设计中的用途 掌握表格的基本操作 利用表格布局页面 任务要求： 1、分析示例页面，按照教材步骤完成该网页制作 2、在网页中插入表格状内容
3
项目分析 要设计一个页面，就要涉及很多页面元素，例如文本、图像、动画、视频等。要将这些元素有机地组织起来，达到满意的浏览效果，就必须把这些元素放在合适的位置。这就是页面元素的定位，也称页面布局。 最常用的页面布局方式就是按事先设计的版面，采用表格对页面进行区域划分，组织页面元素。 表格除用于页面布局外，也用于在网页中组织大量的数据，使数据展现清晰明了
4
项目内容 分析网页布局，设计表格 绘制（插入）表格，设置基本属性 必要的表格嵌套 适当进行单元格的合并与拆分
向单元格中添加元素，进行常规编辑
5
项目实施步骤 1、创建站点文件夹——复制素材——创建站点 2、第一个表格：1行2列 3、第二个表格：1行3列
4、左侧单元格：再嵌套一个26行1列的表格，输入内容，设置分隔细线 5、中间单元格：顶端对齐，先嵌套一个2行1列的表格，再嵌套一个2行3列的表格，利用单元格的合并与拆分实现 6、右侧单元格：顶端 对齐，嵌入一个6行1列的表格，实现上部效果；再嵌入一个4行2列的表格，实现中部效果；最后实现下部效果。
6
操作要点 几个概念： 1、表格宽度：指定绝对像素值或相对窗口宽度的百分比 2、边框粗细：像素值；默认值：1；当用表格组织页面元素时，一般不需要显示出其边框，故常设置为0 3、单元格边距：单元格中的内容与单元格框线之间的距离。默认值：1 4、单元格间距：单元格之间的距离。默认值：2
7
一个技巧：制作两个栏目之间的细线 背景单元格颜色：#026ab1 本身背景颜色： #3084c2
将该单元格高度设为1，并删除其中内容（空格） 切换到拆分（代码）状态，找到相应代码段。 初始代码：<td > </td> 改为<td height="1" bgcolor="#026ab1"></td> 问题：是否可以用插入水平线的方式达到此效果？
8
本项目涉及的主要HTML代码 <table width="775" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="images/public_top_action.gif" width="374" height="92" /></td> <td><img src="images/public_top_right.jpg" width="398" height="92" /></td> </tr> </table> 首标签<table>和尾标签</table>分别表示一个表格的开始与结束。这是不难理解的。 tr是“table row（表格行）”的缩写，用于表示一行的开始和结束。这也容易理解。 td是“table data（表格数据）”的缩写，用于表示行中各个单元格（cell）的开始和结束
9
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#3084c2"> <tr> <td bgcolor="#ff6600"> 首页</td> </tr> <td height="1" bgcolor="#026ab1" ></td> <td> 新闻中心</td>
10
<tr> <td colspan="2"><div align="right"><img src="images/report.gif" width="120" height="66" /></div></td> </tr> colspan是“column span（跨列）”的缩写，用来指定单元格横向跨越的列数，合并列。 <td rowspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0"> rowspan的作用是指定单元格纵向跨越的行数,合并行
11
项目小结和实习内容 1、表格在网页设计中的作用（布局、展示数据）
2、表格的插入、属性设置及常规编辑（行列、两种宽度设置、边框、边距、间距、行高、列宽、单元格的合并与分解等） 3、利用表格设计出复杂的页面 4、下次课实习内容：按教材内容和本次课的演示步骤完成项目示例网页的制作，记录重要步骤和关键操作环节
Similar presentations
