项目四 表 格 教学任务要点: 教学重点与难点: 理解表格的构成和作用。 掌握表格的基本操作和属性设置方法。 掌握导入和导出表格的方法。

Slides:



Advertisements
Similar presentations
计算机网络与网页制作 Chapter 13 :使用表格 复旦大学计算机学院 肖川 1.
Advertisements

可慕小学 蔡志芳. 请你对比下面两张课程表说说你更 喜欢哪一张,为什么? 表格一 表格一 表格二 表格二 字体字号字体颜色 表格边框表格底纹.
Excel Microsoft Excel --轻松跟我学.
第六 章数据库访问页 6.1 数据访问页视图 6.2 创建数据访问页 6.3 编辑数据访问页 6.4 查看数据访问页 退出.
自定义汇总报表 演示 作者:栗川.
项目2 字符格式和段落编排 2017年3月7日6时54分.
第5章 制作表格、表单与框架 本章要点 ·创建表格、表单与框架的方法 ·设置表格以及单元格的属性 ·编辑表单以及处理表单
第五章 创建表格.
第4章 网页表格的处理 通过本章学习,应该掌握以下内容: 利用FrontPage 2002创建表格的四种方法 编辑表格的方法
大学计算机应用基础实践教程 共 页.
第8章 使用Adobe Table制作表格 Adobe Table 3.0C入门 表格基本操作 在PageMaker中嵌入与链接表格.
WORD中表格的制作 主 讲:郭 伟.
主要内容: 八 表格的处理   1.创建表格   2.调整行高和列宽   3.拆分合并单元格   4.设置表格格式   5.插入删除行或列.
有9个同学在操场上做操,他们所站的位置分别是:
第5章 表格.
插入超链接 高邮市第一实验小学 范太国 任务一:设置文本超链接 任务一:设置文字超链接 步骤:1、选定文字并右击,在快捷菜单 中选择“超链接”命令。 2、在弹出的对话框中选择左侧“链接到:”中的“本文档中的位置(A)”项,在“请选择文档中的位置(C):”中选择需要链接的幻灯片,单击“确定”按钮。
案例2 胸卡的制作. 案例2 胸卡的制作 知识要点: 学习重点及制作思路 学习目的: 邀请函的制作步骤: 1.掌握邮件合并功能 2.掌握比较并合并文档方法 3.掌握页面插入背景图 4.熟练使用文本框 知识要点: 1.邮件合并功能 2.文档中插入域内容 3.文本框的使用 技能要点: 1.域、文档部件操作.
PRESENTED BY OfficePLUS
有序列表.
图表的创建.
在PHP和MYSQL中实现完美的中文显示
第6章 文本 文本在网络上传输速度较快,用户可以很方便地浏 览和下载文本信息,故其成为网页主要的信息载体。 整齐划一、大小适中的文本能够体现网页的视觉效 果。因而文本处理是设计精美网页的第一步。本章 将结合具体实例介绍在Dreamweaver CS4中如何插 入文本,对文本进行排版及一些文本辅助功能。
UI 软件 设计 网页基本元素设计(二).
武汉纺织大学传媒学院 cm.wtu.edu.cn
第八章 菜单设计 §8.1 Visual FoxPro 系统菜单 §8.2 为自己的程序添加菜单 §8.3 创建快捷菜单.
任务4 制作个人简历表-表格的制作.
第一讲: 基本流程(1).
第17章 网站发布.
2019/1/12 GDP设计协同 超级管理员操作手册 GDP项目组.
POWERPOINT TEMPLATE HI.
网页制作基础 CNIC 王桦.
PRESENTED BY OfficePLUS
UI 软件 设计 页面布局(三).
第3讲 输入与格式化文本 教师:谢慧敏.
第7节 HTML表格 武汉纺织大学传媒学院 cm.wtu.edu.cn 2019/4/8 传媒学院.
网页设计与制作 Dreamweaver CS6 标准教程
产品推广 PRODUCT PROMOTION PRESENTED BY OfficePLUS.
标准配色方案 背景 文本和线条 阴影 强调色 主色一 主色二 主色三 主色四 推荐应用顺序. 标准配色方案 背景 文本和线条 阴影 强调色 主色一 主色二 主色三 主色四 推荐应用顺序.
PRESENTED BY OfficePLUS
第11课 Excel 工作表的编辑 课前导读 课堂讲解 上机实战.
表格页面 表格标签 1、标题标签<Caption>用于定义表格的标题。 align属性:控制标题位置。 取值为:
姚金宇 MIT SCHEME 使用说明 姚金宇
网 站 设 计 与 建 设 Website design and developments
计算机网络与网页制作 Chapter 07:Dreamweaver CS5入门
项目二:HTML语言基础.
成绩是怎么算出来的? 16级第一学期半期考试成绩 班级 姓名 语文 数学 英语 政治 历史 地理 物理 化学 生物 总分 1 张三1 115
第六章 Excel的应用 一、Excel的单元格与区域 1、单元格:H8, D7, IV26等 2、区域:H2..D8, HS98:IT77
企业宣传推广 Loem ipsum dolor sameman tanam casectetur adipiscing elit tamam dalam qoue sampe. dolor sameman tanam casectetur adipiscing elit tamam dalam qoue.
1 月 日 一 二 三 四 五 六 元旦 11/20 11/21 11/22 11/23 11/ /25 11/26 11/27 11/28 11/29 11/30 12/ /2.
iSIGHT 基本培训 使用 Excel的栅栏问题
PPT中视频的播放控制 苏州电教馆在线课程培训教程:PPT2003教程   制作:赵立锋 更多教程请见:
第六章 素材的加工与处理 第13讲 用GoldWave进行音频的截取、合并、淡入淡出操作
品牌推广方案 汇报时间:2018年8月 汇报人:优品PPT
VRP教程 2011.
Delphi 7.0开发示例.
熟悉PowerDesiner12操作环境 菜单栏 标题栏 工具栏 导航栏 工作区 浮动工具条 导航选项卡 控制信息栏 状态栏.
第六章 素材的加工与处理 第3讲 Photoshop的基本操作
报头 的制作.
Python 环境搭建 基于Anaconda和VSCode.
实验目的:掌握数据的顺序存储结构及它们在计算机中的操作。 实验内容:
Polarization of electro- magnetic wave after reflection
武汉纺织大学传媒学院 cm.wtu.edu.cn
第六章 Excel的应用 五、EXCEL的数据库功能 1、Excel的数据库及其结构 2、Excel下的数据排序 (1)Excel的字段名行
电子表格工作簿的操作 刘艳华.
YOUR SUBTITLE GOES HERE
Your Company Slogan 第三章 数据的输出打印 十里铺中学 赵 博.
第8章 创建与使用图块 将一个或多个单一的实体对象整合为一个对象,这个对象就是图块。图块中的各实体可以具有各自的图层、线性、颜色等特征。在应用时,图块作为一个独立的、完整的对象进行操作,可以根据需要按一定比例和角度将图块插入到需要的位置。 2019/6/30.
创建、启动和关闭Activity 本讲大纲: 1、创建Activity 2、配置Activity 3、启动和关闭Activity
LOGO HERE 单击此处添加 您的标题标题标题 PRESENTED BY JANE DOE
课题:表格布局 授课教师:陈树胜.
Presentation transcript:

