第3章 框架、表格、层与网页布局

第3章框架、表格、层与网页布局【案例7】“操作系统比较”网页3.1【案例8】“主流电脑配置单”网页3.2【案例9】“CPU进化史”网页3.3【案例10】“电脑展示”网页3.43.1【案例7】“操作系统比较”网页3.1.1学习目标“操作系统比较”网页的显示效果如图3-1-1所示。该网页被分割成两个部分，网页的左半部分显示出网页的标题和各个页面的链接，单击其中一个链接，即可在网页的右半部分显示出相应的内容，如图3-1-2所示。通过本实例，介绍创建框架与编辑框架，以及在框架内插入HTML文件内容的方法。图3-1-1“操作系统比较”网页的显示效果图3-1-2单击不同链接后网页的显示效果框架就是把一个网页页面分成几个单独的区域（即窗口），每个区域就像一个独立的网页，可以是一个独立的HTML文件。因此，框架可以实现在一个网页内显示多个HTML文件的效果。对于一个有n个区域的框架网页来说，每个区域有一个HTML文件，整个框架结构也是一个HTML文件，因此该框架网页是一个HTML文件集，它有n+1个HTML文件。3.1.2操作过程1．创建框架与编辑框架（1）创建框架方法1：单击“文件”→“新建”菜单命令，打开“新建文档”对话框，如图3-1-4所示。单击该对话框左边“类别”栏中的“框架集”选项，再选中该对话框右边“框架集”栏内的一种框架选项。然后单击“创建”按钮，即可创建有框架的网页。3.1.3相关知识图3-1-4在页面内创建上下两个框架方法2：单击“插入”（布局）面板的“框架”快捷菜单中的一个按钮，即可在页面内设置出相应的框架，如图3-1-5所示。图3-1-5“框架”快捷菜单方法3：利用“修改”→“框架页”→“×××”菜单命令或利用“插入”→“HTML”→“框架”→“×××”菜单命令，也可以创建框架。建立了框架后，要增加框架的个数，可采用如下方法：将光标移到框架内，再单击“查看”→“可视化助理”→“框架边框”菜单选项，使该菜单选项左边有。然后将鼠标指针移到框架的边缘处，当鼠标指针为“”或“”形状时，向鼠标指针箭头指示的方向拖曳鼠标，即可在水平或垂直方向增加一个框架。（2）简单编辑框架调整框架的大小：用鼠标拖曳框架线，即可调整框架的大小。删除框架：用鼠标拖曳框架线，拖曳到另一条框架线或边框处，即可删除该框架。（3）设置框架集属性单击框架的外边框后，可将“属性”栏变为框架集“属性”栏，如图3-1-6所示。改变总框架属性需要通过框架集“属性”栏来完成。图3-1-6框架集“属性”栏“边框”下拉列表框：用来确定是否要边框。选择“是”选项是保留边框；选择“否”选项是不保留边框；选择“默认”选项，表示采用默认状态。通常是要保留边框。“边框颜色”栏：用来确定边框的颜色。单击该按钮，可弹出颜色板，利用它可确定边框的颜色。也可在文本框中直接输入颜色数据。“边框宽度”文本框：用来输入边框的宽度数值，其单位是像素。如果在该文本框内输入0，则没有边框。如果“查看”→“可视化助理”→“框架边框”菜单命令被选中，则网页文档窗口内会显示辅助的边框线（不会在浏览器中显示）。“值”文本框：用来确定网页左边分栏的宽度或上边分栏的高度。“单位”下拉列表框：用来选择“值”文本框内数据的单位，单位有像素等。（4）设置分栏框架属性按住Alt键，单击分栏框架的内部后，可使“属性”栏变为分栏框架“属性”栏，如图3-1-7所示。分栏框架的框架“属性”栏中各选项的作用如下。图3-1-7分栏框架“属性”栏“框架名称”文本框：用来输入分栏框架的名字。“源文件”文本框：用来显示该分栏内HTML文件的路径和文件的名字。“滚动”下拉列表框：用来选择分栏是否要滚动条。选择“是”选项，表示要滚动条；选择“否”选项，表示不要滚动条；选择“自动”选项，表示根据分栏内是否能够完全显示出其中的内容来自动选择是否要滚动条；选择“默认”选项，表示采用默认状态。“不能调整大小”复选框：如果选中该复选框，则不能用鼠标拖曳框架的边框线，调整分栏大小；如果没有选中该复选框，则可以用鼠标拖曳框架的边框线，调整分栏大小。“边框”下拉列表框：用来确定是否要边框。当此处的设置与总框架“属性”栏的设置矛盾时，以此处设置为准。（1）单击网页框架的某一个区域内部，使光标移到该框架内。（2）然后可以像在没有框架的网页页面内输入文字和导入对象那样，在选中的框架区域内输入文字和导入对象。也可以单击“文件”→“在框架中打开”菜单命令，弹出“选择HTML文件”对话框。利用它可将外部的HTML文件加载到选定的框架区域内。2．在框架内插入HTML文件内容3.2.1学习目标“主流电脑配置单”网页的显示效果如图3-2-1所示。由于电脑的配置单有很强的条理性，所以在该网页中使用表格对网页中的数据进行排版。3.2【案例8】“主流电脑配置单”网页图3-2-1“主流电脑配置单”网页的显示效果表格比较适合显示结构性比较强的内容，如值班表、课程表和考试安排表等。表格也是网页中经常使用的一个元件。3.2.2操作过程1．表格的基本操作将光标移到需要插入表格的位置，单击“插入”（常用）面板内的“表格”按钮，弹出“表格”对话框，如图3-2-2所示。3.2.3相关知识（1）“表格”对话框内各选项的作用“行数”和“列数”文本框：输入表格的行数和列数。“表格宽度”文本框：输入表格的宽度值，其单位为像素或百分数。如果选择“百分比”，则表示表格占页面或它的母体容量宽度的百分比。“边框粗细”文本框：输入表格边框的宽度数值，其单位为像素。当它的值为0时，表示没有表格线。“单元格边距”文本框：输入的数值表示单元格之间两个相邻边框线（左与右、上和下边框线）间的距离。“单元格间距”文本框：输入单元格内的内容与单元格边框间的空白数值，其单位为像素。这种空白存在于单元格内容的四周。“页眉”栏：用来设置表格的页眉单元格。被设置为页眉的单元格，其中的字体将被设置成居中和黑体格式。“辅助功能”栏：“辅助功能”栏中各选项的作用如下。“标题”文本框：设置表格的标题。“对齐标题”列表框：设置标题与表格的位置关系，默认为表格的顶部。“摘要”文本框：设置表格的摘要。通过上述设置后，单击“确定”按钮，即可插入符合要求的表格，如图3-2-3所示。图3-2-3网页中的表格（2）调整表格大小调整整个表格的大小：单击表格的边框，选中该表格，此时表格右边、下边和右下角会出现3个方形的黑色控制柄。再用鼠标拖曳控制柄，即可调整整个表格的大小。调整表格中行或列的大小：将鼠标指针移到表格线处，当鼠标指针变为双箭头横线或双箭头竖线时拖曳鼠标，即可调整表格线的位置，从而调整表格行或列的大小。（3）表格和单元格标签表格标签：选中表格后，在表格的下面用绿色显示出了表格的宽度，如图3-2-3所示。单击下边的三角按钮，可以弹出“表格”快捷菜单。利用“表格”快捷菜单可以进行选择表格、清除表格列的宽度、左侧插入列和右侧插入列等操作。单元格标签：选中表格后，在表格标签的下面显示出了每一列单元格的标签，如图3-2-3所示。单击任意一个下三角按钮，可以弹出“单元格”快捷菜单，操作方法和“表格”快捷菜单基本相同。（4）选择表格选择整个表格：单击表格的外边框，可选中整个表格，此时表格右边、下边和右下角会出现3个方形黑色控制柄。选择多个表格单元格：按住Ctrl键，同时依次单击所有要选择的表格单元格。选择表格的一行或一列单元格：将鼠标移到一行的最左边或移到一列的最上边，当鼠标指针呈黑色箭头时单击，即可选中一行或一列。选择表格的多行或多列单元格：按住Ctrl键，将鼠标依次移到要选择的各行或各列，当鼠标指针呈黑色箭头时单击，即可选中多行或多列。还可以将鼠标移到要选择的多行或多列的起始处，当鼠标指针呈黑色箭头时，拖曳鼠标也可选择多行或多列单元格。单击表格的外边框，选中整个表格，此时表格的“属性”栏如图3-2-4所示。表格“属性”栏内各选项的作用如下。2．设置整个表格的属性图3-2-4表格的“属性”栏“表格Id”下拉列表框：用来输入表格的名字。“行”和“列”文本框：用来输入表格的行数与列数。“宽”和“高”文本框：用来输入表格的宽度与高度值。它们的单位可利用其右边的下拉列表框来选择，其中的选项有“%”（百分数）和“像素”两种。“填充”文本框：输入单元格内的内容与单元格边框间的空白数，单位为像素。“间距”文本框：输入单元格之间两个相邻边框线间的距离。“对齐”下拉列表框：该下拉列表框内有“默认”、“左对齐”、“居中对齐”和“右对齐”四个选项。“边框”文本框：输入表格边框宽度，单位为像素点。“背景颜色”按钮与文本框：用来设置表格的背景色。“背景图像”文本框与文件夹按钮：单击文件夹按钮，可以弹出“选择图像源文件”对话框，利用它可以给表格添加背景图像。“边框颜色”矩形按钮与文本框：用来设置表格的边框线颜色。6个按钮：按钮用来清除行高，按钮用来清除列宽，按钮用来将表格宽度的单位转换为像素，按钮用来将表格宽度的单位改为百分比，按钮用来将表格高度的单位转换为像素，按钮用来将表格宽度的单位改为百分比。“类”下拉列表框：用来设置表格的样式。3．设置表格单元格的属性按住Ctrl键，单击表格中的单元格，选中几个单元格。此时“属性”栏变为表格单元格“属性”栏，如图3-2-5所示。图3-2-5表格单元格“属性”栏在表格单元格“属性”栏中，上半部分用来设置单元格内文本的属性，它与文本“属性”栏的选项基本一样。下半部分用来设置单元格的属性，各选项的作用如下。“合并所选单元格”按钮：选中要合并的单元格，再单击按钮，即可将选中的单元格合并（将图3-2-3所示表格左上角的2行3列单元格合并），其效果如图3-2-6所示。图3-2-6合并单元格后的效果“拆分单元格”按钮：选中一个单元格，再单击按钮，弹出“拆分单元格”对话框，如图3-2-7所示。选中“行”单选项，表示要拆分为几行；单击选中“列”单选项，表示要拆分为几列。在“列数”数字框内选择行或列的个数。再单击“确定”按钮即可。将图3-2-6所示的表格中左上角的单元格拆分为2列，其效果如图3-2-8所示。图3-2-7“拆分单元格”对话框图3-2-8拆分单元格“水平”和“垂直”下拉列表框：用来选择水平对齐方式和垂直对齐方式。“宽”和“高”文本框：用来设置单元格的宽度与高度。“不换行”复选框：如果选中该复选框，则当单元格内的文字超过单元格的宽度时，不换行，自动将单元格的宽度加大到刚好可以放下文字；没选中该复选框，则当单元格内的文字超过单元格的宽度时，自动换行。“标题”复选框：如果选中该复选框，则单元格中的文字以标题的格式显示（粗体、居中）；如果没选中该复选框，则单元格中的文字以正文的形式显示。“背景”按钮与文本框：单击上边的“背景”文件夹图标，可以弹出“选择图像源文件”对话框，利用该对话框可以给表格单元格添加背景图像。下边的“背景颜色”矩形按钮与文本框用来设置表格单元格的背景色。当该文本框为空时，其设置与页面表格的“背景”设置一样。“边框”按钮与文本框：用来设置表格单元格的双线条边框线的颜色。当该文本框为空的时候，其设置与表格的“边框”颜色一样。3.3.1学习目标“CPU进化史”网页的显示效果如图3-3-1所示。该网页是使用层对网页中的内容进行布局的。层是一种可以插入各种网页对象，可以自由定位、精确定位和容易控制的容器，它实际上就是一个网页子页面。3.3【案例9】“CPU进化史”网页在层中，可以嵌套其他的层，层可以重叠，可以控制对象的位置和内容，从而实现网页对象的重叠和立体化等特效，还可以实现网页的动画和交互。图3-3-1“CPU进化史”网页的显示效果目前，技术，它可以实现网页的多层化、立体化和动态化等特效，使网页更加生动活泼。InternetExplorer4.0及以上的版本使用层的实现方法是CSS（层叠样式表）的层，它使用标记DIV和SPAN来创建层和定位层，这是由万维网联盟指定的。Nets