Dreamweaver 8中文版网页制作 第4讲用表格设计页面.pptVIP

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.2. 表格化的页面结构 一个页面的主要骨架结构，大体可分为如下几部分：Container（所有内容）、Logo（标志）、Header（头部）、Navigation（导航栏）、Main Content（主要内容）、Sidebar（侧栏）、Footer（页脚），如右图所示。这些部分都可以看成由一个个表格组成的。 Container：指页面包含的所有内容，所有的Web页面都用一个Container，主要为了包含一些页面元素。 Header：网页的头部，严格意义上来说，Header并不是一个特定的元素，它更多用于放置Logo、导航栏等常见元素。 Logo：Logo是一个专用标志，用于表明网站的身份和品牌。一般将Logo放在Header的左上角，使访问者第一眼就能看到。 Navigation：导航栏部分。页面导航是最重要的元素之一，访问者一般都使用它来访问网站中的其他内容，为了便于用户使用，容易找到，就放在顶端附近。 Main Content：主要内容部分。这是网站的核心，它是Web页面的焦点。 Sidebar：侧栏部分。主要放置一些次要内容，如广告、站点搜索、订阅链接、联系方法等，这个内容不是必需的。一般将Sidebar放在页面右侧，也可以将其放在左侧或两边，只要不干扰主要内容的浏览就行，Sidebar往往是用纵向导航。 Footer：页脚部分。Web页面的尾部总会有一个页脚，这是Web页面的结束部分。和Head