项目四 表 格 教学任务要点: 教学重点与难点: 理解表格的构成和作用。 掌握表格的基本操作和属性设置方法。 掌握导入和导出表格的方法。 项目四 表 格 教学任务要点: 理解表格的构成和作用。 掌握表格的基本操作和属性设置方法。 掌握导入和导出表格的方法。 掌握排序表格的方法。 掌握使用表格进行网页布局的方法。 教学重点与难点: 使用表格制作网页。

表格是网页设计中一个非常有用的工具,它不仅可以将相关数据有序地排列在一起,还可以精确地定位文字、图像等网页元素在页面中的位置,使得页面在形式上丰富多彩又条理清楚,在组织上井然有序而不显单调。使用表格进行页面布局的最大好处是,即使浏览者改变计算机的分辨率也不会影响网页的浏览效果。因此,表格是网站设计人员必须掌握的工具。表格运用得是否熟练,是划分专业制作人士和业余爱好者的一个重要标准。

4.1 任务1 插入表格 表格是网页布局设计的常用工具,其在网页中的应用已经突破了传统的用来记载大量数据的功能,它可以使插入页面中的图像和文本等对象被限定在某一固定位置。相对于没有使用表格的页面,使用表格的页面显得更加整齐有序。合理使用布局表格,会使网页对象被组织得更加紧密,使整个页面看起来更加紧凑,如图4-1所示的页面就是使用表格将大量的网页元素对象定位在网页特定的位置上的效果。

在设计网页时,可以直接绘制表格,也可以导入表格数据,并将其转化为表格。 表格是网页中对文本和图像布局的强有力的工具。一个表格通常由行、列和单元格组成,每行由一个或多个单元格组成。表格中的横向称为行,纵向称为列,一行与一列相交所产生的区域则称为单元格。要将相关数据有序地组织在一起,必须先插入表格,然后才能有效组织数据。 绘制表格的具体操作步骤如下: (1)在“文档”窗口的“设计”视图中,将插入点放在需要表格出现的位置。 提示: 如果您的文档是空白的,则只能将插入点放置在文档的开头。

