网页设计(CS5)-第3讲-向网页中添加元素.ppt

1、表格的插入 1．表格概述 2．表格结构 3．插入表格 1.1. 表格概述 表格是网页设计制作中不可缺少的元素，它不仅用于页面上的数据显示，还可以用来设计页面框架。 使用表格可以将图片、文本、数据和表单等元素有序地显示在页面上，使得页面看起来简洁明了、编排整齐。用表格设计的页面，框架布局清晰，在不同平台、不同分辨率的浏览器里都能保持其原有的布局，并且在不同的浏览器平台都具有较好的兼容性，所以表格是网页中最常用的排版方式之一。 1.2. 表格结构 表格是由一个或多个单元格组成的集合。表格中横向的一排称之为行，纵向的一排称之为列，中间的单个小方块称之为单元格。单元格与单元格之间的距离叫做单元格间距，单元格内容到单元格边框之间的距离叫边距。每个单元格的四周称之为单元格边框，整个表格的四周称之为表格边框，下图展示了表格各部分的对应关系。 2、表格的设置 1．表格选取 2．设置表格属性 3．拆分表格 4. 合并表格 2.1. 表格的选取 表格的选取包括整表的选取、单元格的选取、表格行与列的选取。 整表的选取：只需要将鼠标指针移到表格的边框，当鼠标指针右下角出现图标时单击鼠标左键即可选中整个表格；或者先在表格内任意处单击一次鼠标左键，然后在标签选择器上单击“table”标签，也可选中这个表格。 单元格的选取：按住Ctrl键，然后单击某一单元格，即可选中该单元格；或者先在单元格内单击一次鼠标左键，然后单击状态栏上的“td”标签，也可选中该单元格。 表格行与列的选取：将鼠标指针移到某一行的左侧，当鼠标指针变成形状时，单击鼠标左键，即可选中该行；将鼠标指针移到某一列的顶部，当鼠标指针变成形状时，单击鼠标左键，即可选中该列。 2.2. 设置表格的属性 先选中表格，然后在【属性】面板中设置整个表格的边框、间距、背景颜色、边框颜色等，也可以针对单个、某一行、某一列单元格分别进行设置 。 2.3. 拆分表格 拆分：单击要拆分的单元格，在【属性】面板中单击拆分单元格按钮 ，在弹出的【拆分单元格】对话框中设置拆分行或列，并设置要拆分成的行数或列数，然后单击按钮即可将单元格拆分成多行或多列 ，如下图所示。 2.3. 合并表格 选中需要合并的多个连续的单元格后，在【属性】面板中单击合并单元格按钮 ，将多个单元格合并，如下图所示。 3、用表格设计页面 1．嵌套表格 2. 表格化的页面结构 3．用表格规划页面结构 4. 用表格设计页面 3.1. 嵌套表格 简单地说，嵌套表格就是一个表格中含有另一个表格。引入嵌套表格有3个方面的原因。 网页的排版有时会很复杂，在外部需要一个表格来控制总体布局，如果内部排版的细节也通过总表格来实现，容易引起行高列宽等的冲突，给排版工作带来困难。 其次，浏览器在解析网页的时候，是将整个网页下载完毕之后才显示表格，如果不使用嵌套，表格非常复杂，浏览者需要等待很长时间才能看到网页内容。 在嵌套表格中，可以利用表格的背景图像、边框、间距和边距等属性得到漂亮的边框效果，制作出精美的网页。 创建嵌套表格的操作方法很简单，先插入总表格，然后将鼠标光标置于要插入嵌套表格的单元格中，继续插入表格即可。 3.4. 用表格设计页面 页面的框架设计好之后就可以填充相应的内容了，如下图所示，具体操作参见范例解析4.3.3。 第2讲·作业 THANKS ! Dreamweaver CS5 第3讲·向网页中添加元素（2） 1 在网页中添加文本 编辑文本 在网页中添加图片 4 编辑图像 图文混排 鼠标经过更换图片特效 第3讲·向网页中添加元素 Dreamweaver CS5 Dreamweaver CS5 第3讲·向网页中添加元素（2） 1 多媒体的应用 编辑文本 在网页中添加图片 4 插入表格 图文混排 鼠标经过更换图片特效 第3讲·向网页中添加元素 Dreamweaver CS5 第四讲 用表格设计页面 1、表格插入 2、表格的设置 3、用表格设计页面 1.3. 插入表格 在【常用】插入栏中单击表格按钮 ，打开【表格】对话框 ，设置【行数】、【列数】、【表格宽度】等参数后单击“确定”按钮即可 。 网页设计·第2讲 在网页中添加文本 1 3.2. 表格化的页面结构 一个页面的主要骨架结构，大体可分为如下几部分：Container（所有内容）、Logo（标志）、Header（头部）、Navigation（导航栏）、Main Content（主要内容）、