首页 表格布局（一）

表格布局（一）

表格布局（一）表格布局（一）要设计一个网页，就要涉及到很多网页元素，例如图像、文本、动画、视频新课导入教师讲解等等。如何将这些网页元素有机的组合起来，达到满意的视觉效果，这不仅需要3’ 演示网页元素有自身的特点，还必须把这些元素放在合适的位置上，这就是网页元素的定位，或称页面布局。利用Dreamwever，可实现三种方式的页面布局:即表格布局、Div+CSS布局、框架布局。采用这些页面布局方法，可以简洁明了和高效快捷的将文本、图片和多媒体对象等网页元素有序地显示在页面上，从而设计出版式美观的页面效果。...

表格布局（一）要设计一个网页，就要涉及到很多网页元素，例如图像、文本、动画、视频新课导入教师讲解等等。如何将这些网页元素有机的组合起来，达到满意的视觉效果，这不仅需要3’ 演示网页元素有自身的特点，还必须把这些元素放在合适的位置上，这就是网页元素的定位，或称页面布局。利用Dreamwever，可实现三种方式的页面布局:即表格布局、Div+CSS布局、框架布局。采用这些页面布局方法，可以简洁明了和高效快捷的将文本、图片和多媒体对象等网页元素有序地显示在页面上，从而设计出版式美观的页面效果。本节课熟悉一下表格布局的基本操作及方法。教师演示:表格布局基本操作(任务1)的效果。任务一表格布局基础新课教学教师布置教师布置任务:表格基本操作。效果如下图: 65’ 任务、学生探索学习、教师讲解学生讨论练习:根据操作提示步骤，自行探索、讨论、练习设计方法。教师讲解:演示讲解学生操作中的问题。参考操作步骤: 1(新建站点task1，指向文件夹E:\web3\task1，在站点中新建网页table.html。网页标题为“任务一——表格布局基础”。 2(设置table.html的页面属性，字体大小为12px，文本颜色为#333333。 3(使用任一种插入表格的方法插入一个6行4列的表格，表格宽度为600px，边框粗细为1px，并“居中对齐”。 1 4(切换至“代码”视图。修改代码: 如下:

5(选中最左侧一列的所有单元格，在单元格的属性窗口中设置高度为20px。 6(选择最上面一行所有单元格()，在单元格的属性窗口中设置背景颜色为 #FFCCCC。 7(选择右下角5个单元格，在属性窗口中点击合并所选单元格按钮，合并单元格。 8(在所有相应单元格中填充内容，设置单元格属性“水平”为“居中对齐”。并设置最右一个单元格宽度为100px。完成上图所示效果。教师布置任务:表格数据排序:组织数据是表格的一个重要的功能，“表格数据的排序”是一个比较实用的功能。效果如下图: 2 学生讨论练习:根据操作提示步骤，自行探索、讨论、练习设计方法。教师讲解:演示讲解学生操作中的问题。参考操作步骤: 1(复制“素材\任务1\排序表格源文件.doc”中表格至table.html中，效果如下: 2(表格属性:“居中对齐”，边框为0;所有的单元格，在单元格属性面板中设置“水平”“居中对齐”，高度为20px。 3(选择菜单【命令】,【排序表格】命令，打开“排序表格”对话框，设置以列1为序排列数据。 4(设置表格奇数行背景色为#D3D3D3，实现任务效果图。教师布置任务:细线表格制作:在网页制作中，为了达到美观的效果，经常需要设置细线表格或只有外框线的表格。效果如下图: 学生讨论练习:根据操作提示步骤，自行探索、讨论、练习设计方法。教师讲解:演示讲解学生操作中的问题。 3 参考操作步骤: 1.复制第一个任务中的表格, 选中表格，设置表格属性，间距为1，边框为0。 2.切换到“代码”视图，修改代码:

为

3. 选中除标题行以外的单元格，设置单元格属性:背景颜色为#FFFFFF，实现如图效果。教师布置任务:细线表格制作:只有外框线的表格。效果如下图: 学生讨论练习:根据操作提示步骤，自行探索、讨论、练习设计方法。教师讲解:演示讲解学生操作中的问题。参考操作步骤: 1.复制第一个任务中的表格, 修改表格属性，边框为0。 2.在“CSS样式”窗口“新建CSS 规则 ”，在弹出的对话框中新建一个.border的类，仅限该文档。 3.定义.border的CSS规则为1px颜色为#333的实线边框线，将border类应用于表格。实现如图效果。 4 教师布置任务:利用表格实现水平线:实现方法是将表格的某一行的行高设置为 1px，再设置背景颜色即可。效果如下图: 学生讨论练习:根据操作提示步骤，自行探索、讨论、练习设计方法。教师讲解:演示讲解学生操作中的问题。参考操作步骤: 1.插入2行2列的表格，宽度为600px，填充、间距、边框均为0。 2.除右上角的单元格外，设置单元格背景色为#ae6e09。 3.设置左上角第一个单元格宽度为100px，高度为22px，水平居中对齐，添加文字“目录”，并为“目录”设置CSS样式.white，白色文字。 4.合并第二行，设置行高为1，切换到“代码”视图，删除间的html 标记，实现样图所示的效果。教师布置任务:圆角表格的制作:圆角表格的制作需要借助于图像处理软件(如 photoshop)来实现。效果如下图: 学生讨论练习:根据操作提示步骤，自行探索、讨论、练习设计方法。教师讲解:演示讲解学生操作中的问题。 5 参考操作步骤: 1.打开图像处理软件，利用圆角矩形工具(填充像素、半径15px、设置前景色 #659ED8)。制作出2个图像:两个20*20px的1/4圆角和。分别取名为left.jpg 和right.jpg，保存于站点web3的task1/images文件夹下。 2.在table.html中插入一个2行3列的表格，表格宽度为240px，填充、边距、边框均为0。 3.在第1行左上角插入图像images/left.jpg，单元格宽度为20px;右上角插入图像images/rigth.jpg，单元格宽度为20px;中间的单元格设置背景色同圆角颜色。 4.新建CSS类.box，设置边框线为实线1px，颜色同圆角颜色。 5.合并第二行的三个单元格，设置高度为200px;应用类.box，达到样图所示的效果。教师布置任务:制作变色表格:非常有用的特效，可以使单元格有悬停按钮的效果，常用来制作导航栏。效果如下图: 学生讨论练习:根据操作提示步骤，自行探索、讨论、练习设计方法。教师讲解:演示讲解学生操作中的问题。参考操作步骤: 1.插入1行1列的表格，宽度为180px，边框和填充均为0，间距为1。 2.设置单元格高度为28px，背景颜色为#E4ECBE，并输入文字“校园风景线”，设置水平居中对齐。 6 3.将光标定位在该单元格内，切换到代码视图，在

标签内加入以下代码: onmouseover="this.style.backgroundColor='#ffffcc'" onmouseout="this.style.backgroundColor='#e4ecbe'" 4.切换到设计视图，将光标定位在单元格内，连续按4次【Tab】键，插入4行，分别输入文字。实现样图所示的效果教师理论知识总结 : 表格属性含义: 一张表格(table)横向叫行(row，html代码为tr)，纵向叫列(column)。行列交叉部分就叫做单元格(cell，html代码为td;若本行设置为标题行，则html 代码为th)。单元格中的内容和边框之间的距离叫边距或填充(cellpadding)。单元格和单元格之间的距离叫间距(cellspacing)。整张表格的边缘叫做边框 (border) 教学评价表: 教学评价学生展示得分(各项项目 17’ 并自评 70%为基准) 教师评议完成项目情况(60%) 表格的基本操作(5) 完成情况 7 表格排序正确(5) 细线表格正确(10) 只有外框线的表格(10) 利用表格实现水平线(10) 圆角表格(10) 变色表格(10) 自主学习能力(20%) 是否帮助别人(10%) 有没有与众不同的想法并实现(10%) 课堂小结小结:表格是网页的一个非常重要的组成部分。在网页设计中，表格的功能5’ 不仅仅局限于进行数据处理，更主要的是借助它来实现网页的精确排版。有效地利用表格可以让版面看起来更有条理性，这样既可以充分利用整个页面空间，同时也使网页更整齐、美观，同时也让网页更具专业性。表格属性含义、细线表格制作、CSS样式控制表格格式思考:1、如何制作细线表格,请课后自行练习完成其他颜色的细线表格。 2、细线表格有没有其他的制作方法,请上网查阅，并尝试完成。并将网页提交学习平台。作业: 复习本次课内容。预习:项目三任务2表格布局之全球资讯在线。 8

                    本文档为【表格布局（一）】，请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑，
                    图片更改请在作品中右键图片并更换，文字修改请直接点击文字进行修改，也可以新增和删除文档中的内容。 
 该文档来自用户分享，如有侵权行为请发邮件ishare@vip.sina.com联系网站客服，我们会及时删除。

                    [版权声明] 本站所有资料为用户分享产生，若发现您的权利被侵害，请联系客服邮件isharekefu@iask.cn，我们尽快处理。

                    本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用。

                    网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
                

下载需要：免费已有0 人下载

立即下载

表格布局（一）

你可能还喜欢