(2)通过以下几种方法启用【表格】对话框。 在菜单栏中选择【插入】→【表格】命令。 在【插入】面板的【常用】模式中,单击【表格】按钮 。 弹出【表格】对话框,如图所示。其中,各选项的含义如下:

行数:确定表格行的数目。 列数:确定表格列的数目。 表格宽度:以像素为单位或按占浏览器窗口宽度的百分比指定表格的宽度。 边框粗细:指定表格边框的宽度(以像素为单位)。 单元格间距:决定相邻的表格单元格之间的像素数。如果没有明确指定边框粗细或单元格间距和单元格边距的值,则大多数浏览器都按边框粗细和单元格边距设置为 1、单元格间距设置为 2 来显示表格。若要确保浏览器显示表格时不显示边距或间距,请将“单元格边距”和“单元格间距”设置为 0。 单元格边距:确定单元格边框与单元格内容之间的像素数。

无:对表格不启用列或行标题。 左对齐:可以将表格的第一列作为标题列,以便可为表格中的每一行 输入一个标题。 顶对齐:可以将表格的第一行作为标题行,以便可为表格中的每一列 输入一个标题。 两者兼有:使您能够在表格中输入列标题和行标题。 标题:提供一个显示在表格外的表格标题。最好使用标题以方便使用屏幕阅读器的 Web 站点访问者。屏幕阅读器读取表格标题并且帮助屏幕阅读器用户跟踪表格信息。 对齐标题:指定表格标题相对于表格的显示位置。 摘要:给出了表格的说明。屏幕阅读器可以读取摘要文本,但是该文本不会显示在用户的浏览器中。

(3)根据需要选择新建表格的大小、行列数值等,单击【确定】按钮,完成如图所示的表格,这里一切选择默认设置。

4.2 任务2 设置表格属性 在绘制表格或者导入表格数据后,根据需要可能要对表格属性项进行修改设置才能达到设计的要求。下面就来介绍一下表格属性的设置方法。

4.2.1 情境1 选择表格 1、选择整个表格 选择整个表格的方法有很多种,可以参照下列方法之一进行操作: 将鼠标指针移动到表格的上方,当鼠标指针的形状变为表格形状 时,单击鼠标左键即可选中整个表格,如图所示。

将鼠标指针移动到表格的格线处,当鼠标指针的形状变为上下方向的箭头时,单击鼠标左键即可选中整个表格,如图所示。

将光标置于表格中,单击窗口左下角的<table>标记即可选中整个表格。 将光标置于表格中,在菜单栏中选择【修改】→【表格】→【选择表格】菜单命令,即可选中整个表格。 将光标置于表格之外,按住【shift】键,然后在表格中的任意处单击鼠标左键即可选择整个表格。 选中表格后,表格的外框变成粗黑色,并在右方、下方和右下方各会显示一个黑色控制点,【属性】面板也会变为表格【属性】面板,在其中可以设置表格的属性。

2、选择单元格 选择单元格既可以选择单个单元格,也可以选择一整行或者一整列,还可以选择不连续的多个单元格。 选择单个单元格,直接单击要选择的单元格即可。选择行(或列),可按如下几种操作方法进行: (1)将鼠标指针置于所要选择的行的左方(或列的上方),待鼠标指针形状变为向右(或向下)的箭头时,单击鼠标左键,则可以选中该行(或该列)。将鼠标指针置于所要选择的行的左方(或列的上方),待鼠标指针形状变为向右(或向下)的箭头时,拖曳鼠标可以选中连续的多行(或多列)。

(2)将鼠标置于待选择的单元格中,然后按住鼠标左键不放并拖动鼠标,横向拖动可以选择一行,纵向拖动可以选择一列,如果向对角线方向拖动,行和列可以同时选择。 (3)通过与【ctrl】键的结合使用,可以选择多个不连续单元格。按住【ctrl】键,然后单击需要选择的单元格,即可选中该单元格。如果想取消选择某单元格,只需在按住【ctrl】键的同时,再次单击该单元格即可。

4.2.2 情境2 设置行数和列数 1、通过【属性】面板 2、通过快捷菜单 3、通过菜单栏命令

4.2.3 情境3 设置表格大小 1、相对大小和绝对大小 2、改变表格大小 3、相对、绝对大小之间的转换 4、清除行高和列宽 5、设置填充和间距

4.2.4 情境4 设置表格对齐方式 表格同网页中的其他元素对象一样,有三种对齐方式,即左对齐、右对齐和居中对齐,默认情况下是左对齐,为表格设置对齐方式的操作方法如下: (1)选中要设置对齐方式的表格。 (2)在表格【属性】面板上的“对齐”下拉列表框中选择一种对齐方式。

