第3章 框架、表格、层与网页布局.ppt
《第3章 框架、表格、层与网页布局.ppt》由会员分享,可在线阅读,更多相关《第3章 框架、表格、层与网页布局.ppt(162页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、第第3 3章章 框架、表格、层与网页布局框架、表格、层与网页布局 【案例案例7 7】“操作系统比较操作系统比较”网页网页 3.1【案例案例8 8】“主流电脑配置单主流电脑配置单”网页网页3.2【案例案例9 9】“CPU“CPU进化史进化史”网页网页3.3【案例案例1010】“电脑展示电脑展示”网页网页3.43.1 3.1 【案例案例7 7】“操作系统比较操作系统比较”网网页页3.1.1学习目标学习目标“操作系统比较操作系统比较”网页的显示效果如图网页的显示效果如图3-1-1所示。该网页被分割成两个部分,网所示。该网页被分割成两个部分,网页的左半部分显示出网页的标题和各个页页的左半部分显示出网页
2、的标题和各个页面的链接,单击其中一个链接,即可在网面的链接,单击其中一个链接,即可在网页的右半部分显示出相应的内容,如图页的右半部分显示出相应的内容,如图3-1-2所示。通过本实例,介绍创建框架与编辑所示。通过本实例,介绍创建框架与编辑框架,以及在框架内插入框架,以及在框架内插入HTML文件内容文件内容的方法。的方法。图图3-1-1 “操作系统比较操作系统比较”网页的显示效果网页的显示效果图图3-1-2 单击不同链接后网页的显示效果单击不同链接后网页的显示效果框架就是把一个网页页面分成几个单框架就是把一个网页页面分成几个单独的区域(即窗口),每个区域就像一个独的区域(即窗口),每个区域就像一个
3、独立的网页,可以是一个独立的独立的网页,可以是一个独立的HTML文文件。件。因此,框架可以实现在一个网页内显因此,框架可以实现在一个网页内显示多个示多个HTML文件的效果。文件的效果。对于一个有对于一个有n个区域的框架网页来说,个区域的框架网页来说,每个区域有一个每个区域有一个HTML文件,整个框架结文件,整个框架结构也是一个构也是一个HTML文件,因此该框架网页文件,因此该框架网页是一个是一个HTML文件集,它有文件集,它有n+1个个HTML文件。文件。3.1.2操作过程操作过程1创建框架与编辑框架创建框架与编辑框架(1)创建框架)创建框架方法方法1:单击:单击“文件文件”“新建新建”菜单命
4、菜单命令,打开令,打开“新建文档新建文档”对话框,如图对话框,如图3-1-4所示。所示。单击该对话框左边单击该对话框左边“类别类别”栏中的栏中的“框架集框架集”选项,再选中该对话框右边选项,再选中该对话框右边“框架集框架集”栏内的一种框架选项。然后单击栏内的一种框架选项。然后单击“创建创建”按钮,即可创建有框架的网页。按钮,即可创建有框架的网页。3.1.3相关知识相关知识图图3-1-4 在页面内创建上下两个框架在页面内创建上下两个框架 方法方法2:单击:单击“插入插入”(布局)面板的(布局)面板的“框架框架”快捷菜单中的一个按钮,即可在页快捷菜单中的一个按钮,即可在页面内设置出相应的框架,如图
5、面内设置出相应的框架,如图3-1-5所示。所示。图图3-1-5 “框架框架”快捷菜单快捷菜单方法方法3:利用:利用“修改修改”“框架页框架页”“”菜单命令或利用菜单命令或利用“插入插入”“HTML”“框架框架”“”菜菜单命令,也可以创建框架。单命令,也可以创建框架。建立了框架后,要增加框架的个数,建立了框架后,要增加框架的个数,可采用如下方法:将光标移到框架内,再可采用如下方法:将光标移到框架内,再单击单击“查看查看”“可视化助理可视化助理”“框架框架边框边框”菜单选项,使该菜单选项左边有菜单选项,使该菜单选项左边有。然后将鼠标指针移到框架的边缘处,当。然后将鼠标指针移到框架的边缘处,当鼠标指
6、针为鼠标指针为“”或或“”形状时,向鼠标形状时,向鼠标指针箭头指示的方向拖曳鼠标,即可在水指针箭头指示的方向拖曳鼠标,即可在水平或垂直方向增加一个框架。平或垂直方向增加一个框架。(2)简单编辑框架)简单编辑框架调整框架的大小:用鼠标拖曳框架线,调整框架的大小:用鼠标拖曳框架线,即可调整框架的大小。即可调整框架的大小。删除框架:用鼠标拖曳框架线,拖曳到删除框架:用鼠标拖曳框架线,拖曳到另一条框架线或边框处,即可删除该框架。另一条框架线或边框处,即可删除该框架。(3)设置框架集属性)设置框架集属性单击框架的外边框后,可将单击框架的外边框后,可将“属性属性”栏变为框架集栏变为框架集“属性属性”栏,如
7、图栏,如图3-1-6所示。所示。改变总框架属性需要通过框架集改变总框架属性需要通过框架集“属性属性”栏来完成。栏来完成。图图3-1-6 框架集框架集“属性属性”栏栏“边框边框”下拉列表框:用来确定是否要下拉列表框:用来确定是否要边框。选择边框。选择“是是”选项是保留边框;选择选项是保留边框;选择“否否”选项是不保留边框;选择选项是不保留边框;选择“默认默认”选项,表示采用默认状态。通常是要保留选项,表示采用默认状态。通常是要保留边框。边框。“边框颜色边框颜色”栏:用来确定边框的颜色。栏:用来确定边框的颜色。单击该按钮,可弹出颜色板,利用它可确单击该按钮,可弹出颜色板,利用它可确定边框的颜色。也
8、可在文本框中直接输入定边框的颜色。也可在文本框中直接输入颜色数据。颜色数据。“边框宽度边框宽度”文本框:用来输入边框的文本框:用来输入边框的宽度数值,其单位是像素。如果在该文本宽度数值,其单位是像素。如果在该文本框内输入框内输入0,则没有边框。如果,则没有边框。如果“查看查看”“可视化助理可视化助理”“框架边框框架边框”菜单菜单命令被选中,则网页文档窗口内会显示辅命令被选中,则网页文档窗口内会显示辅助的边框线(不会在浏览器中显示)。助的边框线(不会在浏览器中显示)。“值值”文本框:用来确定网页左边分栏文本框:用来确定网页左边分栏的宽度或上边分栏的高度。的宽度或上边分栏的高度。“单位单位”下拉列
9、表框:用来选择下拉列表框:用来选择“值值”文本框内数据的单位,单位有像素等。文本框内数据的单位,单位有像素等。(4)设置分栏框架属性)设置分栏框架属性按住按住Alt键,单击分栏框架的内部后,键,单击分栏框架的内部后,可使可使“属性属性”栏变为分栏框架栏变为分栏框架“属性属性”栏,栏,如图如图3-1-7所示。分栏框架的框架所示。分栏框架的框架“属性属性”栏中各选项的作用如下。栏中各选项的作用如下。图图3-1-7 分栏框架分栏框架“属性属性”栏栏“框架名称框架名称”文本框:用来输入分栏框文本框:用来输入分栏框架的名字。架的名字。“源文件源文件”文本框:用来显示该分栏内文本框:用来显示该分栏内HTM
10、L文件的路径和文件的名字。文件的路径和文件的名字。“滚动滚动”下拉列表框:用来选择分栏是下拉列表框:用来选择分栏是否要滚动条。选择否要滚动条。选择“是是”选项,表示要滚选项,表示要滚动条;选择动条;选择“否否”选项,表示不要滚动条;选项,表示不要滚动条;选择选择“自动自动”选项,表示根据分栏内是否选项,表示根据分栏内是否能够完全显示出其中的内容来自动选择是能够完全显示出其中的内容来自动选择是否要滚动条;选择否要滚动条;选择“默认默认”选项,表示采选项,表示采用默认状态。用默认状态。“不能调整大小不能调整大小”复选框:如果选中该复选框:如果选中该复选框,则不能用鼠标拖曳框架的边框线,复选框,则不
11、能用鼠标拖曳框架的边框线,调整分栏大小;如果没有选中该复选框,调整分栏大小;如果没有选中该复选框,则可以用鼠标拖曳框架的边框线,调整分则可以用鼠标拖曳框架的边框线,调整分栏大小。栏大小。“边框边框”下拉列表框:用来确定是否要下拉列表框:用来确定是否要边框。当此处的设置与总框架边框。当此处的设置与总框架“属性属性”栏栏的设置矛盾时,以此处设置为准。的设置矛盾时,以此处设置为准。(1)单击网页框架的某一个区域内部,)单击网页框架的某一个区域内部,使光标移到该框架内。使光标移到该框架内。(2)然后可以像在没有框架的网页页)然后可以像在没有框架的网页页面内输入文字和导入对象那样,在选面内输入文字和导入
12、对象那样,在选中的框架区域内输入文字和导入对象。中的框架区域内输入文字和导入对象。也可以单击也可以单击“文件文件”“在框架中打在框架中打开开”菜单命令,弹出菜单命令,弹出“选择选择HTML文文件件”对话框。利用它可将外部的对话框。利用它可将外部的HTML文件加载到选定的框架区域内。文件加载到选定的框架区域内。2在框架内插入在框架内插入HTML文件内容文件内容 3.2.1学习目标学习目标“主流电脑配置单主流电脑配置单”网页的显示效果如网页的显示效果如图图3-2-1所示。由于电脑的配置单有很强的所示。由于电脑的配置单有很强的条理性,所以在该网页中使用表格对网页条理性,所以在该网页中使用表格对网页中
13、的数据进行排版。中的数据进行排版。3.2 3.2 【案例案例8 8】“主流电脑配置单主流电脑配置单”网页网页图图3-2-1 “主流电脑配置单主流电脑配置单”网页的显示效果网页的显示效果表格比较适合显示结构性比较强的内表格比较适合显示结构性比较强的内容,如值班表、课程表和考试安排表等。容,如值班表、课程表和考试安排表等。表格也是网页中经常使用的一个元件。表格也是网页中经常使用的一个元件。3.2.2操作过程操作过程1表格的基本操作表格的基本操作将光标移到需要插入表格的位置,单击将光标移到需要插入表格的位置,单击“插入插入”(常用)面板内的(常用)面板内的“表格表格”按钮按钮,弹出,弹出“表格表格”
14、对话框,如图对话框,如图3-2-2所示。所示。3.2.3相关知识相关知识(1)“表格表格”对话框内各选项的作对话框内各选项的作用用“行数行数”和和“列数列数”文本框:输入表格文本框:输入表格的行数和列数。的行数和列数。“表格宽度表格宽度”文本框:输入表格的宽度文本框:输入表格的宽度值,其单位为像素或百分数。如果选择值,其单位为像素或百分数。如果选择“百分比百分比”,则表示表格占页面或它的母体,则表示表格占页面或它的母体容量宽度的百分比。容量宽度的百分比。“边框粗细边框粗细”文本框:输入表格边框的文本框:输入表格边框的宽度数值,其单位为像素。当它的值为宽度数值,其单位为像素。当它的值为0时,时,
15、表示没有表格线。表示没有表格线。“单元格边距单元格边距”文本框:输入的数值表示文本框:输入的数值表示单元格之间两个相邻边框线(左与右、上单元格之间两个相邻边框线(左与右、上和下边框线)间的距离。和下边框线)间的距离。“单元格间距单元格间距”文本框:输入单元格内文本框:输入单元格内的内容与单元格边框间的空白数值,其单的内容与单元格边框间的空白数值,其单位为像素。这种空白存在于单元格内容的位为像素。这种空白存在于单元格内容的四周。四周。“页眉页眉”栏:用来设置表格的页眉单元栏:用来设置表格的页眉单元格。被设置为页眉的单元格,其中的字体格。被设置为页眉的单元格,其中的字体将被设置成居中和黑体格式。将
16、被设置成居中和黑体格式。“辅助功能辅助功能”栏:栏:“辅助功能辅助功能”栏中各栏中各选项的作用如下。选项的作用如下。“标题标题”文本框:设置表格的标题。文本框:设置表格的标题。“对齐标题对齐标题”列表框:设置标题与表格列表框:设置标题与表格的位置关系,默认为表格的顶部。的位置关系,默认为表格的顶部。“摘要摘要”文本框:设置表格的摘要。文本框:设置表格的摘要。通过上述设置后,单击通过上述设置后,单击“确定确定”按钮,按钮,即可插入符合要求的表格,如图即可插入符合要求的表格,如图3-2-3所示。所示。图图3-2-3 网页中的表格网页中的表格(2)调整表格大小)调整表格大小调整整个表格的大小:单击表
17、格的边框,调整整个表格的大小:单击表格的边框,选中该表格,此时表格右边、下边和右下选中该表格,此时表格右边、下边和右下角会出现角会出现3个方形的黑色控制柄。再用鼠标个方形的黑色控制柄。再用鼠标拖曳控制柄,即可调整整个表格的大小。拖曳控制柄,即可调整整个表格的大小。调整表格中行或列的大小:将鼠标指针调整表格中行或列的大小:将鼠标指针移到表格线处,当鼠标指针变为双箭头横移到表格线处,当鼠标指针变为双箭头横线或双箭头竖线时拖曳鼠标,即可调整表线或双箭头竖线时拖曳鼠标,即可调整表格线的位置,从而调整表格行或列的大小。格线的位置,从而调整表格行或列的大小。(3)表格和单元格标签)表格和单元格标签表格标签
18、:选中表格后,在表格的下面表格标签:选中表格后,在表格的下面用绿色显示出了表格的宽度,如图用绿色显示出了表格的宽度,如图3-2-3所所示。单击下边的三角按钮,可以弹出示。单击下边的三角按钮,可以弹出“表表格格”快捷菜单。利用快捷菜单。利用“表格表格”快捷菜单可快捷菜单可以进行选择表格、清除表格列的宽度、左以进行选择表格、清除表格列的宽度、左侧插入列和右侧插入列等操作。侧插入列和右侧插入列等操作。单元格标签:选中表格后,在表格标签单元格标签:选中表格后,在表格标签的下面显示出了每一列单元格的标签,如的下面显示出了每一列单元格的标签,如图图3-2-3所示。单击任意一个下三角按钮,所示。单击任意一个
19、下三角按钮,可以弹出可以弹出“单元格单元格”快捷菜单,操作方法快捷菜单,操作方法和和“表格表格”快捷菜单基本相同。快捷菜单基本相同。(4)选择表格)选择表格选择整个表格:单击表格的外边框,可选择整个表格:单击表格的外边框,可选中整个表格,此时表格右边、下边和右选中整个表格,此时表格右边、下边和右下角会出现下角会出现3个方形黑色控制柄。个方形黑色控制柄。选择多个表格单元格:按住选择多个表格单元格:按住Ctrl键,同时键,同时依次单击所有要选择的表格单元格。依次单击所有要选择的表格单元格。选择表格的一行或一列单元格:将鼠标选择表格的一行或一列单元格:将鼠标移到一行的最左边或移到一列的最上边,移到一
20、行的最左边或移到一列的最上边,当鼠标指针呈黑色箭头时单击,即可选中当鼠标指针呈黑色箭头时单击,即可选中一行或一列。一行或一列。选择表格的多行或多列单元格:按住选择表格的多行或多列单元格:按住Ctrl键,将鼠标依次移到要选择的各行或各列,键,将鼠标依次移到要选择的各行或各列,当鼠标指针呈黑色箭头时单击,即可选中当鼠标指针呈黑色箭头时单击,即可选中多行或多列。还可以将鼠标移到要选择的多行或多列。还可以将鼠标移到要选择的多行或多列的起始处,当鼠标指针呈黑色多行或多列的起始处,当鼠标指针呈黑色箭头时,拖曳鼠标也可选择多行或多列单箭头时,拖曳鼠标也可选择多行或多列单元格。元格。单击表格的外边框,选中整个
21、表格,单击表格的外边框,选中整个表格,此时表格的此时表格的“属性属性”栏如图栏如图3-2-4所示。表所示。表格格“属性属性”栏内各选项的作用如下。栏内各选项的作用如下。2设置整个表格的属性设置整个表格的属性图图3-2-4 表格的表格的“属性属性”栏栏“表格表格Id”下拉列表框:用来输入表格的下拉列表框:用来输入表格的名字。名字。“行行”和和“列列”文本框:用来输入表格文本框:用来输入表格的行数与列数。的行数与列数。“宽宽”和和“高高”文本框:用来输入表格文本框:用来输入表格的宽度与高度值。它们的单位可利用其右的宽度与高度值。它们的单位可利用其右边的下拉列表框来选择,其中的选项有边的下拉列表框来
22、选择,其中的选项有“%”(百分数)和(百分数)和“像素像素”两种。两种。“填充填充”文本框:输入单元格内的内容文本框:输入单元格内的内容与单元格边框间的空白数,单位为像素。与单元格边框间的空白数,单位为像素。“间距间距”文本框:输入单元格之间两个文本框:输入单元格之间两个相邻边框线间的距离。相邻边框线间的距离。“对齐对齐”下拉列表框:该下拉列表框内下拉列表框:该下拉列表框内有有“默认默认”、“左对齐左对齐”、“居中对齐居中对齐”和和“右对齐右对齐”四个选项。四个选项。“边框边框”文本框:输入表格边框宽度,文本框:输入表格边框宽度,单位为像素点。单位为像素点。“背景颜色背景颜色”按钮与文本框:用
23、来设置按钮与文本框:用来设置表格的背景色。表格的背景色。“背景图像背景图像”文本框与文件夹按钮:单文本框与文件夹按钮:单击文件夹按钮,可以弹出击文件夹按钮,可以弹出“选择图像源文选择图像源文件件”对话框,利用它可以给表格添加背景对话框,利用它可以给表格添加背景图像。图像。“边框颜色边框颜色”矩形按钮与文本框:用来矩形按钮与文本框:用来设置表格的边框线颜色。设置表格的边框线颜色。6个按钮:个按钮:按钮用来清除行高,按钮用按钮用来清除行高,按钮用来清除列宽,来清除列宽,按钮用来将表格宽度的单按钮用来将表格宽度的单位转换为像素,位转换为像素,按钮用来将表格宽度的按钮用来将表格宽度的单位改为百分比,单
24、位改为百分比,按钮用来将表格高度按钮用来将表格高度的单位转换为像素,的单位转换为像素,按钮用来将表格宽按钮用来将表格宽度的单位改为百分比。度的单位改为百分比。“类类”下拉列表框:用来设置表格的样下拉列表框:用来设置表格的样式。式。3设置表格单元格的属性设置表格单元格的属性按住按住Ctrl键,单击表格中的单元格,键,单击表格中的单元格,选中几个单元格。此时选中几个单元格。此时“属性属性”栏变为表栏变为表格单元格格单元格“属性属性”栏,如图栏,如图3-2-5所示。所示。图图3-2-5 表格单元格表格单元格“属性属性”栏栏在表格单元格在表格单元格“属性属性”栏中,上半部栏中,上半部分用来设置单元格内
25、文本的属性,它与文分用来设置单元格内文本的属性,它与文本本“属性属性”栏的选项基本一样。下半部分栏的选项基本一样。下半部分用来设置单元格的属性,各选项的作用如用来设置单元格的属性,各选项的作用如下。下。“合并所选单元格合并所选单元格”按钮按钮:选中要合:选中要合并的单元格,再单击并的单元格,再单击按钮,即可将选中按钮,即可将选中的单元格合并(将图的单元格合并(将图3-2-3所示表格左上角所示表格左上角的的2行行3列单元格合并),其效果如图列单元格合并),其效果如图3-2-6所示。所示。图图3-2-6 合并单元格后的效果合并单元格后的效果“拆分单元格拆分单元格”按钮按钮:选中一个单元:选中一个单
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 第3章 框架、表格、层与网页布局 框架 表格 网页 布局
限制150内