幻灯片 1

Size: px

Start display at page:

Download "幻灯片 1"

芙枝郭
5 years ago
Views:

1 第 7 章使用表格布局网页

2 本章学习内容 7.1 案例 1 设计学生成绩单 7.2 学习任务 : 表格标签 7.3 案例 2 使用表格布局图书资源网 7.4 案例 3 设计旅游信息网 7.5 实训

3 学习目标 : 通过本案例的学习, 熟练掌握创建表格设置表格的属性编辑表格等操作, 为使用表格布局网页打好基础知识要点 : 创建表格, 表格的属性设置, 选择表格或表格单元格, 插入删除行和列, 表格的拆分和合并等案例效果如图 7-1 所示

4 图 7-1 学生成绩单

5 7.1.1 创建表格表格是由若干行和列组成的表格横向叫行, 纵向叫列, 行列交叉的区域是单元格, 如下图表格的基本组成

6 一般以单元格为单位来插入网页元素, 以行和列为单位来修改性质相同的单元格单元格中的内容和单元格边框的距离叫边距, 单元格和单元格之间的距离叫间距, 整个表格边缘叫边框

7 创建表格时, 打开的表格对话框如图所示表格对话框

8 表格对话框中各项含义 : 行数 : 设置表格的行数列数 : 设置表格的列数表格宽度 : 以像素为单位或按占浏览器窗口宽度的百分比指定表格的宽度边框粗细 : 设置表格边框的宽度 ( 以像素为单位 ) 若希望浏览器不显示边框, 可将其值设置为 0 像素单元格边距 : 用于设置单元格内容与单元格边框之间的像素数

9 单元格间距 : 用于设置相邻的表格单元格之间的像素数标题栏 : 用于设置表格标题的样式无对表格不启用列或行标题 ; 左将表格的第一列作为标题列 ; 顶部将表格的第一行作为标题行 ; 两者能够在表格中输入列标题和行标题辅导功能栏 : 其中的标题用于设置显示在表格外的表格标题 ; 摘要给出对表格的内容摘要, 屏幕阅读器可以读取摘要文本, 但是该文本不会显示在用户的浏览器中

10 7.1.2 设置表格属性表格属性面板如下图所示表格属性面板表格属性面板中主要参数含义 : 表格下拉列表框 : 用于输入表格的 ID 标识, 以方便脚本引用该表格行列 : 用于显示并设置表格中行数列数

11 宽 : 以像素为单位或按浏览器窗口宽度的百分比指定表格的宽度填充 : 也称单元格边距, 是单元格内容和单元格边框之间的像素数对于大多数浏览器来说, 此选项的值设为 1px 如果用表格进行页面布局时, 可将此参数设置为 0 间距 : 也称单元格间距, 设置相邻的表格单元格间的像素数对齐 : 设置表格在网页中的对齐方式, 可以选择默认左对齐居中对齐和右对齐方式边框 : 以像素为单位设置表格边框的宽度

12 类 : 用于选择 CSS 样式应用于表格按钮 : 清除列宽按钮单击该按钮, 可以取消单元格的宽度设置, 使其宽度随单元格的内容自动调整按钮 : 清除行高按钮单击该按钮, 可以取消单元格的高度设置, 使其高度随单元格的内容自动调整按钮 : 将表格宽度转换成像素按钮将表格每列宽度的单位和表格宽度的单位转换成像素按钮 : 将表格宽度转换成百分比将表格每列宽度的单位和表格宽度的单位转换成百分比

13 7.1.3 编辑表格 1. 选择表格单元格选中表格元素是对表格进行编辑的基础将鼠标指针指向表格中的某个单元格单击, 即可选中该单元格 ; 若选择多个单元格, 可使用下面的方法完成 : 选择连续的多个单元格 : 在需要选择的单元格中单击鼠标, 然后按住鼠标左键不放, 同时向相邻的单元格方向拖曳, 被拖到的单元格出现黑色边框, 表示它们被选中

14 选择不连续的多个单元格 : 按住 Ctrl 键的同时, 单击任意个不相邻的单元格, 可以选中不相邻的多个单元格选择整行单元格 : 将鼠标移到行的最左边, 当光标变成一个向右箭头时单击, 即可选中整行单元格选择整列单元格 : 将鼠标移到列的最上边, 当光标变成一个向下箭头时, 单击即可选中整列单元格

15 选择表格的所有单元格 : 选中表格左上角的第 1 个单元格, 按住 Shift 键的同时, 将鼠标指针移动到表格右下角最后一个单元格单击, 将选中全部的单元格图激活 HTML 按钮时的单元格属性面板图激活 CSS 按钮时的单元格属性面板

