《网页设计与制作课件第3章创建与应用表格.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作课件第3章创建与应用表格.ppt（10页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、网页设计与制作网页设计与制作第一章第一章 HTML语言基础语言基础 2第二章第二章 初识初识Dreamweaver 4第三章第三章 创建与应用表格创建与应用表格 3第四章第四章 使用层和框架布局页面使用层和框架布局页面 3第五章第五章 CSS样式与模板的使用样式与模板的使用 3第六章第六章 行为、库和资源管理行为、库和资源管理 3第七章第七章 建立动态网站建立动态网站 3 第八章第八章 Flash动画基础知识动画基础知识 3第九章第九章 创建动画创建动画 3第十章第十章 使用使用Fireworks编辑网页图像编辑网页图像 31第三章第三章 创建与应用表格创建与应用表格 一、设置表格一、设置表格
2、1.插入表格插入表格2.2.选取表格元素选取表格元素选取整行或整列选取整行或整列鼠标单击行或列的头部鼠标单击行或列的头部单击状态栏的单击状态栏的 选取整行选取整行选取单元格选取单元格鼠标拖动鼠标拖动Ctrl或或Shift+单击单击单击状态栏的单击状态栏的 第三章第三章 创建与应用表格创建与应用表格选取整张表格选取整张表格单击表格的上或下边框线单击表格的上或下边框线Ctrl+ACtrl+A（两次）（两次）单击状态栏的单击状态栏的 table3.3.编辑表格内容编辑表格内容在表格中加入文本在表格中加入文本在表格中加入图像在表格中加入图像在表格中移动在表格中移动移动光标：移动光标：TABTAB和光标
3、键和光标键移动元素：鼠标拖动移动元素：鼠标拖动第三章第三章 创建与应用表格创建与应用表格4.修改表格修改表格设置表格对齐方式设置表格对齐方式选取整张表选取整张表/属性面板的属性面板的对齐对齐重定义表格尺寸重定义表格尺寸鼠标鼠标属性面板属性面板插入和删除表格行或列插入和删除表格行或列通过菜单插入行或列通过菜单插入行或列 修改修改/表格表格/删除行或列删除行或列 Del第三章第三章 创建与应用表格创建与应用表格设置表格边框和背景设置表格边框和背景设置表格边框设置表格边框 属性面板的属性面板的边框边框设置表格背景色设置表格背景色 属性面板的属性面板的背景颜色背景颜色设置表格背景图案设置表格背景图案
4、属性面板的属性面板的背景图像背景图像空白与间隔的设定空白与间隔的设定属性面板的属性面板的填充填充和和间距间距合并和拆分单元格合并和拆分单元格合并单元格合并单元格拆分单元格拆分单元格第三章第三章 创建与应用表格创建与应用表格5.表格的样式化表格的样式化设置单元格元素的水平对齐设置单元格元素的水平对齐属性面板的属性面板的水平水平设置单元格元素的垂直对齐设置单元格元素的垂直对齐属性面板的属性面板的垂直垂直颜色属性颜色属性设置单元格背景色设置单元格背景色 属性面板的属性面板的背景颜色背景颜色设置单元格边框色设置单元格边框色 属性面板的属性面板的边框边框第三章第三章 创建与应用表格创建与应用表格列宽列宽
5、鼠标拖动鼠标拖动属性面板的宽属性面板的宽6.表格的嵌套表格的嵌套由由总总表表格格负负责责整整体体的的排排版版，由由嵌嵌套套的的表表格格负负责责各各个个子子栏栏目目的的排排版版，并并插插入入到到总总表表格格的的相相应应位位置中。置中。为何使用嵌套表格？为何使用嵌套表格？1 1）网页的排版有时会很复杂，在外部需要有一个）网页的排版有时会很复杂，在外部需要有一个表格控制总体布局。如果一些内部排版的细节表格控制总体布局。如果一些内部排版的细节也通过总表格来实现，容易引起行高列宽等的也通过总表格来实现，容易引起行高列宽等的冲突，给表格制作带来困难。冲突，给表格制作带来困难。第三章第三章 创建与应用表格创
6、建与应用表格2 2）浏览器在解析网页的时候，是将）浏览器在解析网页的时候，是将整个表格的结构下载完毕之后才显整个表格的结构下载完毕之后才显示表格。如果不使用嵌套，表格非示表格。如果不使用嵌套，表格非常复杂，浏览者要等待很长时间才常复杂，浏览者要等待很长时间才能看到网页的内容。能看到网页的内容。总表格的宽度一般使用像素值，为总表格的宽度一般使用像素值，为了使嵌套表格的高、宽不和总表格了使嵌套表格的高、宽不和总表格发生冲突，嵌套子表格一般使用百发生冲突，嵌套子表格一般使用百分比设置高、宽。分比设置高、宽。第三章第三章 创建与应用表格创建与应用表格7.7.用布局表格进行页面布局用布局表格进行页面布局
7、布局模式布局模式绘制布局表格绘制布局表格绘制布局单元格绘制布局单元格8.8.表格源代码分析表格源代码分析table是是一一个个容容器器标标记记，用用以以标标识识表表格格；tr用以标识行；用以标识行；td用以标识单元格用以标识单元格 默默认认的的表表格格行行高高最最少少为为1313像像素素，要要想想设设置置低低于于该该值值的的高高度度，则则必必须须在在代代码码视视图图中中将将 td之之间间的的 nbsp;（空空格格占占位位符符）删删除除，然然后后给给 td添加添加heightheight属性即可。属性即可。第三章第三章 创建与应用表格创建与应用表格二、表格应用二、表格应用1 1、幂格式文本的输入（、幂格式文本的输入（P75P75）2 2、制作圆角方框（、制作圆角方框（P78P78）3 3、制作细线边框表格（制作细线边框表格（P79P79）