04-表格处理2.ppt

1、网页制作基础教程(dreamweaver版本8.0 )、第4章表格布局页，在本章中，重点介绍表格的基本操作、表格布局的应用(标准视图下)、表格视图的布局、在表格和单元中输入各种网页要素的方法、表格格式化等操作方法、第四章表格布局页、4.1制作网站相册初识表4.2表使用基本操作4.3网页的页布局4.4表其他视图4.5表布局页4.6实战演习我的第一页附加：制作流行表、4.1制作网站相册初识表、4.1 4.1制作网站相册初识表，4.1.2个案研究【制作网站相册】指令制作的Photo.htm网页采用表格版面设计，将图像的缩略图排列在网页上。 表的修改和美化表的插入矩阵分割添加和删除合并单元等的基本操作

2、，4.1网站相册初识表的制作，4.1.3实现步骤1，网站相册的制作方法： 1，将制作相册的图像放入源图像文件夹，同时制作空的目标文件夹，Shi 2、运行“命令|创建站点相册”命令3，并在“创建站点相册”对话框中键入适当的残奥仪表即可。 4.1.3步骤2，实现网站相册的修改方法：选择“页面属性”，可进行文字、背景、颜色、表格的修改。 三、美化相册表格选择“指令|格式表格”指令。 4.1制作网站相册初始识别表，4.2表的基本操作，4.2.1插入表【插入】【表】指令，或者【插入】栏的【常用】类型的【插入表】按钮，按照理解单元的顺序点击，在中央一行的列表单元格每个值都是图：4.2表格的基本操作、表格、

3、单元格：4.2表格的基本操作、4.2表格的基本操作，单击表格边框、单元格边框、间距：以了解填充。 单元格边框和内容之间的距离是填充的。 4.2表格的基本操作、表格由三个组件组成：行、列和单元格。 1 .整个表2的选择、行或列3的选择、单元格的选择、4.2.2表和单元格的选择、4.2表的基本操作、1、选择表的鼠标拖动。4.2.3调整表格大小、4.2基本操作、2、调整行和列宽度、将鼠标置于列上，出现向下箭头时，单击可选择列。 在“属性”面板中，可以设置选定列的宽度和高度。 4.2表的基本操作，4.2.4表和单元格的属性设定表属性设定单元格属性，4.2表的基本操作，4.2.5追加/删除矩阵是表【属性

4、】面板追加和删除表的行和列是用【修改】菜单完成的4.2.6单元格的连接和分割1，连接单元格按Ctrl键，指向单元格4.2表格的基本操作，2，分割单元格在单元格内单击，选择单元格。 单击“属性”面板中的“将单元格拆分为行或列”，然后设置拆分方法。4.2表的基本操作、分割后的效果、4.2表的基本操作、4.2.7单元格的复制、粘贴、移动和清除，在设计网页时，一次可以复制、粘贴、移动和清除一个或多个单元格。 操作方法是在网页编辑窗口中选择要复制的对象复制，然后按Ctrl C键，或者按【编辑】【复制】命令。 按下Ctrl X键或移动【编辑】【剪切】指令。 按下贴上Ctrl V，或按下【编辑】【贴上】指令

5、。 按住Ctrl键拖动可完成复制操作。 直接拖动可完成对象的操作。 按Delete键或清除【编辑】【清除】指令。4.2表的基本操作，4.2.8表的嵌套表是表内的表。 如果在单元格中插入表格，则形成嵌套表格。 在当前表格所在的单元格中插入光标，选择【插入】【表】命令，或者关于【插入】栏的【常用】类型的【表插入】按钮、4.3页的页面布局、4.3.1页面布局类型“”4.3.2第一画面，一般为800600 IE安装后的默认状态(即工具栏地址栏等不变)下，IE窗口的可见部分为778px435px .4.3页的页面布局，但第一画面可能小于上述435px。 考虑到这一点，水平导航栏优于垂直导航栏。 4.3页

6、的页面布局，4.3.4什么样的布局最好？ 如果内容不太多，说明性的东西比较多，标题正文类型可以考虑那些框架结构的共同特征之一，阅览方便，速度快，但结构变化不灵活，企业网站想展示企业的形象，或者个人主页采用个人风格封面性优先。Flash型更灵活，好的Flash丰富了网页，但是不能表现太多的文字信息。 4.3页的页面布局，1，页面的主要内容： LOGO标志Banner导航栏的页面内容版权声明，4.3页的页面布局，1， 标题区域设计若干国际尺寸的Banner:46860 (全尺寸Banner LOGO: 16771 2)，导航栏形式的导航栏，在网页设计中，直接连接到网页的使用方便性，网页在导航栏中，

