【任务3-8】创建图文混排的网页0308.html
DW教程二、制作图文混排页面
第二节制作文字与图像混排的页面我们已经描绘了小屋的蓝图，从现在开始，为我们的小屋添砖加瓦吧。
打开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四、结果与分析算是成功完成。
信息技术应用基础3.8图文混排
3.8 Word的图文混排功能
2
2. 图形中添加文字
① 将鼠标指针移到要添加文字的图形中。右击该图形， 弹出快捷菜单。
② 执行快捷菜单中的“添加文字”命令。此时插入点 移到图形内部，在插入点之后键入文字即可。
图形中添加的文字将于图形一起移动能。同样，可以用 前面所述的方法，对文字格式进行编辑和排版。
3.8 Word的图文混排功能
1
绘制图形
1. 图形的创建
在Word中，可以用“插入/插图/形状”命令绘制基 本图形单元；并可用“绘图工具”功能区或用“绘图” 快捷菜单将基本图形单元组合出复杂的图形。
需要注意的是：用鼠标指针指向图形对象并单击一 次就可选定它。被选定的对象的周围就会出现可调节图 形大小的小方块，用鼠标拖动这些小方块可以改变图形 的大小。当鼠标指针移到所选定的图形中且指针形状变 成十字形箭头时，拖动鼠标可以改变图形的位置。
3.8 Word的图文混排功能
9
2. 改变文本框的位置、大小和环绕方式
移动文本框：鼠标指针指向文本框的边框线，当鼠标指针 变成 形状时，用鼠标拖动文本框，实现文本框的移动。
复制文本框：选中文本框，按Ctrl键的同时，用鼠标拖动 文本框，可实现文本框的复制。
改变文本框的大小：选定文本框，在他四周出现八个控制 大小的小方块，向内/外拖动文本框边框线上的小方块，可 改变文本框的大小。
改变文本框的环绕方式：文本框环绕方式的设定与图片环 绕方式的设定基本相同；另外，用与设置图形叠放次序类 似的方法，也可以改变文本框的叠放次。
3.8 Word的图文混排功能
10
3. 文本框格式设置
① 选定要操作的文本框。 ② 单 击鼠标右键，打开“文本框”快捷菜单。 ③ 单击“文本框”快捷菜单中“设置形状格式”命令， 可以打开图3-55所示的“设置形状格式”对话框。 ④ 在“设置形状格式”对话框中可以使用“填充”、 “线条颜色”、“线型”、“阴影”和“三维格式”等命令， 为文本框填充颜色，给文本框边框的设置线型和颜色，给文 本框对象添加阴影或产生立体效果等。
图文混排页面
（3）PNG（可移植网络图形）文件格式是一种替代 GIF 格式的无专利权 限制的格式，它包括对索引色、灰度、真彩色图像以及 alpha 通道透明的支 持。PNG 是 Macromedia Fireworks 固有的文件格式。PNG 文件可保留所有 原始层、矢量、颜色和效果信息（例如阴影），并且在任何时候所有元素都 是可以完全编辑的。文件必须具有 .png 文件扩展名才能被 Dreamweaver 识 别为 PNG 文件。
二、插入图像
1、“插入”菜单|“图像”
或 “插入”栏
按钮
2、图像标签辅助功能属性 “首选参数”|“辅助功能”|“图像”复选框 将会打开“图像标签 辅助功能属性”对话框
三、设置图像格式
在属性检查器上设置
注意： （1）在dreamweaver中改变图像的大小时，会使得图像失真； （2）要准确的实现图文混排最好使用表格或层来处理。
三、嵌套项目列表
属性检查器中的缩进文本 1.我的爱好
a)动画制作 b)浏览新闻 2.我的收藏 3.我的画册 4.我的家庭
4.4插入图像 一、图像类型 虽然存在很多种图形文件格式，但 Web 页面中通常使用的只有三 种，即 GIF、JPEG 和 PNG。目前，GIF 和 JPEG 文件格式的支持情 况最好，大多数浏览器都可以查看它们。
word教案之图文混排
第八课：图文混排一、公式的输入：1）、【插入】菜单→“对象”命令→“对象类型”列表→“Microsoft 公式3.0”→“确定”按钮→“公式编辑框”选择相应的公式→可将其插入→双击可将公式插入到页面中。
二、文本框的应用：1）文本框的插入：“绘图”工具栏→“文本框”按钮→拖动鼠标可勾画一个空的横排文本框→单击“插入竖排文本框”按钮可进行挺好入竖排文本。
2）、给已有文本框添加文本：选中要添加文本框的文本→“绘图”工具栏→“文本框”按钮→可添加一个新的文本框。
3）设置同页中横纵交排的文本：【插入】菜单→“文本框”选项→“横排”命令，光标变为十字形，可绘制一个横排文本框→“文本框”工具栏→输入横排文字→可拖动调整其适当位置。
（*：文本框里既可以输入文字，也可以插入图形。
插入竖排文本框同插入横排同类方式。
）4）设置文字绕排图片左右：先建立两个横排文本框→插入图片，然后设置一个文本框链接→鼠标移到文本框边框，变为移动键头时→右击→快捷菜单→“创建文本框链接”命令→鼠标变为酒状形式→左击，可创建两个文本框间的链接→可自动衔接。
5）、去掉文本框的黑边：选中文本框，按住Shift键单击时可连续选中多个文本→“绘图”工具栏→“线条颜色”按钮→线条颜色”按钮的下拉箭头→选择“无线条颜色“命令→空白处单击，可取消文本痕迹。
三、插入艺术字：1）、【插入】菜单→“图片”命令→“艺术字”→“艺术字库”对话框→选择一种艺术字样式→“确定”按钮→“编辑艺术字”对话框→“文字”框输入艺术字的文字→可在“字体”框中选择字体、字号、字体样式（加粗、倾斜、加下划线）→“确定”按钮。
2）、改变艺术字的属性：①拖动黄色的控制点，可以改变艺术字的形状。
②设置艺术字格式：选中艺术字→“艺术字”工具栏→“艺术字格式”“”→可改变其颜色、大小、线条等。
③“艺术字形状”按钮“”→面板→选择艺术字形状。
④“环绕方式““”选项→选择一种混排方式→“水平对齐方式”选项→选择一种对齐方式→“高级”按钮→“高级版式”对话框→可进行图形环绕效果设置→“确定”按钮。
8Word2003图文混排
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-1】制作图文混排网页
（2）设置网页的背景图像
单击【属性】面板上的【页面属性】按钮， 打开【页面属性】对话框，在【页面属性】对话 框中“外观（CSS）”属性组中单击背景图像文 本框右侧的【浏览】按钮，弹出【选择图像源文 件】对话框，在该对话框中搜索到所要设置的背 景图像文件“bg-gray.png”。
（3）插入第2幅图像
在Dreamweaver CC的主窗体【文档】工具栏 中单击【设计】按钮，切换到“设计”窗口，将 光标置于文本之后，按【Enter】键换行，然后按 照类似的方法插入4幅图像，即文件夹images中图 像t02.jpg、t03.jpg、t04.jpg和t05.jpg。
36 《网页设计与制作项目驱动教程（第3版）》
教学导航 教学重点难点
教学重点： 1、设置网页背景图像 2、在网页中插入图像 3、设置图像属性
教学难点： 1、设置页面背景图像 2、实现图文混排网页
7
教学导航 教学方法
信息化教学
课前布置在学习通 APP中学习本节微 课，课后提升练习
01
案例教学
制作介绍九寨沟景 区景点的图文混排 网页
02
操作准备
32 《网页设计与制作项目驱动教程（第3版）》
【任务实施】
（1）插入第1幅图像
将光标置于标题“诺日朗群海”右侧，按 【Enter】键换行，然后选择命令【插入】→【图 像】，在弹出的【选择图像源文件】对话框中选 择images文件夹中的图像文件“t01.jpg”。
在【选择图像源文件】对话框中单击【确定】 按钮，即可在网页0301.html中插入一幅图像。
（2）打开【导入 Word 文档】对话框
将 光 标 置 于 网 页 “ 0301.html ” 中 需 要 添 加 文
实训3 图文混排
实训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. 单击“页眉和页脚”工具栏中的“关闭”按钮，关闭“页眉和页脚”工具栏，退出页眉和页脚的设置。