Dreamweaver-CC第4章-表格和Div课件.ppt

上传人(卖家):三亚风情 文档编号:3377121 上传时间:2022-08-25 格式:PPT 页数:30 大小:2.41MB
下载 相关 举报
Dreamweaver-CC第4章-表格和Div课件.ppt_第1页
第1页 / 共30页
Dreamweaver-CC第4章-表格和Div课件.ppt_第2页
第2页 / 共30页
Dreamweaver-CC第4章-表格和Div课件.ppt_第3页
第3页 / 共30页
Dreamweaver-CC第4章-表格和Div课件.ppt_第4页
第4页 / 共30页
Dreamweaver-CC第4章-表格和Div课件.ppt_第5页
第5页 / 共30页
点击查看更多>>
资源描述

1、网页制作案例教程第4章 表格和Divl 了解表格的结构及Div+CSS布局的理念。l 掌握插入、编辑和设置表格的基本方法。l 掌握使用表格和Div+CSS布局页面的基本方法。l 掌握使用HTML5结构元素和jQuery UI布局部件的方法。学习目标4.1.1 认识表格4.1 使用表格 表格是由行和列组成的,水平方向的一组单元格称为行,垂直方向的一组单元格称为列。行和列是由单元格组成的,单元格是表格中一行与一列相交的部分,包括单元格边框及以内的区域,是组成表格的最基本单位。单元格之间的间隔称为单元格间距,单元格内容与单元格边框之间的间隔称为单元格边距(也称填充)。单元格边框包括亮边框和暗边框两部

2、分,粗细不可设置(默认1px),颜色可以设置。表格边框也包括亮边框和暗边框两部分,可以设置边框粗细、颜色等属性。4.1.2 导入和导出表格数据4.1 使用表格 一、导入表格式数据 4.1.2 导入和导出表格数据4.1 使用表格 二、导出表格数据 4.1.3 插入和设置表格4.1 使用表格 一、插入表格 选择菜单命令【插入】/【Table】或在【插入】面板的【HTML】类别中单击【Table】按钮,打开【Table】对话框进行参数设置即可。4.1.3 插入和设置表格4.1 使用表格 二、表格属性 在插入表格后,可以通过其【属性】面板修改相关参数,如可以设置表格的ID名称、对齐方式以及引用的类CS

3、S样式表等。4.1.3 插入和设置表格4.1 使用表格 左对齐和右对齐状态4.1.3 插入和设置表格4.1 使用表格 居中对齐和默认状态4.1.3 插入和设置表格4.1 使用表格 三、单元格属性 对于表格,还可以通过【属性】面板修改单元格相关属性,如可以设置单元格的水平和垂直对齐方式、宽度和高度、背景颜色等。4.1.4 编辑表格4.1 使用表格 一、选择表格、行或列、单元格 选择整个表格最常用的方法有以下几种。(1)单击表格左上角或单击表格中任何一个单元格的边框线,如图4-14所示。(2)将鼠标光标置于表格内,单击鼠标右键,在弹出的快捷菜单中选择【表格】/【选择表格】命令。(3)将鼠标光标移到

4、表格内,表格上端或下端弹出绿线的标志,单击绿线中的 按钮,从弹出的下拉菜单中选择【选择表格】命令,如图4-15所示。(4)将鼠标光标移到表格内,单击文档窗口左下角相应的标签。4.1.4 编辑表格4.1 使用表格 选择表格行或列最常用的方法有以下几种。(1)当鼠标光标位于欲选择的行首或列顶时,其变成黑色箭头形状,这时单击鼠标左键,便可选择行或列,如图4-16所示。如果按住鼠标左键并拖曳,可以选择连续的行或列,也可以按住Ctrl键依次单击欲选择的行或列,这样可以选择不连续的多行或多列。(2)按住鼠标左键从左至右或从上至下拖曳,将选择相应的列或行。(3)将鼠标光标移到欲选择的行中,单击文档窗口左下角

5、的标签选择该行。4.1.4 编辑表格4.1 使用表格 选择表格单元格最常用的方法有以下几种。(1)选择单个单元格:将鼠标光标置于单元格内,然后按住Ctrl键不放单击单元格或单击文档窗口左下角的标签将其选择。(2)选择相邻单元格:在开始的单元格中按住鼠标左键不放并拖曳到最后的单元格,也可将鼠标光标置于开始的单元格内,然后按住Shift键不放单击最后的单元格。(3)选择不相邻单元格:按住Ctrl键不放依次单击欲选择的单元格,或在已选择的连续单元格中依次单击欲去除的单元格。4.1.4 编辑表格4.1 使用表格 二、增加行或列首先将鼠标光标移到欲插入行或列的单元格内,然后采取以下最常用的方法进行操作。