7、有的是横向排列的，有的是纵向排列的。 4.3网页布局，2，网页结构分析这是主页的简单结构，由三个表格组成。 将导航菜单放置在第一个表格、第二行第一列、第一行LOGO和Banner以及第二行。 第二个表单用于放置网页内容。 第三种形式输入版权信息。 4.3网页的页面布局，常见的栏结构，还有3栏、4栏。 以下，4.3页的页面布局、三、表的初始设定可选择“宽768高430”、“宽776高430”等的近似值作为以800600分辨率在整个画面上显示的页面。 以像素为单位的表格，往往使表格居中对齐。 选择表格，然后在“属性”面板中选择“居中对齐”。 四、表格布局要领完全下载一个表格的内容，在IE上显示。

8、如果页面文件很小，则只能有一个表放置内容。 如果页面文件大，则从上到下放置相同宽度的几个表，分别放置不同的内容，如图所示，4.3页的页面布局，使用4.4表的其他视图，Dreamweaver 8是标准视图、扩展视图、布局视图通常使用标准视图，可以从插入栏的“布局”类别切换到布局视图或扩展视图。 中的组合图层性质变更选项。 按一下版面配置(layout )切换至版面配置(layout )检视，并在4.4中使用表格的其他检视。 4.4.1扩展视图扩展视图的主要作用是：临时为文档中的所有表添加单元格边距和间距，然后添加表边框，以便于编辑。 4.4.2版面视图使用、4.4表格的其他视图，以版面视图方式使

9、用表格进行web排版设定修订更直观且方便。 您可以自由拖曳滑鼠来绘制任意的表格配置，并且可以自由移动。使用、4.4表的其他视图创建4.4.3布局表和布局单元1，绘制布局表2，绘制布局单元3，移动布局表和布局单元，使用、4.4表的其他视图创建1，布局表和布局单元插入条形“布局”“绘制布局单元格”，然后拖动指针以创建布局单元格。 插入栏“布局”“绘制布局表”，然后拖动指针以创建布局单元。 绘制嵌套布局表：在另一个布局表中绘制一个布局表，以创建嵌套表。 绘制Ctrl布局单元格(或表格)时，将连续创建布局单元格(或表格)。 2、使用4.4表格的其他视图移动布局单元格和表格，并调整它们的大小：选择单元格

10、，然后按住Ctrl键并单击单元格中的任意位置，可以在单元格周围显示选择控点。 拖动选择控点以调整单元格大小。 2、使用4.4表格的其他视图移动布局单元格和表格，调整它们的大小和布局表格的大小：单击表格顶部的选项卡选择表格。 选择控制点出现在表格周围。 拖动选择控制点来调整表格的大小。 2、移动布局单元格和表格，按住布局单元格：ctrl键，同时单击单元格中的任意位置，然后将单元格拖动到布局表格中的其他位置，4.4使用表格的其他视图。 按方向键一次移动一个像素。 Shift箭头键每次移动10个像素。 2、使用表格、4.4的其他视图移动布局单元格和表格，要调整它们的大小并移动布局表格：请单击表格顶部

11、的选项卡选择表格。 选择控制点出现在表格周围。 将表格拖到页面上的其他位置。 (仅当布局表嵌套在另一个布局表中时，才能移动布局表。) 4.4.4布局表格和单元格属性1、布局表格属性2、布局单元格属性、4.4表格布局应用页面布局情况4.5.1情况概述本示例使用表格进行页面2 3表细线的制作。4.5应用表格布局页面布局情况，信息区域是三个嵌套表格的其他区域都是宽度一致的独立表格，4.5.2情况分析，4.5.3应用表格布局页面布局情况，4.5.3实现步骤1，设计页眉4.5可以应用显示布局页面布局情况来修改导航条区域T 2:217显示宽度778栏之间的分隔符号的使用，以及其他特殊符号。 第二行用于间隔

12、。 4.5应用显示布局页面布局情况，设计信息区T3:13显示宽度778 .左右内容区T31:21显示，宽度100%，显示框1，白色。 第一格的高度为15，第二格的高度为163，单元格框为1，绿色。 第1帧：背景图像，输入列名第2帧：输入列的具体内容是将T31表复制到左、右内容区域。4.5适用表格布局的页面布局情况、三、设计信息区域2 .设计主内容区域T32:23表格、宽度100%、框线0、空白0、间隔0第一行：设定各单元背景图像，输入栏名称第二行：合并第二行T321 :在分割T321为2列，第一列复印和T32表，重命名和内容追加，4.5应用表布局页面布局情况，4，设计着作权区T4:21表，宽度778，边框0，空白0，间隔0第一行：插入水平线第二行：输入关联版本信息，4.4例为了容易看到效果，pip 单元格填充和边框设置为0。 单元格填充与不在边框中输入数值的效果相似。 附件：创建流行表单，选择表单，并将表单背景颜色设置为黑色。 可以做出10像素宽的表。 实际上将间距的颜色设定为黑色。 单元的背景为白色，附加：制作流行表，表的间隔改为1制作细线表，附加：制作流行表，