16 单元格属性面板中各选项含义如下 : 单元格按钮组 : 用于将选定的单元格进行合并或者拆分操作单击按钮, 将所选的单元格行或列合并为一个单元格 ; 单击按钮, 将一个单元格分成两个或更多个单元格需要说明的是, 一次只能拆分一个单元格 ; 如果选择的单元格多于一个, 则此按钮将被禁用水平 : 指定单元格行或列内容的水平对齐方式可将内容对齐到单元格的左侧右侧

17 或使之居中对齐, 也可以指示浏览器使用其默认的对齐方式垂直 : 指定单元格行或列内容的垂直对齐方式可将内容对齐到单元格的顶端中间底部或基线, 或者指示浏览器使用其默认的对齐方式 ( 通常是居中对齐 ) 宽与高 : 所选单元格的宽度与高度, 以像素为单位或按整个表格宽度或高度的百分比指定不换行 : 防止换行, 单元格的宽度将随文字长度的不断增加而加长

18 标题 : 将所选的单元格格式设置为表格标题单元格默认情况下, 表格标题单元格的内容为粗体并且居中背景颜色 : 设置表格的背景图像单击后面的文件夹图标浏览某个图像, 或者按下指向文件图标拖到一个图像文件以选中它

19 2. 插入行或行在表格中插入行和列的方法 : 将光标定位在表格的某个单元格中, 选择修改表格插入行菜单命令, 即在表格中插入一行选择插入表格对象菜单命令, 在其级联式菜单中, 选择在上面插入行或者在下面插入行菜单命令, 均能在表格中插入一行

20 按下 <Ctrl+M> 组合键, 在插入点的下面插入一行选择修改表格插入行或列菜单命令, 弹出插入行或列对话框, 根据需要设置对话框, 可实现在当前行的上面或下面插入多行提示 : 插入列操作与插入行操作的方法一样除了以上方法外, 插入列操作还有一种更简便的方法 : 单击列最下方的绿色下三角按钮, 在弹出的下拉菜单中选择左侧插入列或者右侧插入列命令

21 3. 删除行或列删除行或列的操作方法 : 选中要删除的行或列, 或者将光标置于某行或列的任意一个单元格中, 选择修改表格删除行或者修改表格删除列菜单命令选中要删除的行或者列, 选择编辑清除菜单命令或按下 <Delete> 键将光标置于被删除列中的一个单元格中, 按下 <Ctrl+Shift+-> 组合键

22 4. 拆分或合并单元格拆分单元格的具体方法 : 将光标置于要拆分的单元格中, 选择修改表格拆分单元格命令, 或者单击属性面板中的拆分单元格为行或列按钮, 均能打开如下图所示的拆分单元格对话框在对话框中选择要将单元格拆分为行或列, 并设置相应的行数或列数, 然后单击确定按钮, 即可拆分单元格图拆分单元格对话框

23 合并单元格的具体方法 : 选中要合并的多个连续单元格, 选择修改表格合并单元格命令, 或者单击属性面板中的合并所选单元格按钮, 将选中的多个连续单元格合并为一个单元格

24 7.1.4 使用 CSS 美化表格在表格中输入文本后, 然后使用 CSS 美化表格 CSS 代码如下 :.text { font-family: " 黑体 "; font-size: 18px; text-align: center; } 请在 Dreamweaver 中完成学生成绩单的制作

25 7.2 学习任务 : 表格标签本节学习任务掌握表格标签的功能和应用, 能使用标签选择器设置表格的属性使用表格标签制作网页表格表格包含 3 对标签 :<table></table> <tr></tr> <td></td> 其中 <table> 是一个容器标签,<table></table> 代表表格的开始和结束 ;<tr> 用来创建表格中的每一行,<tr></tr> 代表一个行的开始与结束, 该

26 7.2 学习任务 : 表格标签对标签只能放在 <table></table> 标签对之间使用 ; <td> 用于创建一行中的每一个单元格, <td></td> 代表一个单元格的开始和结束, 该对标签只能放在 <tr></tr> 标签对中才是有效的在 <table></table> 标签中包含多个属性, 用来设置表格样式, 如 width( 表格的宽度 ) border ( 边框的宽度 ) cellpadding( 单元格边距 ) cellspacing( 单元格间距 ) 等 ;<td></td> 标签中包含 align 属性,align 是水平对齐方式, 取值分别为 left( 左对齐 ) center( 居中 ) right( 右对齐 )

7.2 学习任务 : 表格标签 7.2.2 在标签选择器中设置表格的属性选择窗口标签检查器

27 7.2 学习任务 : 表格标签在标签选择器中设置表格的属性选择窗口标签检查器菜单命令, 打开标签检查器面板, 如右图所示, 其中列出了被选表格所有的属性图标签检查器面板

28 7.2 学习任务 : 表格标签标签检查器面板中显示的属性及含义如表所示

29 7.3 案例 2 使用表格布局图书资源网学习目标 : 掌握使用表格布局网页使用 CSS 样式美化网页的方法和技巧 ; 掌握在网页中导入表格数据, 并能对表格数据进行相关的操作知识要点 : 用表格布局网页 ; 用 CSS 样式美化网页 ; 导入导出表格数据 ; 排序表格等

