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

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布局网页。