DreamweaverCS5自学教程-第五课：表格处理.pdfVIP

第五课：表格处理 5-1 插入表格 1、在页面中插入表格的方式 在页面中需要添加表格的地方单击，选择“插入—表格” 或在常用面板中选择“表格”图标 2 、表格设置项 表格宽度设置单位是像素时，表格的宽度是固定的； 单位是百分比时，表格的宽度与浏览器窗口的宽度保持设置的比例，随窗口变化。 3、单元格的边距和间距 边距就是单元格内部内容与单元格 边框的距离 间距就是单元格边框与表格边框之间 的距离 注：如果添加表格式单元格边距和间距空白不填数字，那么系统默认的数字就是单 元格边距为 1，单元格间距为 2。 单元格边距和单元格间距分别为 0 时，表格的边框最细。 5-2 创建数据表格 页眉标题功能的设置可以自动加粗单元格内的字体 设置的辅助功能标题是表格在页面中的标题，摘要部分的内容不会显示在网页中。 5-3 实例：明星相册页 1 1、表格整体的属性设置 2 、表格“行”的属性设置 3、单元格属性设置 注：单元格的宽的单位可以是像素，也可以是百分比。 5-4 实例：明星相册页 2 1、表格边框颜色的设置 选中边框，右击显示快捷菜单，选择“编辑标签” 在“标签编辑器”中编辑表格边框的颜色；表格的背景颜色在 “常规”项中用同样 的方式设置。 2 、表格中行的背景颜色设置在下方的属性栏即可，列背景颜色的设置与行相同 3、加入网页页面的图片较多时， 可以全部选中图片用拖拽的方式加入网页， 再细分。 4 、软件中的操作版面受限时，可调整版面的视图比例。 5-5 实例：课程表 1 5-6 实例：课程表 2 1、单元格的拆分和合并 2 、插入行：在需要插入行的表格最前边单击，然后右击出现快捷菜单，如下 或者用下边的方式批量插入 3、按住 Ctrl 键拖动，可以复制 1、单元格背景图片的一种添加方式：在代码中按空格键设置 2 、单元格的边框颜色需要在代码中设置：在代码中按空格键设置 5-7 表格的 HTML标记 1、表格的代码标记 2 、表格每行的代码标记 3、单元格的代码标记 4 、每一对表格标记后边都可以添加属性特征 5、也可以在代码标记选择器处快捷选择 5-8 实例：软件下载页 1 三、表格嵌套 1．概念：就是在表格的单元格中再插入表格，形成嵌套的结构。或者就是说在已有的表格中再创建表格。 2 ．步骤 A ：光标定位到需要插入嵌套表格的单元格里 B ： 按照插入表格的方式，插入新的表格 实例一：下载页面 要求： 1、背景图片为 bg.gif 2. 单元格颜色 #33B3F0 和 #C8EAFB 1、设置表格的细边框，单元格背景颜色设置为不同于边框的一种颜色 ①、选中表格，边框设置为 0 ②、间距设置为 1 ③、选中表格右击，选择“编辑标签” 设置背景颜色，确定 5-9 实例：软件下载页 2 表格嵌套的添加 ( 表中表 ) ，与表格添加方式相同 5-10 实例：个人简历页 1 5-11 实例：个人简历页 2 表格在网页中的视图，默认情况下表格的显示是以“标准”的模式显示的；我们为 了在网页设计中更见直观的显示表格，可以利用“扩展”模式显示 5-12 网页的布局 四、应用表格布局页面 1）、类型： 网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、 Flash 型、变化型。 A 、国字型 B 拐角型