04 图文混排 4.15.docVIP

实验四 图文及图表编排 1. 插入日期：在页面上显示当前日期、时间及星期 （1）将图片设置成背景。选中（单击）页面左侧“当前日期”图片下的空白图片，如图1所示。 图1 选中需要转换成背景的图片 （2）在【属性】→【源文件】→全选此文本框中的代码（如图2所示）→按右键→选择【剪切】命令→然后删除页面中的图片→【属性】|【CSS】按钮→【目标规则】|【新内联样式】→【编辑规则】→将在弹出“内联样式的CSS样式规则定义”对话框→单击【分类】|【背景】|【Background-image】文本框→粘贴（Ctrl+V）刚才剪切的代码（如图3所示）→【确定】。即可完成将图片转换成背景的操作。其页面效果如图4所示。 图2 【属性】面板中被选中的代码高亮显示 图3 在“内联样式的CSS规则定义”面板中的设置 图4 页面效果 （3）将文本光标居中。用鼠标单击“当前时间”下面的空白背景单元格，然后在【属性】面板中，将单元格的【水平】与【垂直】参数设置如图5所示。此时，单元格的文本光标位置如图6所示。 图5 单元格【属性】“水平”与“垂直”参数设置 图6 单元格的文本光标所在位置 图7 “插入时间”对话框设置 （4）插入日期等参数。选择【插入/日期】菜单命令（或点击文档窗口上端【“常用】工具栏中的【日期】按钮），弹出【插入日期】对话框，在弹出的对话框中完成相关设置，如图7所示，单击【确定】按钮，完成日期及时间等参数的设置。 （8）保存文件。按【F12】键，预览效果如图8所示。 图8 浏览插入的日期效果 重要提示： 如果想在网页上插入文字、图片，或插入表格、表单等元素，必须将切割后的相关图片转换为背景图片，才能添加相应元素。 2. 添加正文——图文混排 （1）将图片设置成背景。选中页面右侧需要添加图文信息的图片，如图9所示。 图9 选中需添加图文信息图片 （2）在【属性】→【源文件】→全选此文本框中的代码（如图10所示）→按右键→选择【剪切】命令→然后删除页面中的图片→【属性】|【CSS】按钮→【目标规则】|【新内联样式】→【编辑规则】→将在弹出“内联样式的CSS样式规则定义”对话框→单击【分类】|【背景】|【Background-image】文本框→粘贴（Ctrl+V）刚才剪切的代码（如图11所示）→【确定】。即可完成将图片转换成背景的操作。其页面效果如图12所示。 图10 【属性】面板中被选中的代码高亮显示 图11 在“内联样式的CSS规则定义”面板中的设置 图12 页面效果 （3）将文本光标居中。用鼠标单击“当前时间”下面的空白背景单元格，然后在【属性】面板中，将单元格的【水平】设置为：居中对齐；【垂直】设置为：居中。此时，单元格的文本光标位置如图13所示。 （4）插入表格，输入文字。单击【插入】面板中【常用】|【表格】按钮（或单击【插入】|【表格】相爱的命令），弹出对话框的参数设置如图14所示，在页面中空白背景上插入一个1行1列的表格。效果如图15所示。 图13 页面光标居中效果 图14 插入表格对话框参数设置 图15 在空白背景上插入一个1行1列的表格 （5）用鼠标单击表格中的单元格，在左侧将出现一个文本光，此时，打开“图文混排.txt”文本文件，按下【Ctrl+A】组合键，将文字全部选中，然后按下【Ctrl+C】进行复制，把它粘贴到表格的单元格中。效果如图16所示。 图16 添加文字的效果 （6）创建CSS样式表，设置文字的字体、大小、行距等。 1）设置文字的字体、大小及颜色。单击【属性】面板左侧的【CSS】按钮，切换到【CSS属性】面板。单击【目标规则】右侧的下拉列表箭头→选择【新CSS规则】→单击【编辑规则】按钮→设置相关参数如图17所示→【确定】→进入到“.tuwen 的CSS规则定义”对话框→设置其参数如图18所示。此时，【属性】面板中的参数如图19所示。页面上的文字效果如图20所示。 图17 “新建CSS规则”对话框参数设置 图18 “.tuwen 的CSS规则定义”对话框参数设置 图19 【属性】面板中的参数 图20 页面中的文字效果 2）调整页面中文字的行距。单击【属性】面板上的【编辑规则】按钮→将再次打开“.tuwen 的CSS规则定义”面板→修改其中的【Line-height】（行高）如图21所示→单击【确定】按钮，页面中文字效果如图22所示。 图21“.tuwen 的CSS规则定义”对话框行高的设置 图22 页面中的文字效果 （7）插入图片，并进行排列。 1）插入图片。将光标置入文档中第1段落文字的行首处，单击【插入】|【常用】|【图像】 按钮，在弹出的“选择图像源文件”对话框中选择“images”文件夹中的“twhp图文混排.png”图像文件，单击【确定】，在弹出的“图像标签辅助功能属性”