[第4章网页布局技术.pptVIP

第4章 网页布局技术 4.1 表格 4.2 AP元素 4.3 框架 4.4 CSS样式表 本章要点  表格的创建、结构调整与美化方法，并通过表格进行网页的布局； 在网页中创建、删除、修改、移动AP元素和AP元素嵌套的方法； 框架网页的基本操作，以及利用框架结构制作网页； CSS样式表的创建、修改和应用。 表格 表格的创建 通过实例介绍表格的创建方法。 【案例4.1】创建一个4行4列的表格。 ① 新建一个空白的网页文档。 ② 将鼠标定位在要插入表格的位置上，单击“布局”面板中的“表格”按钮，或选择菜单【插入】→【表格】命令。 ③ 在弹出的表格对话框中设定表格的属性。如：行数为4，列数为4，宽度为400像素，其它保持默认设置，单击“确定”按钮。 ④ 表格插入完成，可以在表格中插入图像或文字 提示： 如果希望固定表格的大小，使用之不受浏览器大小的影响，则要以像素为单位设定表格的大小。 如果希望表格的大小与浏览器大小保持一定的比例关系，则要以百分比为单位设定表格的大小 表格对话框内各选项的作用 编辑表格––选定表格 ①选定整个表格 单击表格的边框部分 选择“标签选择器”中的table标签 【修改】→【表格】→【选择表格】 ②选定指定的行和列 鼠标移至行左边或列顶端时单击鼠标 鼠标拖动 ：行或列的第一个单元格 +shift+行或列的最后一个单元格 ③选定一个单元格 按住Ctrl键并单击单元格 选择td标签 ④选择部分单元格 选择多个相邻单元格:拖动鼠标或单击区域内第一个单元格+Shift键+区域内的最后一个单元格;可以同时 按Ctrl键单击单元格，可以选择不相邻的多个单元格； ⑤使用表格开头菜单选择表格 编辑表格––修改表格大小 选中表格边框或右下角，拖动鼠标 改变单元格的大小：用鼠标向左右或上下方向拖动单元格边界线 设置单元格的精确大小：将光标放置在指定单元格内，在单元格属性面板的“高”和“宽”中输入具体的数据，单元是像素或百分比。 提示：默认情况下单元格的大小用像素表示，如果想用百分比表示，则可以在输入的百分值后面输入%。另外，改变某个单元格的大小时，可能会引起其他单元格大小的改变。这时需要指定每个单元格的大小。 编辑表格––设置表格相关属性 选择表格后，可以在“表格属性”面板中指定表格的大小、边距、背景色等有关表格的所有属性 编辑表格––设置对齐方式 ① 设置表格的对齐方式。选择整个表格后，在“表格属性”面板的对齐列表中选择需要的排列方式，就可以排列表格在网页文档中左对齐、居中对齐或右对齐。 ② 设置单元格内容的对齐方式。选择包含要排列内容的单元格后，在“单元格属性”面板中可以单击需要的排列方式图标，可以排列单元格内部文字或图像的水平及垂直对齐方式。 提示：单元格内容的对齐方式只能在“单元格属性”面板中设置，因此不能选择整个表格，只能通过拖动选择多个单元格后，单击“单元格属性”面板中的排列图标。 编辑表格––添加、删除行或列 ① 添加一行或一列 利用快捷菜单：【表格】→【插入行】或【插入列】，在当前行的上方添加一行或在当前列左侧添加一列。 提示：添加一行也可以将光标置于最后一行的最后一个单元格，按Tab键在当前行下方会添加一行，但此方法不适于添加一列。 ② 添加多行或多列。利用快捷菜单：【表格】→【插入行或列】 ③ 使用菜单添加行或列 【修改】→【表格】→【插入行】命令可以添加一行，若选择【插入列】则可以添加一列，选择【插入行或列】可以添加多行或多列。 ④ 删除行或列。将光标放置在要删除的行或列中，单击鼠标右键，在弹出的快捷菜单中选择【表格】→【删除行】或【删除列】命令。或者按Delete键进行删除。 编辑表格––单元格的拆分与合并 单元格的合并。选择需要合并的多个单元格，单击“单元格属性”面板中的“合并单元格”图标，即合并单元格。 单元格的拆分。把鼠标放置到要拆分的单元格中，单击“单元格属性”面板中“拆分单元格”图标，在弹出对话框中设置要拆分为的行数或列数，即可将单元格拆分。 提示：拆分或合并单元格还可以在表格中单击鼠标右键，在弹出的快捷菜单中选择【表格】→【拆分单元格】或【合并单元格】，或者选择菜单【修改】→【表格】→【拆分单元格】或【合并单元格】命令。 使用表格构造网页布局 【案例4.2】 使用表格构造网页布局，成品实例如图所示，在教学资源文件的“ch04\成品实例\案例4.2\4-2.html”中 使用表格构造网页布局—案例 ① 新建一个空白的网页文档，设置网页的背景颜色为“#C1C1C1”，标题为“数码单反相机”。 ② 选择“布局”面板的“表格”按钮，在弹出的对话框中创建一个8行1列，宽度为600像素的表格，其