下载文档原格式
第二节制作文字与图像混排的页面我们已经描绘了小屋的蓝图，从现在开始，为我们的小屋添砖加瓦吧。
打开01.html，制作一个图文混排的简单页面。
一、页面的总体设置1、设置页面的头内容头内容再浏览器中是不可见的，但是却携带着网页的重要信息，如关键字、描述文字等，还可以实现一些非常重要的功能，如自动刷新功能。
鼠标左键单击插入工具栏最左边按钮旁的下拉小三角，在弹出菜单中选择“HTML”项，出现“文件头”按钮，点开下拉菜单，就可以进行头内容的设置了。
设置标题，网页标题可以是中文、英文或符号，显示在浏览器的标题栏中。
我们直接在设计窗口上方的标题栏内输入或更改，就可以完成网页标题的编辑了。
插入关键字，关键字用来协助网络上的搜索引擎寻找网页。
要想让更多的人看见你的网站，这项要好好填哦^_^单击上图所示的“关键字”项，弹出“关键字”对话框，填入关键字即可。
插入META，META标记用于记录当前网页的相关信息，如编码，作者，版权等，也可以用来给服务器提供信息。
单击上图所示的“META”项，弹出“META”对话框，在“属性”栏选择“名称”属性，在“值”文本框中输入相应的值，可以定义相应的信息。
author—作者信息，copyright—版权声明，generator—网页编辑器。
2、设置页面属性单击“属性栏”中的“页面属性”按钮，打开的“页面属性”对话框。
设置外观，“外观”是设置页面的一些基本属性。
我们可以定义页面中的默认文本字体、文本字号、文本颜色、背景颜色和背景图像等。
我们设置页面的所有边距为0。
设置链接，“链接”选项内是一些与页面的链接效果有关的设置。
“链接颜色”定义超链接文本默认状态下的字体颜色，“变换图像链接”定义鼠标放在链接上时文本的颜色，“已访问链接”定义访问过的链接的颜色，“活动链接”定义活动链接的颜色。
“下划线样式”可以定义链接的下划线样式。
设置标题，“标题”用来设置标题字体的一些属性。
如下图所示，在左侧“分类”列表中选择“标题”，这里的标题指的并不是页面的标题内容，而是可以应用在具体文章中各级不同标题上的一种标题字体样式。
深圳大学实验报告课程名称：网页设计与制作实验序号：实验名称：图文混排网页制作班级：临床一班姓名：张同组人：实验日期：2014 年4月21 日教师签字：一、实验目的(1)掌握网页布局的方法。
(2)掌握在网页中插人图片的方法。
(3)掌握网页中图文混排的排版方法二、实验环境制作秋天的思念网页效果三、实验步骤(1)新建html，在页面属性中设置，背景颜色设置为“#313884” ,页面标题设置为“秋天的思念”。
如下图(2)插人一个3行1列的表格,将表格宽度设置为“558”像素.边框扭细、单元格边距、单元格间距均设置为“0”像素,如图所示。
鼠标右键可以再自动弹出的“属性”面板中设置表格的对齐方式为“居中对齐”。
(3)在“代码”视图中使用代码将第1行单元格的背景设置为图片“bg.gif”（光标插到在<td 后按空格键，dreamweaver自动弹出要插入的对象然后按着他的思路走就可以了，dreamweaver简直是代码盲的福音啊！）,同时在第1行的单元格内插人图片“logo.gif”,并设置为左对齐,效果如图所示。
(4)将第2行和第3行单元格的背景颜色均设置为“#FFA200” ,在第3行的单元格内插人图片“blank.gif” ,并将其宽度设置为“1”像素、高度设置为“10”像素。
注意:blank.gif是一个宽和高均为1像素的透明图片,在网页制作中经常利用这种透明图片来“撑开”表格,使其处于固定的宽度和高度。
(5)在第2行单元格内插人一个1行、3列的表格,将其宽度设置为100%,边框粗细、单元格边距、单元格间距均设置为“0”像素,对齐方式设置为“居中对齐”。
(6)在新插人表格的第2列单元格内插人图片“autu.jpg” ,将第1列至第3列单元格的宽度分别设置为2%、96%、2%,同时单击代码视图,将第1列和第3列单元格内的“ ”删除,效果如图5-4所示。
(7)在表格的下面输人以下版杈信息:关于我们/网站地图/广告指南/联系我们/招聘精英技术支持：信息学院计算机/网络协会Rll Rights Reserved四、结果与分析算是成功完成。
第八课：图文混排一、公式的输入：1）、【插入】菜单→“对象”命令→“对象类型”列表→“Microsoft 公式3.0”→“确定”按钮→“公式编辑框”选择相应的公式→可将其插入→双击可将公式插入到页面中。
二、文本框的应用：1）文本框的插入：“绘图”工具栏→“文本框”按钮→拖动鼠标可勾画一个空的横排文本框→单击“插入竖排文本框”按钮可进行挺好入竖排文本。
2）、给已有文本框添加文本：选中要添加文本框的文本→“绘图”工具栏→“文本框”按钮→可添加一个新的文本框。
3）设置同页中横纵交排的文本：【插入】菜单→“文本框”选项→“横排”命令，光标变为十字形，可绘制一个横排文本框→“文本框”工具栏→输入横排文字→可拖动调整其适当位置。
（*：文本框里既可以输入文字，也可以插入图形。
插入竖排文本框同插入横排同类方式。
）4）设置文字绕排图片左右：先建立两个横排文本框→插入图片，然后设置一个文本框链接→鼠标移到文本框边框，变为移动键头时→右击→快捷菜单→“创建文本框链接”命令→鼠标变为酒状形式→左击，可创建两个文本框间的链接→可自动衔接。
5）、去掉文本框的黑边：选中文本框，按住Shift键单击时可连续选中多个文本→“绘图”工具栏→“线条颜色”按钮→线条颜色”按钮的下拉箭头→选择“无线条颜色“命令→空白处单击，可取消文本痕迹。
三、插入艺术字：1）、【插入】菜单→“图片”命令→“艺术字”→“艺术字库”对话框→选择一种艺术字样式→“确定”按钮→“编辑艺术字”对话框→“文字”框输入艺术字的文字→可在“字体”框中选择字体、字号、字体样式（加粗、倾斜、加下划线）→“确定”按钮。
2）、改变艺术字的属性：①拖动黄色的控制点，可以改变艺术字的形状。
②设置艺术字格式：选中艺术字→“艺术字”工具栏→“艺术字格式”“”→可改变其颜色、大小、线条等。
③“艺术字形状”按钮“”→面板→选择艺术字形状。
④“环绕方式““”选项→选择一种混排方式→“水平对齐方式”选项→选择一种对齐方式→“高级”按钮→“高级版式”对话框→可进行图形环绕效果设置→“确定”按钮。
Word2003图文混排一、数学公式Word2003可以方便地编排数学公式，例如下图：1、用插入“域”的方法来编制数学公式，步骤如下：①单击“插入”菜单中“域”，出现“域”对话框；②从“域”对话框中选择“类别”为“等式和公式”，在“域名”中选取“EQ”；③单击“域代码”按钮，单击“选项”按钮，选取需要的内容，单击“添加到域”按钮；④输入数据，单击“域选项”对话框的“确定”按钮，则屏幕出现所设计的数学公式。
2、用插入“对象”的方法来编制数学公式，步骤如下：①单击“插入”菜单中“对象”，出现“对象”对话框；②从“对象”对话框中选择“对象类型”为“Microsoft 公式3.0”；③单击“对象”对话框的“确定”按钮，则进入“公式”编辑状态；④用“公式”编辑器编辑数学公式。
输入公式的顺序为：从左到右、从上到下、从外到内。
二、艺术字在编辑文档的时候，有时为了表达特殊的效果，需要对文字进行一些修饰处理。
利用Word的“艺术字”选项，我们可以将文字设置成艺术字的效果，如：弯曲、倾斜、旋转、扭曲、阴影等。
例：1、创建艺术字（1）单击“艺术字”工具栏或“绘图”工具栏的“插入艺术字”按钮，或选择“插入”菜单下的“图片”中的“艺术字”命令；（2）从“艺术字库”对话框中选定所需的样式；（3）单击“艺术字库”对话框中的“确定”按钮，屏幕上弹出“编辑艺术字文字”对话框；（4）向对话框输入要设置成艺术字的文本，如输入“我的梦想”，单击对话框中的“确定”按钮，则屏幕上出现关于“我的梦想”为内容的艺术字。
2、编辑艺术字艺术字创建好后，还可以对它进行各种修饰，如改变艺术字的式样、字体、大小和形状，设置艺术字自由旋转、阴影和三维效果等。
对艺术字进行修饰之前必须先选定艺术字。
下面以设置艺术字自由旋转为例。
其操作步骤如下：（1）将鼠标指针置于艺术字上，单击左键，在艺术字四周会出现八个控制点，这表示艺术字被选定（2）单击“艺术字”工具栏的“自由旋转”按钮（3）把鼠标指针移到艺术字的四个角上加以拖动，这时艺术字就会产生旋转的艺术效果。
网页设计中图文混排的技巧网页设计中图文混排的技巧图文混排是设计中极为重要的一项技术，同时它也极难达到完美的境界。
要在网页首屏中呈现出完美的混排效果，你需要一张完美的照片，和足够出彩的文字排版。
如果你准备接受挑战，那么请看接下来这10条技巧吧。
1、强化对比PackdogWearetelegraph首先网页首屏中的文字必须具备可读性才行，所以你需要确认文字与背景之间的色彩搭配能让用户看得清楚。
当你选择一个暗色调的背景，那么你需要使用白色或者浅色的的文字，而当背景比较素雅的时候，文字可以使用深色，这就是我所说的强化对比。
当然，对比不仅限于色彩，文字同样存在对比。
文字与图像相互配合，才能达到出人意表的效果。
例如第一个案例，Packdog网站的设计，大图作为背景，用色浓郁，文字则正好相反，轻薄而大小错落。
这些对比强烈的元素组合在一起令人印象深刻。
2、令文字成为图片的一部分meandmyselfportfoliotoast有的时候你需要让文字成为图片的一部分，甚至让文字成为图像本身来达到效果。
当然这种处理方式所需的条件比较苛刻。
要么你使用足够清爽简单的图片来和文字进行搭配，或者使用原本就包含图片的文字(当然，你也可以将文字妥妥儿地P到图片中的'主体上，文字的角度、形变和纹理一定要融入进去)。
3、沿着视觉流向排布BradhoganWorkdiary沿着视觉流向来排布信息是一项重要的技巧。
文字与图片发生逻辑关系，两者相辅相承，所以此时文字不能覆盖到图片的主体部分——比如需要展示的人物，或者产品本身。
信息按照视觉流向排布的时候，图片中的主体会引导你去观看文字信息。
这两个案例都使用了这种技巧，文字都是沿着人物的面目朝向或者眼神指向来排布的。
4、模糊背景hellonichewallmob模糊背景是一种非常简单的处理手法。
PS可以很轻易地模糊照片，而照片的模糊带来的直接效果就是让产品本身更加突出，以上的两个案例就是如此。
授课题目：第三讲制作图文混排网页目的要求：学会通过“管理站点”对话框创建站点；学会通过【文件】面板创建网页；掌握设置页面背景图像的方法；掌握在网页中插入图像的方法；掌握在网页中插入鼠标经过图像的方法；掌握设置图像属性的方法；掌握制作图文混排网页的技巧重点难点：设置页面背景图像；在网页中插入图像；设置图像属性组织教学：点名考勤；复习；引入新课；讲解理论知识；实例演示；指导学生练习；总结总结复习导入新课：图像通常用来添加图形界面、具有视觉感染力的内容或交互式设计元素， Web页中通常使用的只有三种，即GIF、JPEG和PNG。
提问：1.如何设置页面的整体属性？2.如何在网页中输入与编辑文本？3.如何对网页文本进行格式化处理？教学方式、手段、媒介：教学手段：讲授、多媒体；媒介：教材授课内容：第三讲制作图文混排网页【操作准备】（1）创建所需的文件夹，拷贝所需的资源（2）启动Dreamweaver CS6【引导训练】【任务3-1】制作介绍中国瀑布的图文混排网页本单元“引导训练”的任务卡如表3-1所示。
表3-1单元3“引导训练”任务卡网页0301.html的浏览效果如图3-1所示。
图3-1图文混排网页的浏览效果【任务3-1-1】使用“管理站点”对话框创建站点“单元3”【任务描述】使用【管理站点】对话框创建1个名称为“单元3”的本地站点，站点文件夹为“Unit03”。
【任务实施】（1）打开【管理站点】对话框在Dreamweaver CS6的主界面，选择命令【站点】→【管理站点】，打开【管理站点】对话框。
（2）打开【站点设置对象】对话框在【管理站点】对话框中单击【新建站点】按钮，打开【站点设置对象】对话框。
在【管理站点】对话框“站点名称”文本框中输入站点名称“单元3”，在“本地站点文件夹”文本框中输入完整的路径名称“D:\网页设计与制作案例\Unit03\task03-1\”。
在【站点设置对象】对话框中单击【保存】按钮，保存创建的站点，返回【管理站点】对话框。
实训3 图文混排2课时实训目的：1. 掌握word文档中插入图片的方法。
2. 掌握图片属性设置。
3. 掌握图片和文字混排。
任务1 在word 文档中插入图片任务描述：启动word2003，插入一张剪贴画和一张文件中的图片。
实训指导：1. 单击“开始”/“所有程序”/Microsoft office/Microsoft Office Word2003,启动Word2003程序。
2. 单击【插入】→【图片】→【剪贴画】，在Word窗口右侧出现“剪贴画”任务窗格。
3. 在“剪贴画”任务窗格单击“搜索”按钮，在下方出现剪贴画列表。
4. 在剪贴画列表中单击任意一张剪贴画插入到Word 2003 文档中5. 单击Enter键，光标落在下一行，单击“插入”下的“图片”按钮，弹出“插入图片”对话框，选择“我的文档”/“我的图片”文件夹中的一张图片，单击“插入”按钮。
6. 按下Ctrl+S组合键保存文档，在弹出的“另存为”对话框中选择保存路径，输入文件名为“pic”,单击“保存”按钮。
任务2 信笺纸的制作任务描述：启动Word 2003，添加页眉页脚，在页眉输入“信笺纸”文字，更改文字格式为“黑体、五号、居中”，更改页面颜色为“紫色网格”，添加页面边框为“瓢虫”样式，在页脚输入页码，保存文档。
实训指导：1. 单击“开始”/“所有程序”/Microsoft office/Microsoft Office Word2003,启动Word 2003 。
2. 单击【视图】→【页眉和页脚】，进入到“页眉”，使用输入法在页眉中输入“信笺纸”，选中文字，单击“开始”，在“字体”工具栏上设置文字格式为“黑体、五号、加粗”。
如下图所示。
3. 单击“页眉和页脚”工具栏中的“在页眉和页脚间切换”，使光标放在页脚，然后选择“插入”→“页码”，在页码对话框中选择在页面底部、右侧插入页码。
4. 单击“页眉和页脚”工具栏中的“关闭”按钮，关闭“页眉和页脚”工具栏，退出页眉和页脚的设置。
