《项目八 表格元素的应用ppt课件.pptx》由会员分享，可在线阅读，更多相关《项目八 表格元素的应用ppt课件.pptx（43页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、项目八 表格元素的应用项目八 表格元素的应用学习目标学习目标掌握表格的插入掌握表格的拆分与合并、插入与删除掌握设置表格的属性掌握利用表格进行网页布局项目八 表格元素的应用项目项目简介简介通过前面项目的学习，我们掌握了文本、图像、多媒体等元素的应用，但我们在插入网页元素时，并不能很好地控制各种无素的位置。表格是HTML语言中的一种元素，主要用于网页内容的布局，组织整个网页的外观，通过表格可以精确地控制各网页元素在网页中的位置。该项目需要掌握插入表格元素的方法，设置表格元素属性以及利用表格元素进行网页布局等操作。本项目要完成的任务：任务一 表格元素的插入与属性设置任务二 运用表格进行网页布局任务一
2、 表格元素的插入与属性设置任务任务描述描述该任务主要完成表格元素的插入与编辑，通过对表格的合并与拆分，宽、高度的调整以及属性的设置，达到熟练掌握运用表格实现对网页布局的技能。该任务的需求如下所示：1.在“WebTest项目8”文件夹中新建8-1.html文档，并实现如图8-1所示的页面效果；图8-1 8-1.html页面浏览效果图任务一 表格元素的插入与属性设置2.网页设计要求（1）插入一个3行4列的表格（2）表格设置：1）宽度为800px；2）边框粗细为1px；3）对齐为居中对齐；4）背景颜色为蓝色；5）把第一行单元格合并成一个单元格再拆分成两行；6）把第一行高度设置为50px,背景颜色设置
3、为红色；7）设置第三行第1列单元格宽为200px，高为40px；8）删除第1列，再删除第四行；9）在第三行后面插入一新行。项目八 表格元素的应用任务任务实施实施1.新建文档新建 8-1.html文档，并保存到“WebTest/项目8”文件夹中；项目八 表格元素的应用2.插入表格在8-1.html文档的“设计”视图中，把光标定位到页面的第一行位置点击“插入”菜单选择“表格”在弹出的“表格”对方框中，“行”输入3，“列”输入4，“表格宽度”输入800，单位选择“像素”，“边框粗细”输入1，其它参数默认，如图8-2所示 确定图8-2 创建表格对话框项目八 表格元素的应用3.属性设置（1）设置表格居中
4、对齐选中表格在属性面板如图8-3所示， 在“对齐”下拉菜单中选择“居中对齐”；图8-3 表格属性项目八 表格元素的应用（2）设置表格背景色方法一：切换到“代码”视图在“表格”标签中敲空格，在代码提示中选择bgcolor，在拾色器中选择蓝色（#0000FF）。项目八 表格元素的应用方法二：选中表格单击“修改”菜单单击“编辑标签”，弹出“标签编辑器-table”如图8-4所示在“背景颜色”拾色器中选择蓝色（#0000FF）。图8-4 table标签编辑器对话框项目八 表格元素的应用提示：在DW6中，表格属性面板中没有“背景颜色”设置，可在table标签编辑器里进行背景颜色设置，但选择单元格时属性面
5、板中会显示背景颜色。项目八 表格元素的应用（3）合并单元格选中第一行中的4个单元格点击鼠标右键在快捷菜单中选择“表格”选择“合并单元格”。（4）拆分单元格选中第一行点击鼠标右键在快捷菜单中选择“表格”选择“拆分单元格”在“拆分单元格”对话框中选择“行”单选按钮，“行数”输入2确定。项目八 表格元素的应用（5）设置行的宽、高和背景颜色选中第一行在属性面板中“高”输入50，（默认为像素px）在“背景颜色”拾色器中选择红色（#FF0000）。（6）设置单元格宽高把光标定位到第三行第一列中在属性面板中“宽”输入200,“高”输入40项目八 表格元素的应用（7）删除列把光标定位到第三行第一列中点击鼠标右
6、键在快捷菜单中选择“表格”选择“删除列”。（8）删除行把光标定位到第四行点击鼠标右键在快捷菜单中选择“表格”选择“删除行”。项目八 表格元素的应用（9）插入行把光标定位到第四行点击鼠标右键在快捷菜单中选择“表格”选择“插入行”4.保存网页，按F12在浏览器中浏览效果。提示2：在标签中按敲空格键【space】会显示属性提示，可大大帮助设计人员编码。任务二 运用表格进行网页布局任务任务描述描述通过对前一个任务的学习，我们掌握了表格元素的基本操作与设置，该任务要求会运用表格进行网页布局。通过该任务的学习，提高学生网页设计实践操作技能。该任务的需求如下所示：任务二 运用表格进行网页布局1.在“WebT
7、est项目8”文件夹中新建8-2.html文档，并实现如图8-5所示的页面效果。图8-5 8-2.html页面浏览效果图任务二 运用表格进行网页布局2.网页设计要求（1）为页面设置背景图像，图像为“WebTest项目8imagesbg.jpg”；（2）运用表格进行页面布局（页面分“网页头部即logo部分”、“菜单”、通知/新闻栏目、图片展示、页脚（版权信息）等部分）；提示：应用表格嵌套，制作复杂的页面布局效果。提示：应用表格嵌套，制作复杂的页面布局效果。任务二 运用表格进行网页布局（3）网页头部插入背景图像“WebTest项目8imagestop.jpg”，并在背景图像上Flash动画，设置F
8、lash动画为透明模式；（4）插入菜单背景图像“WebTest项目8imagesMenu_left.jpg、Menu_mid.jpg、Menu_right”；并输入菜单名称；任务二 运用表格进行网页布局（5）插入“通知公告”、“图片新闻”、“新闻资讯”三栏目的背景图像“WebTest项目8imageslm_bg.jpg”，并在对应栏目下插入“图像占位符”代替具体内容。（6）插入“图片展示”栏目背景图像“WebTest项目8imagespic_bg.jpg”，并输入“图片展示”文本。并在栏目下插入“图像占位符”代替具体内容。（7）插入页脚信息。提示：以上所有栏目上面的文本的十六进制颜色代码为提示
9、：以上所有栏目上面的文本的十六进制颜色代码为#00CCFF。任务二 运用表格进行网页布局任务实施任务实施1.新建文档新建 8-2.html文档，并保存到“WebTest/项目8”文件夹中；任务二 运用表格进行网页布局2.设置网页属性（1）设置页面背景与页面边距点击属性面板中的“页面属性”，弹出如图8-6所示的页面属性对话框点击“外观”选项（默认打开为外观）点击“图像背景”后的“浏览”按钮选择图像“WebTest/项目8/images/bg.jpg” “重复”选择“repeat-x”“上边距”输入0，单位选择px选择“链接”选项“下划线样式”选择“始终无下划线”确定。任务二 运用表格进行网页布局
10、图8-6 页面属性对话框任务二 运用表格进行网页布局3. 插入外层表格根据网页浏览效果图，页面分为头部、菜单、栏目块、图片展示和页脚五部分，因此，先插入一个5行一列的表格来布局相关部分信息。任务二 运用表格进行网页布局步骤：点击“插入”菜单点击“表格”，弹出如图8-7所示对话框“行数”输入5，“列”输入1，“表格宽度”输入980像素，因表格主要用来布局页面，浏览时不需要显示，所以边框粗细、单元格边距和单元格间距均设为0确定选中表格属性面板中“对齐”选择“居中对齐”。图8-7 表格对话框任务二 运用表格进行网页布局4.制作“网页头”（1）在表格第一行单元格中插入背景图像光标定位在表格第一行中切换
11、到“代码”视图在第一行单元格中输入宽、高和背景，如代码所示：（背景图片top.jpg宽为980像素、高为180像素，background为设置“背景图像”属性）任务二 运用表格进行网页布局（2）在表格第一行单元格中插入Flash动画切换到“设计”视图光标定位在表格第一行中插入媒体SWF选择Flash动画“WebTest/项目8/images/Flash.swf”确定确定选中Flash对象在属性面板中设置宽970像素、高170像素，wmode选择“透明”（读者可先可不设置透明，观看浏览效果）任务二 运用表格进行网页布局5.制作菜单光标定位在第二行插入一个1行3列的表格，属性设置如图8-8所示选中
12、“第1个单元格”，在属性面板中设置“高”为37像素，宽为14像素，并添加背景图片“WebTest/项目8/images/Menu_left.jpg”，代码如下所示：选中“第3个单元格”，在属性面板中设置“高”为37像素，宽为20像素，并添加背景图片“WebTest/项目8/images/ Menu_right.jpg”， 如代码所示：光标定位在第2个单元格，并添加背景图片“WebTest/项目8/images/Menu_mid.jpg”，如代码所示：图8-8 插入表格对话框任务二 运用表格进行网页布局6.制作栏目（1）光标定位在外层表格的第三行，在属性面板中设置“垂直”为“顶端”对齐插入一个1
13、行3列，属性设置如图8-9所示；图8-9插入表格对话框任务二 运用表格进行网页布局（2）光标定位在第1个单元格中，在属性面板中设置“垂直”为“顶端”对齐，宽为350像素，并插入一个2行1列表格，属性设置如图8-10所示，设置第1行高为36像素，并添加背景图片“WebTest/项目8/images/lm_bg.jpg”，如代码所示，在背景图像上输入文字“通知公告”文字颜色设置为白色，设置第2行“垂直”为“顶端”对齐，高为150像素，在该行中插入一个高150像素、宽350像素、颜色代码为“#66CCFF”的图像点位符。图8-10 插入表格对话框任务二 运用表格进行网页布局（3）光标定位在第2个单元
14、格中，在属性面板中设置“垂直”为“顶端”对齐，宽为280像素，并插入一个2行1列表格，属性设置如图8-10所示，设置第1行高36像素，并添加背景图片“WebTest/项目8/images/lm_bg.jpg”，如代码所示，在背景图像上输入文字“图片新闻”文字颜色设置为天蓝色，设置第2行“垂直”为“顶端”对齐，高为150像素，在该行中插入一个高150像素、宽280像素、颜色代码为“#FFFFCC”的图像点位符。任务二 运用表格进行网页布局（4）光标定位在第3个单元格中，在属性面板中设置“垂直”为“顶端”对齐，宽为350像素，并插入一个2行1列表格，属性设置如图8-10所示，设置第1行高36像素，
15、并添加背景图片“WebTest/项目8/images/lm_bg.jpg”，如代码所示，在背景图像上输入文字“新闻资讯”文字颜色设置为天蓝色，设置第2行“垂直”为“顶端”对齐，高为150像素，在该行中插入一个高150像素、宽350像素、颜色代码为“#66CCCC”的图像点位符。任务二 运用表格进行网页布局7.制作图片展示光标定位在外层表格的第四行，在属性面板中设置“垂直”为“顶端”对齐插入一个2行1列，属性设置如图8-11所示，光标定位在第一行，在属性面板中设置高为36像素；并添加背景图片“WebTest/项目8/images/ pic_bg.jpg”，如代码所示，在背景图像上输入文字“新闻资
16、讯”文字颜色设置为天蓝色，设置第2行“垂直”为“顶端”对齐，高为150像素，在该行中插入一个高150像素、宽980像素、颜色代码为“#33FFFF”的图像点位符。图8-11 插入表格对话框任务二 运用表格进行网页布局8.制作页脚光标定位在外层表格的第五行，在属性面板中设置行高为40像素，“水平”选择“居中对齐”，背景颜色代码为“#CCCCCC”，并输入版权信息（如：版权所有：XXXX理职业学院）。9.保存网页，按F12在浏览器中浏览效果。知识拓展一、表格的结构表格是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行，垂直的多个单元格称为列。行与列的交叉区域称为单元格，网页中的元素通常被
17、放置在这些单元格中，以便精确控制其显示位置。1.单元格：表格中容纳数据的基本单元，是构成表格的最小单位；2.行：表格中横向的一组单元格；知识拓展3.列：表格中纵向的一组单元格；3.填充（边距）：内容与单元格边线之间的距离；4.间距：表格与单元格的距离；5.边框：外框线及单元格的分隔线。表格的结构如图8-12所示：图8-12 表格结构知识拓展二、表格元素对应的HTML标签1.:表格的开始和结束；2.：表格的行；3.：表格的单元格；4.：表格的标题；知识拓展5.：表格的列名，也就是表格的第一行标签，一般可以用代替。例如：创建标题为“学生成绩表”的表格，表格及对应的HTML代码如图8-13所示：图8
18、-13 学生成绩表格及HTML代码知识拓展三、表格的嵌套三、表格的嵌套一个表格的单元格中可以再插入一个表格，值得注意的是，嵌套表格的宽度受容纳它的单元格宽度的限制，也就是说所插入的表格宽度不会大于容纳它的单元格宽度。表格的嵌套一方面是为使页面的外观更为整齐美观，利用表格嵌套来编辑出复杂而精美的效果，另一方面是出于布局需要，用一些嵌套方式的表格来做精确的编排。表格的嵌套层数没有严格的限制，但建议表格的嵌套层数不要超过三层，表格嵌套层数过多会影响网页浏览速度。知识拓展四、排序表格四、排序表格我们可以对表格中的数据进行排序：选中要排序的表格选择“命令”菜单“排序表格”在“排序表格”对话框中进行设置，
19、如图8-14所示确定图8-14 表格排序知识拓展五、导入和导出表格式数据五、导入和导出表格式数据1.导入表格数据（1）在导入表格式数据前，先将表格数据转换成文本格式（.txt），并且文件中的数据要带有分隔符，如逗号、分号等；（2）选择插入点“文件”菜单“导入”“表格式数据”在“导入表格式数据”对话框中选择前面准备好的文本文件，如图8-15所示选择“定界符”确定知识拓展图8-15 导入表格数据知识拓展2.导出表格导出表格（1）将光标放在表格中的任意单元格中；）将光标放在表格中的任意单元格中；（2）“文件文件”菜单菜单“导出导出”“表格表格”在在“导出导出表格表格”对话框中选择对话框中选择“定界符定界符”导出导出在在“表格导出为表格导出为”对话框中输入文件名称对话框中输入文件名称保存保存提示提示1：表格是网页布局设计中常用的工具，合理布局表格可使网页：表格是网页布局设计中常用的工具，合理布局表格可使网页便于管理和修改；便于管理和修改； 提示提示2：表格中，各单元格及其所包含的内容均可单独进行格式化。：表格中，各单元格及其所包含的内容均可单独进行格式化。