4.2.5 情境5 设置表格边框 表格中的一些效果是通过设置表格边框的属性来实现的,对于表格边框,可以设置它的粗细和颜色。 1)边框的粗细 在表格【属性】面板上的“边框”问半框用来设置表格边框的粗细,默认情况下设置为1,即如果没有明确指定边框的值,则大多数浏览器按边框值为1的设置显示表格。通过改变该文本框中的数值,可以调整表格边框的粗细。如下图所示为分别将表格的边框设置为0、1和10的效果。

2)边框的颜色 表格的边框颜色默认情况下是灰色的,通过【CSS样式】面板或HTML代码可以为表格的边框选择其他的颜色。为表格边框设置颜色的操作方法如下: (1)选中要改变边框颜色的表格。 (2)切换到“代码”视图或“拆分”视图,在对应的表格代码的“<table”后按空格后输入“bordercolor=”将弹出一个颜色选择面板,如下图所示。 (3)在弹出的调色板中选择一种颜色。

设置完成后的效果如图所示。

4.2.6 情境6 设置表格背景 在网页中,表格是一个独立的对象,不仅可以设置表格边框的颜色,还可以为其添加背景色或者选择背景图像。 1)添加背景色 为表格添加背景色的操作方法如下: (1)选中要添加背景色的表格。 (2)在【CSS样式】面板中,单击 【新建CSS规则】按钮 ,将弹出【新建CSS规则】对话框,在该对话框中,“选择器类型”选择“标签(重新定义HTML元素)”,“选择器名称”选择“table” 。

(3)单击【确定】按钮,将弹出【CSS规则定义】对话框。在该对话框中,选择“背景”分类,设置“Background-color ”(即背景色),如图所示。

(4)选择一种适合的背景色后,单击【确定】按钮,即可为表格添加背景色。为表格添加背景色的效果如图所示。

2)选择背景图像 将图像设置为表格的背景,具体操作方法同上述背景色的方法,只是:选中表格后,在 “Background-image”文本框中输入图像的存放路径,或者单击 按钮 ,将弹出【选择图像源文件】对话框,在该对话框中选择一幅图像作为表格的背景图像。 单击【确定】按钮返回,这时可以看到表格中已经插入了一副背景图像,如下图所示。

提示:还可以用表格标记<table>的属性代码bgcolor和background来设置表格的背景色和背景图像。

4.3 任务3 设置单元格的属性 4.3.1 情境1 单元格的拆分与合并 4.3.2 情境2 设置单元格的对齐属性 1)合并单元格 2)拆分单元格 4.3.2 情境2 设置单元格的对齐属性

4.4 任务4 表格的嵌套 表格可以进行嵌套操作,并且嵌套的层数没有限制,但嵌套的层数过多将使导致页面打开速度变慢,实际应用中表格的嵌套层数通常以不超过3层为宜。表格嵌套在使用表格进行页面布局的时候尤其又用。表格嵌套的操作方法如下: (1)在需要嵌套表格父表格单元格中定位插入点。 (2)在菜单栏中选择【插入】→【表格】命令。 (3)在打开的【表格】对话框中设置要插入的表格属性。 (4)单击【确定】按钮。 另外在目标单元格中定位插入点后, 在【插入】面板的【常用】模式中,单击【表格】按钮 ,也可实现表格的嵌套操作。

4.5 任务5 表格的数据导入导出 4.5.1 情境1 导入表格数据 4.5.2 情境2 表格数据的导出 有时需要将Word文档中的内容或Excel文档中的表格数据导入到网页中进行发布,或将网页中的表格数据导出到Word文档或Excel文档中进行编辑,Dreamweaver CS4提供了实现这种操作的功能。 4.5.1 情境1 导入表格数据 4.5.2 情境2 表格数据的导出

4.6 任务6 表格的排序 对表格数据进行排序的具体操作方法如下: 提示:不能对包含 colspan 或 rowspan 属性的表格(即包含合并单元格的表格)进行排序。 (1)选中要排序的表格或单击该表格的任意单元格。 (2)选择【命令】菜单下的【排序表格】命令,将弹出【排序表格】对话框。

项目案例一: 4.7 上机项目实训 1、实训题目: 2、实训目的: 京城影讯 通过该网页的制作,掌握表格的插入、基本属性的设置、利用表格制作网页。

3.实训案例效果

4.8 小结 表格是网页制作中使用最多的工具之一,因为表格可以使信息更加简洁和条理化。表格的控制能力便于设计者构造网页的布局。先使用较大的表格对网页的版面进行大致控制,再使用嵌套的表格对细节进行刻画。表格在设计者的思维中不仅是一种简单的对象,而且是一种控制版面和制作模版的工具。本项目讲述了如何在文档中插入表格、如何查看和设置表格属性、如何增减行与列、如何改变行与列的大小、如何合并和拆分行与列等基本操作。