《使用表格布局完整的网页课件》由会员分享，可在线阅读，更多相关《使用表格布局完整的网页课件（25页珍藏版）》请在金锄头文库上搜索。
1、主讲教师：谭荣华,网页设计与制作学习情境5：使用表格布局完整的网页,布置习题,学习目标,知识讲解,课堂实践,教学总结,使用表格布局完整的网页,学习情境5,课程引导,网页制作是免不了与表格打交道的。表格是早期网页制作重要的布局对象，在网页布局中起着举足轻重的作用，但随着CSS的强大功能被人们所熟知和熟练应用后，表格布局一统天下的局面得以改变，人们越来越觉得表格应回归其本位-即数据表。今天，我们更多地是采用div+css的布局方法来制作网页。但对于初学者来讲，熟悉表格的用法和表格布局仍然是制作网页制作的”敲门砖”。,概述,布置习题,知识讲解,课堂实践,教学总结,课程引导,使用表格布局完整的网页,学
2、习情境5,学习目标,学会添加表格、设置表格属性 掌握设置表格中行和列属性的方法 掌握拆分单元格，合并单元格的方法 掌握在表格中输入文字并定位的方法 掌握在表格中插入图像并定位的方法,学习目标,布置习题,知识讲解,课堂实践,教学总结,课程引导,使用表格布局完整的网页,学习情境5,学习目标,页面布局的概念与要求 创建表格、设置表格属性、选择表格的方法 增删表格的行列、合并和拆分单元格、添加表格的背景颜色 导入、导出表格式数据、排序表格的数据,专 业 能 力 目 标,布置习题,知识讲解,课堂实践,教学总结,课程引导,使用表格布局完整的网页,学习情境5,学习目标,熟练使用Dreamweaver CS3
3、表格基本操作的能力 利用表格进行页面布局的能力,专 业 知 识 目 标,布置习题,知识讲解,课堂实践,教学总结,课程引导,使用表格布局完整的网页,学习情境5,学习目标,自主学习能力 创新能力 色彩感悟能力 知识应用能力 效率观念 结构布局能力,专 业 素 质 目 标,课堂实践,布置习题,学习目标,教学总结,课程引导,使用表格布局完整的网页,学习情境5,知识讲解,教学案例,案例01 制作产品销售表,案例02 制作圆角表格,案例03 处理表格中的数据,综合案例实训 - 制作“某科技有限公司”公司业绩页面,课堂实践,布置习题,学习目标,教学总结,课程引导,使用表格布局完整的网页,学习情境5,知识讲解
4、,案例操作过程,相关知识点,案例01 制作产品销售表,课堂实践,布置习题,学习目标,教学总结,课程引导,使用表格布局完整的网页,学习情境5,知识讲解,相关知识点,数据表格（如产品销售表） 定位网页元素,表格的作用,课堂实践,布置习题,学习目标,教学总结,课程引导,使用表格布局完整的网页,学习情境5,知识讲解,相关知识点,用表格最大的优点就是能在不同分辨率下保持一致的位置不会改变，而且表格可以嵌套表格，可以放置网页上的任何元素，什么功能都能实现。 而它的缺点就是不能自由的移动它的位置。,表格布局网页的优缺点,课堂实践,布置习题,学习目标,教学总结,课程引导,使用表格布局完整的网页,学习情境5,知
5、识讲解,相关知识点,菜单命令创建 利用“常用”插入栏创建 HTML代码创建,DW中创建表格,课堂实践,布置习题,学习目标,教学总结,课程引导,使用表格布局完整的网页,学习情境5,知识讲解,相关知识点,创建表格的时候可以指定表格的基本属性，而在表格创建完后，也可以根据需要在“属性”面板中重新调整其基本属性。要设置表格的属性首先应该选中表格，如果在设计视图中用鼠标直接选不好选的话，可以借助标签选择器来选择,设置表格属性,课堂实践,布置习题,学习目标,教学总结,课程引导,使用表格布局完整的网页,学习情境5,知识讲解,案例02 制作圆角表格,案例操作过程,相关知识点,课堂实践,布置习题,学习目标,教学
6、总结,课程引导,使用表格布局完整的网页,学习情境5,知识讲解,相关知识点,“修改表格插入行” (Ctrl+M) “修改表格插入列” (Ctrl+Shift+A) “修改表格删除行” (Ctrl+Shift+M) “修改表格删除列” (Ctrl+Shift+-) 利用菜单、快捷菜单或快捷键都可以完成,增加、删除行或列,课堂实践,布置习题,学习目标,教学总结,课程引导,使用表格布局完整的网页,学习情境5,知识讲解,相关知识点,合并单元格 “修改表格合并单元格” 拆分单元格 “修改表格拆分单元格” 也可利用属性面板中的“合并与拆分单元格”按钮,合并、拆分单元格,课堂实践,布置习题,学习目标,教学总结
7、,课程引导,使用表格布局完整的网页,学习情境5,知识讲解,相关知识点,为表格设置背景颜色,课堂实践,布置习题,学习目标,教学总结,课程引导,使用表格布局完整的网页,学习情境5,知识讲解,相关知识点,关键两点： 表格间距为1,边框为0,填充为0 单元格背景色与页面背景色相同,制作细线（1像素）表格,课堂实践,布置习题,学习目标,教学总结,课程引导,使用表格布局完整的网页,学习情境5,知识讲解,案例03 处理表格中的数据,案例操作过程,相关知识点,课堂实践,布置习题,学习目标,教学总结,课程引导,使用表格布局完整的网页,学习情境5,知识讲解,相关知识点,“文件导入表格式数据” “文件导出表格”,导
8、入、导出表格式数据,课堂实践,布置习题,学习目标,教学总结,课程引导,使用表格布局完整的网页,学习情境5,知识讲解,相关知识点,“命令排序表格”,排序表格中的数据,课堂实践,布置习题,学习目标,教学总结,课程引导,使用表格布局完整的网页,学习情境5,知识讲解,页面效果图,综合案例实训 制作“某科技有限公司” 页面,实训步骤： 在本地站点webdesign下面新建kejigongsi文件夹，将随书光盘05最终文件综合案例实验images文件夹复制到D:webdesign kejigongsi 在“文件”面板中展开kejigongsi文件夹，在其下面新建名为“index.html”的文档，将插入点
9、放置在页面中，选择“插入记录表格”命令，插入3行2列的表格，表格宽度设为758px，边框、间距、填充都设为0 将表格的第一行和第三行单元格合并 将插入点放置在表格的第一行中，选择“插入记录图像”命令，插入kejigongsi文件夹下的images文件夹中的图像文件“xmo_r1.gif” 将插入点放置在表格的第二行第一格中，选择“插入记录图像”命令，插入kejigongsi文件夹下的images文件夹中的图像文件“xmo_r2.gif” 将插入点放置在表格的第二行第二格中，设置其“垂直”对齐为顶端，选择“插入记录表格”命令，嵌套一个2行1列的表格，表格宽度设为627px，此表格记为“嵌套表格1
10、” ，并在“嵌套表格1”的第一行插入kejigongsi文件夹下的images文件夹中的图像文件“yj.gif”,实训步骤： 将插入点放置在“嵌套表格1”的第二行，设置背景图像为kejigongsi文件夹下的images文件夹中的图像文件“xmo_r3.gif”，将“水平”设置为“居中对齐”，“垂直”为顶端，“高”设为340 选择“插入记录表格”命令，嵌套一个11行1列的表格，表格的“填充”设为6，“间距”为1，“背景颜色”设置为#e3e3e3，此表格记为“嵌套表格2” 选中“嵌套表格2”的所有单元格，将“背景颜色”设为#FFFFFF，分别在“嵌套表格2”输入相应文字，将“大小”设为13px
11、将插入点放置在表格的第三行，插入kejigongsi文件夹下的images文件夹中的图像文件“xmo_r4.gif” 保存文档，按F12在浏览器中预览效果 修改文档，重新保存文件、预览直至符合要求,布置习题,学习目标,知识讲解,教学总结,课程引导,使用表格布局完整的网页,学习情境5,课堂实践,课堂实践：同步模仿操作-案例01-03 综合案例实训：制作“某科技有限公司”网页,布置习题,学习目标,知识讲解,课堂实践,课程引导,使用表格布局完整的网页,学习情境5,教学总结,疑难解析,表格的变形情况分为几种，如何解决这些问题？ 如何让字符不会撑大表格？ 为什么在DW中把单元格宽度或高度设置为1没有任何
12、效果？ 嵌套表格中，有时很难将插入点定位在需要的单元格中，什么方法可能很好地解决这个问题？,布置习题,学习目标,知识讲解,课堂实践,课程引导,使用表格布局完整的网页,学习情境5,教学总结,学习情境5主要讲述了网页制作中表格的用途和用法，介绍了DW中表格的基本操作以及如何利用表格来布局页面的方法，表格布局有自己的优点，但缺点也是显而易见的，学习完DIV+CSS布局方法后大家可能对此会有进一步的认识。总的说来，表格在网页设计与制作中是很重要的，希望同学们能熟练掌握,课堂小结,学习目标,知识讲解,课堂实践,教学总结,课程引导,使用表格布局完整的网页,学习情境5,布置习题,上网搜索表格布局与其他网页布局方法优劣比较,