6、(1)在鼠标右键快捷菜单中,选择【表格】/【插入行】表示在鼠标光标所在单元格的上面增加1行,选择【表格】/【插入列】表示在鼠标光标所在单元格的左侧增加1列。(2)在鼠标右键快捷菜单中,选择【表格】/【插入行或列】打开【插入行或列】对话框,如图4-17所示。4.1.4 编辑表格4.1 使用表格 三、删除行或列 如果要删除行或列,首先需要将鼠标光标置于要删除的行或列中,然后在鼠标右键快捷菜单中选择【表格】/【删除行】或【表格】/【删除列】进行删除。实际上,最简捷的方法就是先选定要删除的行或列,然后按Delete键进行删除。四、合并单元格 合并单元格是指将多个单元格合并成为一个单元格。首先选择欲合并

7、的单元格,然后单击鼠标右键,在弹出的快捷菜单中选择【表格】/【合并单元格】命令,也可单击【属性】面板左下角的【合并单元格】按钮进行单元格合并。4.1.4 编辑表格4.1 使用表格 五、拆分单元格 拆分单元格是针对单个单元格而言的,可看成是合并单元格的逆操作。首先需要将鼠标光标定位到要拆分的单元格中,然后在鼠标右键快捷菜单中选择【表格】/【拆分单元格】命令,也可单击【属性】面板左下角的【拆分单元格】按钮,打开【拆分单元格】对话框4.2.1 认识盒子模型和Div+CSS布局4.2 使用Div+CSS W3C组织建议把网页上的对象放在盒子中,CSS盒子模型有两种,分别是标准W3C盒子模型和IE盒子模

8、型。标准W3C盒子模型如图4-19所示,其范围包括margin、border、padding、content,其中content部分的宽度和高度不包含border和padding部分。4.2.1 认识盒子模型和Div+CSS布局4.2 使用Div+CSS IE盒子模型如图4-20所示,其范围也包括margin、border、padding、content,但与标准W3C盒子模型不同的是,IE盒子模型content部分的宽度和高度包含了border和pading部分。4.2.2 使用Div+CSS定位对象4.2 使用Div+CSS 在使用Div+CSS布局整个页面前,首先要清楚在页面中插入Div

9、标签以及使用CSS控制Div标签的基本方法。Div标签是用来定义页面内容的逻辑区域的标签,可以使用Div标签将内容块居中、创建列效果以及创建不同颜色区域等。选择菜单命令【插入】/【Div】或在【插入】面板的【HTML】类别中单击【Div】按钮,打开【插入Div】对话框,进行参数设置。4.2.2 使用Div+CSS定位对象4.2 使用Div+CSS 单击【新建CSS规则】按钮,打开【新建CSS规则】对话框进行参数设置。4.2.2 使用Div+CSS定位对象4.2 使用Div+CSS 打开【CSS规则定义】对话框进行参数设置。设置【类型】分类参数4.2.2 使用Div+CSS定位对象4.2 使用D

10、iv+CSS 设置【方框】分类参数。4.2.2 使用Div+CSS定位对象4.2 使用Div+CSS 设置【边框】分类参数。4.2.2 使用Div+CSS定位对象4.2 使用Div+CSS 插入的Div并输入文本。4.2.3 插入HTML5结构语意元素4.2 使用Div+CSS 在Dreamweaver CC 2017中插入HTML5结构语意元素的方法与插入Div是一样的,直接选择菜单命令【插入】/【Header】、【Navigation】、【Main】、【aside】、【article】、【Section】、【Footer】或在【插入】面板的【HTML】类别中单击【Header】等相应按钮。

11、打开的对话框与插入Div时也是相似的。4.2.4 插入jQuery UI布局部件4.2 使用Div+CSS jQuery UI中有几个与布局有关的小部件,如Accordion(折叠面板)和Tabs(选项卡面板)。可以通过选择【插入】/【jQuery UI】中的相应子菜单命令或在【插入】面板的【jQuery UI】类别中单击相应的按钮插入jQuery UI小部件。4.2.4 插入jQuery UI布局部件4.2 使用Div+CSS 一、Accordion(折叠面板)4.2.4 插入jQuery UI布局部件4.2 使用Div+CSS 二、Tabs(选项卡面板)4.3.1 飞翔装饰4.3 应用实例根据操作步骤使用表格布局网页。4.3.2 励志故事4.3 应用实例根据操作步骤使用Div+CSS布局网页。

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 办公、行业 > 各类PPT课件(模板)
版权提示 | 免责声明

1,本文(Dreamweaver-CC第4章-表格和Div课件.ppt)为本站会员(三亚风情)主动上传,163文库仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。
2,用户下载本文档,所消耗的文币(积分)将全额增加到上传者的账号。
3, 若此文所含内容侵犯了您的版权或隐私,请立即通知163文库(发送邮件至3464097650@qq.com或直接QQ联系客服),我们立即给予删除!


侵权处理QQ:3464097650--上传资料QQ:3464097650

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


163文库-Www.163Wenku.Com |网站地图|