30 7.3 案例 2 使用表格布局图书资源网图图书资源网效果

31 7.3 案例 2 使用表格布局图书资源网使用表格布局网页由于所有的浏览器都支持表格, 并且用表格布局的网页下载速度快, 所以常常采用表格来对网页进行布局导入 EXCEL 文档当用大量表格数据在网页中呈现时, 使用 Dreamweaver 导入 EXCEL 表格数据可以使网页编排工作方便快捷选择文件导入 Excel 表格命令导入 EXCEL 文档

32 7.3 案例 2 使用表格布局图书资源网提示 : 在 Dreamweaver 中也可以导入 Word 文档, 具体方法同导入 Excel 文档一样还可以将 Dreamweaver 中的表格导出, 具体方法 : 将插入点放置在表格中的任意单元格中, 选择文件导出表格菜单命令, 打开导出表格对话框, 在定界符列表中选择一种分隔符, 在换行符列表中指定将在哪种操作系统中打开导出的文件, 单击导出按钮, 将打开表格导出为对话框, 从中指定保存路径, 并输入文件名称, 然后单击保存按钮

33 7.3 案例 2 使用表格布局图书资源网提示 : 在 Dreamweaver 中, 可以将一个以分隔 ( 如, 制表符逗号分号或引号 ) 文本内容的表格式数据导入到 Dreamweaver 中, 并设置为表格格式具体方法 : 选择文件导入表格式数据菜单命令, 或者选择插入表格对象导入表格式数据菜单命令, 打开导入表格式数据对话框在对话框中, 选择导入的数据文件, 设置表格宽度单元格边距单元格间距等值, 单击确定按钮, 在网页中导入表格式数据

34 7.3 案例 2 使用表格布局图书资源网使用 CSS 美化页面请参看教材 CSS 代码及美化后的网页效果案例小结 : 由于用表格布局的网页兼容性好, 浏览网页时下载速度快, 所以, 网页设计者常用表格布局网页使用 Dreamweaver 中的导入表格式数据 Excel 文档等命令, 可以将外部文档数据导入到 Dreamweaver 中, 大大提高网页制作效率

35 7.4 案例 3 设计旅游信息网学习目标 : 旅游信息类网站集吃宿行乐于一体, 具有推广提供充足的导游信息等功能通过本案例的学习, 希望用户能够熟练掌握使用表格布局网页使用 CSS 样式美化网页的方法和技能, 并能掌握好旅游信息类网站的设计表现形式知识要点 : 使用表格布局网页 ; 编辑操作表格 ; 将网页元素插入表格 ; 使用 CSS 样式美化页面等

36 7.4 案例 3 设计旅游信息网请在 Dreamweaver 中完成旅游信息网的制作图旅游信息网浏览效果

37 7.5 实训实训一设计健康美食网 1. 实训目的掌握使用表格布局网页的方法掌握合并表格插入嵌套表格等操作掌握在网页中导入 Excel 表格数据的方法掌握设置页面文本大小为表格添加外边框的 CSS 样式定义方法 2. 实训要求及网页设计效果实训要求 : 用表格布局页面

38 7.5 实训网页设计效果图 : 图健康美食网浏览效果

39 7.5 实训实训二设计时尚礼品网 1. 实训目的熟练掌握使用表格布局网页的技能熟练掌握定义并应用文本字体大小等属性的 CSS 样式掌握设置图片与文本排列方式的 CSS 样式掌握为表格单元格和页面背景增加不同色彩的 CSS 样式定义方法

40 7.5 实训 2. 实训要求及网页设计效果实训要求 : 用表格布局页面网页设计效果如右图图时尚礼品网浏览效果

41 谢谢!

Excel 2013 财务与会计应用实战从入门到精通视频教学版 2.1 选择单元格要对单元格进行编辑操作必须先选择单元格或单元格区域启动 Excel 并创建新的工作簿时单元格 A1 处于自动选定状态选择一个单元格单元格处于选定状态后单元格边框线会变成黑粗线表示此单元

Excel 2013 财务与会计应用实战从入门到精通视频教学版 2.1 选择单元格要对单元格进行编辑操作必须先选择单元格或单元格区域启动 Excel 并创建新的工作簿时单元格 A1 处于自动选定状态选择一个单元格单元格处于选定状态后单元格边框线会变成黑粗线表示此单元 2 第章编辑工作表中的单元格本章导读学习目标 Excel 2013 财务与会计应用实战从入门到精通视频教学版 2.1 选择单元格要对单元格进行编辑操作必须先选择单元格或单元格区域启动 Excel 并创建新的工作簿时单元格 A1 处于自动选定状态 2.1.1 选择一个单元格单元格处于选定状态后单元格边框线会变成黑粗线表示此单元格为当前单元格当前单元格的地址显示在名称框中内容显