05网页上图文混排和图表设计方法

实验四图文及图表编排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所示）→按右键（或【Ctrl+C】）→选择【复制】命令→然后删除页面中的图片→【属性】|【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”图像文件，单击【确定】，在弹出的“图像标签辅助功能属性”设置对话框中单击【确定】（或【取消】）按钮，将图片插入到光标所在位置。其效果如图23所示。2）设置图片对齐方式及其边距。选中图片，单击图片【属性】→【对齐】→【右对齐】选项右侧的下拉列表箭头，在弹出的列表中选择选项，图片将排列在文字段落的右侧→【属性】→【垂直边距】设置为：10像素→【水平边距】设置为：10像素，在图片周围将留出10像素的空白，页面上的图片效果如图24所示，图23页面上插入图片的效果图24页面上的图片效果3）将文档段落行首缩进两个汉字。单击第一段文字行首，敲击多次【空格键】，将行首缩进两个汉字。用同样的方法，将第二、三自然段行首缩进两个汉字。保存文件，按【F12】键进行浏览，其效果如图25所示。提示：【空格键】的使用设置方法：【编辑】|【首选参数】→将弹出“首选参数”对话框，其设置如下图所示：【空格键】的使用——“首选参数”设置图25页面最终浏览效果补充知识：CSS样式表，是定义页面上的元素在浏览时的呈现形式。对于CSS样式表的设置，有以下几种情况：（1）如果将“新建CSS规则”对话框中“选择器类型”设置参数为“类（可用于任何HTML元素）”，就可以在网页中随时调用（即可对多个元素添加该设置）；（2）如果将“新建CSS规则”对话框中“选择器类型”设置参数为“ID（仅用于一个HTML元素）”，只对当前选中的对象有效，不能对其他元素添加该设置；（3）如果将“新建CSS规则”对话框中“选择器类型”设置参数为“标签（重新定义HTML元素）”，在“选择器名称”下拉列表中有本网站所有html的标签代码，可以根据需要选择某个或某些标签，来定义这些标签内元素的CSS样式；（4）如果将“新建CSS规则”对话框中“选择器类型”设置参数为“复合内容（基于选择的内容）”，是基于选择的对象来定义它的CSS样式。更多的介绍，请查看“Dreamweaver_CS4_帮助.pdf”文件中的相关内容。3.添加正文——图表编排（1）将切割的图片转换成背景。选中页面右侧中部需要转换成背景的空白图片，如图1所示。图1选中图片效果（2）参照“2.添加正文——图文混排”中的第（2）-（3）步的操作方法，将选中的网页图片转换成背景图片，并使光标居中对齐。（3）插入表格，并设置表格属性。转换到【设计】视图，选中需要插入表格的背景图片，单击文档窗口上方的“常用”标签中的“表格”按钮，弹出的表格对话框的参数设置如图2所示，插入一个1行2列的表格。图2“表格”对话框参数设置（4）选中表格中的第2单元格（右侧单元格），在【属性】面板中将其宽度调整为40%，如图3所示。其效果如图4所示。图3设置表格第2单元格宽度为40%图4页面中表格效果（5）在第1单元格中插入一个7行2列的表格（表格嵌套）。选中表格中的第1单元格（左侧单元格），单击文档窗口上方的“常用”标签中的“表格”按钮，弹出表格对话框的参数设置如图5所示，插入一个7行2列的表格。页面上效果如图6所示。图5“表格”参数设置图6页面中表格效果（6）调整表格（合并、调整颜色、对齐方式、宽高等）。1）合并单元格。选中第1行的1、2两个单元格（拖动鼠标选择），单击“修改|表格|合并表格”菜单项，将其合并为一个单元格。用同样的方法，将第7行的1、2两个单元格合并为1行。其效果如图7所示。图7合并完成后的表格效果2）设置单元格对齐方式及行高，并填充背景颜色。选中表格中的第1行（将鼠标放在紧贴第1行的左边线外侧，光标将变成一个指向右的箭头，此时单击，即可选中第1行），将【属性】面板中的相关参数设置如图8所示。图8第1行单元格的属性参数设置3）选中表格中第2、3、4、5、6、7行单元格，将【属性】面板中的相关参数设置如图9所示。图9第1列第2、3、4、5、6、7单元格属性参数设置4）调整表格中第3、5、7行单元格的背景颜色。用鼠标选中第3行的全部单元格（拖动鼠标进行选择），将属性面板中“背景颜色”参数设置如图10所示。图10表格中第3行背景颜色设置5）用同样的方法，分别将表格中第5、7行的背景颜色设置为相同的浅绿色（#F3FEE0）。页面上表格的最终效果如图11所示。图11页面上表格效果6）添加表格边框。单击表格顶部最外层的绿色提示线，选中表格，如图12所示。将【表格属性】中的“边框”参数设置为1。如图13所示。保存文件，按【F12】键浏览，效果如图14所示。图12单击表格最外层的提示线图13【表格属性】“边框”参数设置图14网页浏览效果表格提示线（7）在表格中插入文字和图片，并设置相应的参数。1）插入标题文字。单击表格中第1行（标题行），将出现一个文本光标，此时输入标题文字“Photoshop基本操作”。2)创建CSS样式表，为标题文字设置字体、字号、颜色等。选中标题文字，将【CSS属性】面板的“目标规则”设置为“新CSS规则”，然后单击“编辑规则”按钮，弹出“新建CSS规则”对话框，将“选择器类型”设置为“ID（仅应用于一个HTML元素）”；将“选择器名称”命名为“bt”，单击“确定”按钮，弹出“#bt的CSS规则定义”对话框，将“字体”设置为“幼圆”，“字号”设置为“18px”，其他参数不变，如图15所示。单击“确定”按钮，返回【CSS属性】面板。此时【CSS属性】面板如图16所示。图15“#btCSS规则定义”参数设置图16【CSS属性】面板参数效果3）插入表体文字。单击表格中第2行第1列单元格，将出现一个文本光标，此时输入文字“相关概念”；再单击第行第2列单元格，输入文字“文件操作”；用同样的方法，对其他单元格输入相应的文字。然后选中表格的第2、3、4、5、6行所有的单元格，如图17所示。图17选中表格相应单元格效果4）将【CSS属性】面板的“目标规则”设置为“新CSS规则”，然后单击“编辑规则”按钮，弹出“新建CSS规则”对话框，将“选择器类型”设置为“类（可应用于任何HTML元素）”；将“选择器名称”命名为“bg”，单击“确定”按钮，弹出“.bg的CSS规则定义”对话框，将“字体”设置为“微软雅黑”，“字号”设置为“14px”，颜色设置为“灰色”（#666），其他参数不变，如图18所示。单击“确定”按钮，完成对“.bg”的CSS规则定义。表格效果如图19所示。图18“.btCSS规则定义”参数设置图19表格效果5）在表格最后一行添加文字。选中表格最后一行，输入文字“more…”。选中文字，在【属性】上将其设置为红色，将“水平对齐”设置为“右对齐”，在省略号后面插入两个空格（按空格键两次）调整一下它的位置。6）保存文件，只能【F12】键进行浏览。（8）在表格中插入图片。单击表格右侧的空白单元，单击文档窗口上方的“常用”标签中的“图像”按钮，在弹性出的“选择图像源文件”对话框中找到需要插入的图像文件“images|表格设计.png”，单击“确定”按钮，弹出“图像标签辅助功能属性”对话框，直接单击“取消”按钮，图像将插入到表格中。如图21所示。图21插入图像的效果（9）在属性面板上调整图像位置。将【属性】面板上的“垂直边距”设置为2，“水平边距”设置3，保存文件，进行浏览。其图像效果如图22所示。图22页面效果