书签 分享 收藏 举报 版权申诉 / 50
上传文档赚钱

类型网页设计与制作项目教程单元4-表格与表格布局网页的制作.pptx

  • 上传人(卖家):三亚风情
  • 文档编号:3223758
  • 上传时间:2022-08-07
  • 格式:PPTX
  • 页数:50
  • 大小:1.20MB
  • 【下载声明】
    1. 本站全部试题类文档,若标题没写含答案,则无答案;标题注明含答案的文档,主观题也可能无答案。请谨慎下单,一旦售出,不予退换。
    2. 本站全部PPT文档均不含视频和音频,PPT中出现的音频或视频标识(或文字)仅表示流程,实际无音频或视频文件。请谨慎下单,一旦售出,不予退换。
    3. 本页资料《网页设计与制作项目教程单元4-表格与表格布局网页的制作.pptx》由用户(三亚风情)主动上传,其收益全归该用户。163文库仅提供信息存储空间,仅对该用户上传内容的表现方式做保护处理,对上传内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知163文库(点击联系客服),我们立即给予删除!
    4. 请根据预览情况,自愿下载本文。本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
    5. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007及以上版本和PDF阅读器,压缩文件请下载最新的WinRAR软件解压。
    配套讲稿:

    如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

    特殊限制:

    部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。

    关 键  词:
    网页 设计 制作 项目 教程 单元 表格 布局
    资源描述:

    1、汤智华汤智华 主编主编王爱红王爱红 主审主审【教学导航】【教学导航】教学目标教学目标(1 1)学会正确地插入表格,并合理地设置表格的属性)学会正确地插入表格,并合理地设置表格的属性(2 2)学会正确地在表格中插入嵌套表格,并合理地设置嵌套表格的属性)学会正确地在表格中插入嵌套表格,并合理地设置嵌套表格的属性(3 3)掌握单元格的合并、拆分的操作方法,行、列的插入和删除的操作方法)掌握单元格的合并、拆分的操作方法,行、列的插入和删除的操作方法(4 4)学会正确地设置表格中行和列的属性)学会正确地设置表格中行和列的属性(5 5)学会正确设置表格、单元格的背景图像和背景颜色)学会正确设置表格、单元格

    2、的背景图像和背景颜色(6 6)学会正确地在表格中输入文字)学会正确地在表格中输入文字(7 7)学会正确地在表格中插入图像)学会正确地在表格中插入图像(8 8)学会制作流行的细线表格的方法)学会制作流行的细线表格的方法(9 9)学会设置滚动文本效果的方法)学会设置滚动文本效果的方法(1010)能使用表格布局网页,能正确理解适合表格布局的含义)能使用表格布局网页,能正确理解适合表格布局的含义本单元重点本单元重点(1 1)插入表格、设置表格的属性)插入表格、设置表格的属性(2 2)合并或拆分单元格)合并或拆分单元格(3 3)设置表格、单元格的背景图像和背景颜色)设置表格、单元格的背景图像和背景颜色(

    3、4 4)在表格中输入文字、插入图像)在表格中输入文字、插入图像(5 5)制作流行的细线表格)制作流行的细线表格(6 6)使用表格布局网页)使用表格布局网页本单元难点本单元难点(1 1)在表格中插入嵌套表格,并设置嵌套表格的属性)在表格中插入嵌套表格,并设置嵌套表格的属性(2 2)设置滚动文本效果)设置滚动文本效果教学方法教学方法任务驱动法、分组讨论法任务驱动法、分组讨论法4.1 4.1 表格表格一、创建表格一、创建表格1 1为什么要应用表格为什么要应用表格 日常生活中,为了清晰地显示数据或信息,常常使用表格对数据日常生活中,为了清晰地显示数据或信息,常常使用表格对数据或信息进行统计,同样在制作

    4、网页时,为了使网页中的元素有条理地或信息进行统计,同样在制作网页时,为了使网页中的元素有条理地显示,也需要使用表格对网页进行规划。显示,也需要使用表格对网页进行规划。【说明】【说明】表格标签既适合制作表格,也可用适当用于网页布局。表格标签既适合制作表格,也可用适当用于网页布局。虽然,使用表格进行网页布局的方法已被摒弃。虽然,使用表格进行网页布局的方法已被摒弃。2 2创建表格的基本语法创建表格的基本语法 创建表格的基本语法格式如下:创建表格的基本语法格式如下:单元格内的文字单元格内的文字 运行完整的案例代码,得到效果如图运行完整的案例代码,得到效果如图4-14-1所示。所示。图图4-1 表格的定

    5、义方法表格的定义方法二、二、标记标记 大多数大多数HTMLHTML标记都有相应的属性,用于为元素提供更多的信息,标记都有相应的属性,用于为元素提供更多的信息,标记也不例外,标记也不例外,HTMLHTML语言为其提供了一系列的属性,用于控语言为其提供了一系列的属性,用于控制表格的显示样式。制表格的显示样式。(1 1)borderborder属性:在属性:在标记中,标记中,borderborder属性用于设置表格的边框,属性用于设置表格的边框,默认值为默认值为0 0。(2 2)cellspacingcellspacing属性:属性:cellspacingcellspacing属性用于设置单元格与单

    6、元格边框之属性用于设置单元格与单元格边框之间的空白间距,默认为间的空白间距,默认为2px2px。(3 3)cellpaddingcellpadding属性:属性:cellpaddingcellpadding属性用于设置单元格内容与单元格边属性用于设置单元格内容与单元格边框之间的空白间距,默认为框之间的空白间距,默认为1px1px。(4 4)widthwidth与与heightheight属性:默认情况下,表格的宽度和高度靠其自身的属性:默认情况下,表格的宽度和高度靠其自身的内容来支撑。内容来支撑。(5 5)alignalign属性:用于定义元素的水平对齐方式,其可选属性值为属性:用于定义元素的

    7、水平对齐方式,其可选属性值为leftleft、centercenter、rightright。(6 6)bgcolorbgcolor属性:用于设置表格的背景颜色。属性:用于设置表格的背景颜色。(7 7)backgroundbackground属性:用于设置表格的背景图像。属性:用于设置表格的背景图像。三、三、标记标记 通过对通过对标记应用各种属性,可以控制表格的整体显示样式,标记应用各种属性,可以控制表格的整体显示样式,但是制作网页时,有时需要表格中的某一行特殊显示,这时就可以为但是制作网页时,有时需要表格中的某一行特殊显示,这时就可以为行标记行标记定义属性,其常用属性如下。定义属性,其常用属

    8、性如下。(1 1)heightheight:设置行高度,常用属性值为像素值。:设置行高度,常用属性值为像素值。(2 2)alignalign:设置一行内容的水平对齐方式,常用属性值为:设置一行内容的水平对齐方式,常用属性值为leftleft、centercenter、rightright。(3 3)valignvalign:设置一行内容的垂直对齐方式,常用属性值为:设置一行内容的垂直对齐方式,常用属性值为toptop、middlemiddle、bottombottom。(4 4)bgcolorbgcolor:设置行背景颜色,预定义的颜色值、十六进制:设置行背景颜色,预定义的颜色值、十六进制#R

    9、GB#RGB、rgb(r,g,b)rgb(r,g,b)(5 5)backgroundbackground:设置行背景图像,:设置行背景图像,urlurl地址。地址。运行完整的案例代码,得到效果如图运行完整的案例代码,得到效果如图4-24-2所示。所示。图图4-2 行标记行标记的常用属性的常用属性四、四、标记标记(1 1)widthwidth:设置单元格的宽度,常用属性值为像素值。:设置单元格的宽度,常用属性值为像素值。(2 2)heightheight:设置单元格的高度,常用属性值为像素值。:设置单元格的高度,常用属性值为像素值。(3 3)alignalign:设置单元格内容的水平对齐方式,常

    10、用属性值为:设置单元格内容的水平对齐方式,常用属性值为leftleft、centercenter、rightright。(4 4)valignvalign:设置单元格内容的垂直对齐方式,常用属性值为:设置单元格内容的垂直对齐方式,常用属性值为toptop、middlemiddle、bottombottom。(5 5)bgcolorbgcolor:设置单元格的背景颜色,常用属性值为预定义的颜色:设置单元格的背景颜色,常用属性值为预定义的颜色值、十六进制值、十六进制#RGB#RGB、rgb(r,g,b)rgb(r,g,b)。(6 6)backgroundbackground:设置单元格的背景图像,

    11、常用属性值为:设置单元格的背景图像,常用属性值为URLURL地址。地址。(7 7)colspancolspan:设置单元格横跨的列数(用于合并水平方向的单元:设置单元格横跨的列数(用于合并水平方向的单元格),常用属性值为正整数。格),常用属性值为正整数。(8 8)rowspanrowspan:设置单元格竖跨的行数(用于合并竖直方向的单元:设置单元格竖跨的行数(用于合并竖直方向的单元格),常用属性值为正整数。格),常用属性值为正整数。与与标记不同的是,可以对标记不同的是,可以对标记应用标记应用widthwidth属性,用于指属性,用于指定单元格的宽度,同时定单元格的宽度,同时标记还拥有标记还拥有

    12、colspancolspan和和rowspanrowspan属性,用于属性,用于对单元格进行合并。对单元格进行合并。运行完整的案例代码,得到效果如图运行完整的案例代码,得到效果如图4-34-3所示。所示。图图4-3 单元格的合并(垂直相邻)单元格的合并(垂直相邻)五、五、标记标记 应用表格时经常需要为表格设置表头,以使表格的格式更加清晰,应用表格时经常需要为表格设置表头,以使表格的格式更加清晰,方便查阅。方便查阅。设置表头非常简单,只需用表头标记设置表头非常简单,只需用表头标记替代相应的单元替代相应的单元格标记格标记即可。即可。运行完整的案例代码,得到效果如图运行完整的案例代码,得到效果如图4

    13、-54-5所示。所示。图图4-5 表头标记表头标记th(使用前)(使用前)六、表格的结构六、表格的结构 为了使搜索引擎更好地理解网页内容,在使用表格进行布局时,为了使搜索引擎更好地理解网页内容,在使用表格进行布局时,可以将表格划分为表格标题、头部、主体和页脚等结构,用于定义网可以将表格划分为表格标题、头部、主体和页脚等结构,用于定义网页中的不同内容,划分表格结构的标记如下。页中的不同内容,划分表格结构的标记如下。(1 1):用于定义表格标题。:用于定义表格标题。标签必须标签必须紧随紧随标签之后。您只能对每个表格定义一个标题。通常这个标标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中

    14、于表格之上。题会被居中于表格之上。(2 2):用于定义表格的头部,必须位于:用于定义表格的头部,必须位于 标记中,一般包含网页的标记中,一般包含网页的logologo和导航等头部信息。和导航等头部信息。(3 3):用于定义表格的页脚,位于:用于定义表格的页脚,位于标记中标记中标记之后,一般包含网页底部的企业信息等。标记之后,一般包含网页底部的企业信息等。(4 4):用于定义表格的主体,位于:用于定义表格的主体,位于标记中标记中标记之后,一般包含网页中除头部和底部之标记之后,一般包含网页中除头部和底部之外的其他内容。外的其他内容。4.2 4.2 表格布局表格布局 由于表格布局只适用形式单调,内容

    15、也比较简单的网页,因此这由于表格布局只适用形式单调,内容也比较简单的网页,因此这里只需了解即可。里只需了解即可。其布局方法是:在相应的单元格中插入各种元素即可,无论是文其布局方法是:在相应的单元格中插入各种元素即可,无论是文字、图像等元素。字、图像等元素。4.3 CSS4.3 CSS控制表格样式控制表格样式 定义无序或有序列表时,可以通过标记的属性控制列表的项目符定义无序或有序列表时,可以通过标记的属性控制列表的项目符号,但是这种方式实现的效果并不理想,这时就需要用到号,但是这种方式实现的效果并不理想,这时就需要用到CSSCSS中一系中一系列的列表样式属性。列的列表样式属性。一、一、CSSCS

    16、S控制表格边框样式控制表格边框样式 使用边框样式属性使用边框样式属性borderborder设置表格边框时,要特别注意单元格边设置表格边框时,要特别注意单元格边框的设置。框的设置。运行案例代码,得到效果如图运行案例代码,得到效果如图4-74-7所示。所示。接着,给单元格单独设置相应的边框样式,具体代码如下:接着,给单元格单独设置相应的边框样式,具体代码如下:td,thborder:1px solid#F00;/td,thborder:1px solid#F00;/*为单元格单独设置边框为单元格单独设置边框*/保存文件,刷新网页,效果如图保存文件,刷新网页,效果如图4-84-8所示。所示。图图4

    17、-7 CSS控制表格边框样式控制表格边框样式01 图图4-8 CSS控制表格边框样式控制表格边框样式02 最后,去掉单元格之间的空白距离,制作细线边框效果,具体代最后,去掉单元格之间的空白距离,制作细线边框效果,具体代码如下所示:码如下所示:tabletable width:400px;width:400px;height:150px;height:150px;border:1px solid#F00;/border:1px solid#F00;/*设置设置tabletable的边框的边框*/border-collapse:collapse;/border-collapse:collapse;

    18、/*边框合并边框合并*/保存文件,刷新网页,效果如图保存文件,刷新网页,效果如图4-94-9所示。所示。图图4-9 CSS控制表格边框样式控制表格边框样式03二、二、CSSCSS控制单元格边距控制单元格边距 对单元格设置内边距对单元格设置内边距paddingpadding和外边距和外边距marginmargin样式,同样可以控制样式,同样可以控制单元格边距。单元格边距。运行完整的案例代码,得到效果如图运行完整的案例代码,得到效果如图4-104-10所示。所示。【注意】【注意】行标记行标记无内边距属性无内边距属性paddingpadding和外边距属性和外边距属性marginmargin。图图4

    19、-10 CSS控制单元格边距控制单元格边距三、三、CSSCSS控制单元格宽高控制单元格宽高 单元格的宽度和高度,有着和其他元素不同的特性,主要表现在单元格的宽度和高度,有着和其他元素不同的特性,主要表现在单元格之间的互相影响上。运行完整的案例代码,得到效果如图单元格之间的互相影响上。运行完整的案例代码,得到效果如图4-114-11所示。所示。值得一提的是,对同一行中的单元格定义不同的高度,或对同一值得一提的是,对同一行中的单元格定义不同的高度,或对同一列中的单元格定义不同的宽度时,最终的宽度或高度将取其中的较大列中的单元格定义不同的宽度时,最终的宽度或高度将取其中的较大者。者。图图4-11 C

    20、SS控制单元格宽高控制单元格宽高【操作准备】【操作准备】创建所需的文件夹,复制所需的资源到桌面上。即:在本地硬盘创建所需的文件夹,复制所需的资源到桌面上。即:在本地硬盘(例如(例如D D盘)中创建一个文件夹盘)中创建一个文件夹“网页设计与制作练习网页设计与制作练习Unit04”Unit04”,然,然后将光盘中的后将光盘中的“start”“start”文件夹中文件夹中“Unit04”“Unit04”文件夹中的文件夹中的“Unit04“Unit04课程资课程资源源”文件夹所有内容复制到桌面上。文件夹所有内容复制到桌面上。【模仿训练】【模仿训练】任务任务4.1 4.1 北京大学网站表格与表格布局网页

    21、的制作北京大学网站表格与表格布局网页的制作 本单元本单元“模仿训练模仿训练”的任务卡如表的任务卡如表4.14.1所示。所示。任务编号任务编号4.14.1任务名称任务名称北京大学网站表格与表格布局网页的制作北京大学网站表格与表格布局网页的制作网页主题网页主题北京大学北京大学计划工时计划工时 网页制作任务描述网页制作任务描述(1 1)在网页中插入表格,并合理地设置表格的属性)在网页中插入表格,并合理地设置表格的属性(2 2)设置表格、行、列和单元格的属性)设置表格、行、列和单元格的属性(3 3)在表格的单元格中输入文字、图像,并设置文字、图像的属性)在表格的单元格中输入文字、图像,并设置文字、图像

    22、的属性(4 4)插入嵌套表格,并设置嵌套表格的属性)插入嵌套表格,并设置嵌套表格的属性(5 5)合并与拆分单元格)合并与拆分单元格(6 6)利用表格对网页进行布局)利用表格对网页进行布局(7 7)设置滚动文本效果)设置滚动文本效果网页布局结构分析网页布局结构分析(1 1)表格和表格布局方式,如图)表格和表格布局方式,如图4-124-12所示所示(2 2)滚动文本效果)滚动文本效果网页色彩搭配分析网页色彩搭配分析网页中文字的颜色:网页中文字的颜色:#2b2b2b#2b2b2b。表格各单元格的背景颜色:。表格各单元格的背景颜色:#000000#000000网页组成元素分析网页组成元素分析主要包括表

    23、格、标题文本、正文文本、图像及链接主要包括表格、标题文本、正文文本、图像及链接任务实现流程分析任务实现流程分析插入表格及其属性设置插入表格及其属性设置设置的背景图像、行属性设置的背景图像、行属性在表格中输入文本在表格中输入文本设置滚动设置滚动文本效果文本效果插入表格及其属性设置插入表格及其属性设置在表格中插入图像、输入文本及其属性设置在表格中插入图像、输入文本及其属性设置合并与拆分单元格合并与拆分单元格表表4.1 单元单元4“模仿训练模仿训练”任务卡任务卡 本单元本单元“模仿训练模仿训练”的任务跟踪卡如表的任务跟踪卡如表4.24.2所示。所示。任务编号任务编号开始时间开始时间完成时间完成时间计

    24、划工时计划工时实际工时实际工时当前状态当前状态 表表4.2 单元单元4“模仿训练模仿训练”任务跟踪卡任务跟踪卡 本单元本单元“模仿训练模仿训练”网页网页task4-1.htmltask4-1.html的浏览效果如图的浏览效果如图4-124-12所示。所示。图图4-12 北京大学网站表格与表格布局网页北京大学网站表格与表格布局网页task4-1.html的浏览效果图的浏览效果图任务任务4.1.1 4.1.1 表格及细线表格的制作表格及细线表格的制作任务描述任务描述(1 1)创建)创建Unit04Unit04站点结构,将所需图片复制到站点结构,将所需图片复制到“images”“images”文件夹

    25、中,使用文件夹中,使用“网页骨架网页骨架.html”.html”文件,保存为文件,保存为“task4-1.html”“task4-1.html”网页文件,将其拖曳到编网页文件,将其拖曳到编辑器中进行编辑,修改网页标题为辑器中进行编辑,修改网页标题为“表格与表格布局网页表格与表格布局网页”。(2 2)使用)使用、/、创建符合创建符合WebWeb标准的表格基本结构。设置窗口的背景色为标准的表格基本结构。设置窗口的背景色为#cce8cf#cce8cf。(3 3)设置)设置标签的属性,代码为标签的属性,代码为table border=1 width=600 align=center cellspaci

    26、ng=0 cellpadding=3 bgcolor=white。浏览器效果如图浏览器效果如图4-144-14所示。所示。图图4-14 设置设置table标签属性后的表格标签属性后的表格(4 4)设置所有)设置所有标签的属性标签的属性“居中居中”,”,代码为代码为设置设置第第2 25 5行第二列行第二列标签的属性标签的属性“左对齐左对齐”,代码为,代码为就就业情况业情况。浏览器效果如图浏览器效果如图4-154-15所示。所示。(5 5)在第)在第2 25 5行第三列使用行第三列使用标签插入图像。分别替换掉标签插入图像。分别替换掉2.32.35.35.3的文字,代码为的文字,代码为。浏览器效果如

    27、图浏览器效果如图4-164-16所示。所示。图图4-15 设置设置tr、td标签属性后的表格标签属性后的表格 图图4-16 插入图像后的表格插入图像后的表格(6 6)合并第)合并第6 6行的行的1 1、2 2、3 3列。列。使用使用“colspan”“colspan”属性,合并第属性,合并第6 6行的行的1 1、2 2、3 3列后(注意:将列后(注意:将6.26.2、6.36.3的的都删除),接着,将都删除),接着,将6.16.1修改为修改为“合计合计”。代码为代码为 合计合计 3 423 243 243 3 423 243 243 4 534 444 554 4 534 444 554 浏览

    28、器效果如图浏览器效果如图4-174-17所示。所示。图图4-17 合并单元格后的表格合并单元格后的表格(7 7)将表格线制作成细线。)将表格线制作成细线。【提示】【提示】制作细线表格的步骤如下。制作细线表格的步骤如下。(1 1)设置表格的边框为)设置表格的边框为0 0,即:,即:border=0border=0。(2 2)设置单元格与单元格之间的距离为)设置单元格与单元格之间的距离为1 1,cellspacing=1cellspacing=1。(3 3)设置表格的背景色)设置表格的背景色 bgcolor bgcolor,表格的背景色就是表格线的颜色,表格的背景色就是表格线的颜色(如:(如:bg

    29、color=redbgcolor=red)。)。(4 4)设置每一个单元格的背景色,如:白色(也可和浏览器的背景)设置每一个单元格的背景色,如:白色(也可和浏览器的背景色一致)。色一致)。浏览器效果如图浏览器效果如图4-184-18所示。所示。图图4-18 完成后的细线表格完成后的细线表格任务实施任务实施(1 1)创建站点结构,使用)创建站点结构,使用“网页骨架网页骨架.html”.html”文件,创建文件,创建“task4-1.html”“task4-1.html”网页文件。网页文件。(2 2)创建符合)创建符合WebWeb标准的表格基本结构。标准的表格基本结构。(3 3)设置)设置标签的属

    30、性,定义宽度、居中,设置边框线、单元格标签的属性,定义宽度、居中,设置边框线、单元格边距、内容边距。边距、内容边距。(4 4)设置)设置“居中居中”“”“左对齐左对齐”属性。属性。(5 5)插入图像。)插入图像。(6 6)合并单元格。)合并单元格。(7 7)将表格线制作成细线表格。)将表格线制作成细线表格。(8 8)滚动文字效果的制作。)滚动文字效果的制作。任务任务4.1.2 4.1.2 滚动文本效果的制作滚动文本效果的制作任务描述任务描述 在细线表格下将所输入的文本设置为滚动效果。在细线表格下将所输入的文本设置为滚动效果。任务实施任务实施(1 1)在【任务)在【任务4.1.14.1.1】的基

    31、础上继续编辑。】的基础上继续编辑。(2 2)在)在标签下,输入标签下,输入换行,然后,输入以下换行,然后,输入以下代码:代码:欢迎来到北京大学!欢迎来到北京大学!(3 3)保存滚动文字的设置。浏览器效果如图)保存滚动文字的设置。浏览器效果如图4-194-19所示。所示。图图4-19 添加滚动文本后的浏览器效果添加滚动文本后的浏览器效果 任务任务4.1.3 4.1.3 表格布局网页的制作表格布局网页的制作任务描述任务描述(1 1)分析布局结构,其结构由两个表格构成,上表格为三行两列,居中。)分析布局结构,其结构由两个表格构成,上表格为三行两列,居中。下表格为两行两列,第下表格为两行两列,第2 2

    32、行第行第1 1列无内容,如图列无内容,如图4-204-20所示。所示。(2 2)使用)使用、创建两个表格基本结构。创建两个表格基本结构。(3 3)设置第一个表格的属性)设置第一个表格的属性“居中居中”,代码为,代码为。(4 4)在相应的单元格中,插入相应的图片、文字和空链接。)在相应的单元格中,插入相应的图片、文字和空链接。(5 5)设置第二个表格的属性)设置第二个表格的属性“高度高度”为为120px120px,代码为,代码为table height=120。图图4-20 表格布局的结构分析图表格布局的结构分析图任务实施任务实施(1 1)分析布局结构。)分析布局结构。(2 2)创建两个表格基本

    33、结构。)创建两个表格基本结构。(3 3)设置第一个表格的属性)设置第一个表格的属性“居中居中”。(4 4)在相应的单元格中,插入相应的图片、文字和空链接。)在相应的单元格中,插入相应的图片、文字和空链接。(5 5)设置第二个表格的属性)设置第二个表格的属性“高度高度”。【拓展训练】【拓展训练】任务任务4.2 4.2 绿色食品网站表格与表格布局网页的制作绿色食品网站表格与表格布局网页的制作 本单元本单元“拓展训练拓展训练”的任务卡如表的任务卡如表4.34.3所示。所示。任务编号任务编号4.24.2任务名称任务名称绿色食品网站表格与表格布局网页的制作绿色食品网站表格与表格布局网页的制作网页主题网页

    34、主题绿色食品绿色食品计划工时计划工时 拓展训练任务描述拓展训练任务描述(1 1)在网页中插入表格,并合理地设置表格的属性)在网页中插入表格,并合理地设置表格的属性(2 2)设置表格、行、列和单元格的属性)设置表格、行、列和单元格的属性(3 3)在表格的单元格中输入文字、图像,并设置文字、图像的属性)在表格的单元格中输入文字、图像,并设置文字、图像的属性(4 4)插入嵌套表格,并设置嵌套表格的属性)插入嵌套表格,并设置嵌套表格的属性(5 5)合并与拆分单元格)合并与拆分单元格(6 6)利用表格对网页进行布局)利用表格对网页进行布局(7 7)设置滚动文本效果)设置滚动文本效果表表4.3 单元单元4

    35、“拓展训练拓展训练”任务卡任务卡 本单元本单元“拓展训练拓展训练”的任务跟踪卡如表的任务跟踪卡如表4.44.4所示。所示。任务编号任务编号开始时间开始时间完成时间完成时间计划工时计划工时实际工时实际工时当前状态当前状态 表表4.4 单元单元4“拓展训练拓展训练”任务跟踪卡任务跟踪卡 本单元所制作的网页应用表格插入表格元素(细线表格)和进行本单元所制作的网页应用表格插入表格元素(细线表格)和进行布局,通过本项目的学习,读者应熟悉在网页中插入表格的方法,在布局,通过本项目的学习,读者应熟悉在网页中插入表格的方法,在表格中插入嵌套表格及行、列的方法,表格及单元格的属性设置方法,表格中插入嵌套表格及行、列的方法,表格及单元格的属性设置方法,拆分和合并单元格的方法。同时本单元还介绍了设置滚动文本的方法,拆分和合并单元格的方法。同时本单元还介绍了设置滚动文本的方法,读者应对表格元素的插入、细线表格的制作和表格布局的使用有一定读者应对表格元素的插入、细线表格的制作和表格布局的使用有一定的认识。的认识。

    展开阅读全文
    提示  163文库所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
    关于本文
    本文标题:网页设计与制作项目教程单元4-表格与表格布局网页的制作.pptx
    链接地址:https://www.163wenku.com/p-3223758.html

    Copyright@ 2017-2037 Www.163WenKu.Com  网站版权所有  |  资源地图   
    IPC备案号:蜀ICP备2021032737号  | 川公网安备 51099002000191号


    侵权投诉QQ:3464097650  资料上传QQ:3464097650
       


    【声明】本站为“文档C2C交易模式”,即用户上传的文档直接卖给(下载)用户,本站只是网络空间服务平台,本站所有原创文档下载所得归上传人所有,如您发现上传作品侵犯了您的版权,请立刻联系我们并提供证据,我们将在3个工作日内予以改正。

    163文库