第三讲 制作图文混排网页
创建基本网页文本,图像轮换,链接表单精品PPT课件
<bgsound>标签的属性
balance：设置音乐的左右均衡。 delay：进行播放延时的设置。 loop：循环次数的控制。 src ：音乐文件的路径。 volume：音量设置。 其中loop=“-1”表示音乐无限循环播放，如果
你要设置播放次数，则改为相应的数字即可。
插入flash动画 插入flash按钮 插入flash文本
3.4.1 插入flash动画
Flash动画是一种高质量的矢量动画，在网络中有着大量 的精美动画素材。让网页活跃起来，使用Dreamweaver 制作网页，可以在网页插入导出为.swf或.swt格式的 Flash按钮。
方法是：将光标置于文档中，执行“插入” “媒体” “Flash”命令，打开“选择文件”对话框。
一般在添加背景音乐时，我们并不需要对音乐 进行左右均衡以及延时的设置，所以仅需几个 主要的参数就可以了。
最后的代码如下： <bgsound src=“music.mid” loop=“-1”>
3.5 创建链接
创建文件链接 创建图像链接 创建图像热点链接 创建电子邮件链接 创建锚点链接
图像属性的设置主要是通过“属性”面板来完成的， 在“属性”面板中可设置图像的大小、位置、名称、 边框、替代文本、低解析度等内容，使图像更加符合 页面设计，并使其更加美观。
3.3 轮换图像
鼠标经过图像效果是指当访问者移动鼠标经过图像时,图 像变为另一幅图像,当鼠标离开时又恢复为原来的图像.
注意:两幅图像的大小完全相同。如果这两个图像大小不 同， Dreamweaver将自动调整第二个图像的大小，以匹 配第一个图像的属性。
3.2 插入图像
图像是网页中最重要的元素之一，图像能够使网页变 得丰富起来，令人耳ห้องสมุดไป่ตู้一新．图像不但能美化网页， 而且与文本相比更能够直观地说明问题，使表达的意 思一目了然，加深浏览者的印象．
InDesign图文混排与出版制作教程
InDesign图文混排与出版制作教程第一章：介绍InDesignInDesign是Adobe公司推出的一款专业排版软件，被广泛应用于出版、印刷和媒体行业。
它可以实现图文混排，即将文字、图片、表格等元素相互组合排列，达到美观、易读的效果。
本章将介绍InDesign的基本功能和界面布局，并提供一些操作技巧。
第二章：页面设置与调整在使用InDesign进行出版制作时，合理的页面设置是至关重要的。
本章将详细介绍如何设置页面尺寸、页边距、标尺以及页面布局等。
同时，还将探讨如何调整页面的大小、方向和页码。
第三章：文本编辑与样式设计文字是出版制作中最重要的元素之一，因此优秀的文本编辑和样式设计是必不可少的。
本章将详细介绍如何导入、编辑和调整文本内容，包括字体、大小、段落格式、间距等。
此外，还将介绍如何创建自定义样式和使用特殊效果来提升文字的视觉效果。
第四章：图像添加与处理图像在出版制作中起着重要的作用，能够丰富页面的内容和表现力。
本章将介绍如何添加图像到InDesign项目中，并对其进行调整和处理。
涉及的技术包括图片导入、剪裁、缩放、调整颜色等。
第五章：表格设计与调整表格在排版中常用于呈现大量数据或比较复杂的布局。
本章将详细介绍如何创建、编辑和调整表格，包括行列添加、格式设置、单元格合并、表格样式等。
同时，还将介绍如何应对长表格和跨页表格的处理。
第六章：图文混排技巧与布局设计图文混排是InDesign的一项重要功能，能够使得页面呈现更加丰富多样的内容形式。
本章将介绍一些图文混排的技巧，如文字环绕图片、文字沿路径排列等。
同时，还将着重讨论布局设计的原则和技巧，包括对齐方式、间距控制、块状与分栏布局等。
第七章：出版物导出与打印准备当设计完成后，出版物需要被导出为特定的文件格式或准备好进行打印。
本章将探讨如何将InDesign项目导出为PDF、EPUB等常见格式，并提供一些打印准备的技巧，如输出设置、色彩管理、印刷预览等。
图文混排页面
（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 文件格式的支持情 况最好，大多数浏览器都可以查看它们。
03第3章制作图文混排网页.
03第3章制作图⽂混排⽹页.第3章制作图⽂混排⽹页图像也是⽹页中的主要元素之⼀，图像不但能美化⽹页，⽽且能够更直观地表达信息。
在页⾯中恰到好处地使⽤图像，能使⽹页更加⽣动、形象和美观。
【教学导航】3.1课前准备（1）在本地硬盘创建⽂件夹（2）启动Dreamweaver CS3通过Windows的【开始】菜单启动Dreamweaver CS3。
3.2课堂引导训练及评价【课堂引导训练任务描述】1、⽹页制作任务卡⽹页制作任务卡如表3-1所⽰。
表3-1⽹页制作任务卡⽹页制作任务跟踪卡如表3-2所⽰。
表3-2⽹页制作任务跟踪卡【⽹页效果展⽰】⽹页index0301.html的浏览效果如图3-1所⽰。
【任务完成过程】3.2.1应⽤“⾼级”⽅式创建站点“瀑泉游”【操作要求】应⽤【站点定义】对话框的“⾼级”⽅式创建站点“瀑泉游”。
50第3章制作图⽂混排⽹页图3-1图⽂混排⽹页的浏览效果【实施过程】（1）打开【管理站点】对话框（2）打开【站点定义】对话框（3）设置站点的“本地信息”在“分类”列表中单击选择“本地信息”选项，输⼊或选择以下各项：②在“本地根⽂件夹”⽂本框中输⼊根⽂件夹“D:\E游天下\03第3章制作图⽂混排⽹页\”。
③在“默认图像⽂件夹”⽂本框中输⼊“D:\E游天下\03第3章制作图⽂混排⽹页\task03-1\images\”。
也可以打开对话框选择⼀个⽂件夹。
④输⼊本机的HTTP地址，如http://172.16.7.26/Etour/。
（4）设置站点的“远程信息”在【管理站点】对话框中单击【完成】按钮，新建站点便完成。
3.2.2应⽤“⽂件”⾯板新建⽹页“index0301.html”【操作要求】应⽤“⽂件”⾯板在站点“瀑泉游”中新建⼀个⽹页⽂档“index0301.html”。
【实施过程】（1）打开“⽂件”⾯板如果“⽂件”⾯板处理隐藏状态，则单击菜单【窗⼝】→【⽂件】打开“⽂件”⾯板。
（2）新建⽹页⽂档在“⽂件”⾯板中站点“瀑泉游”的⽂件夹“task03-1”上单击右键，在弹出的快捷菜51Dreamweaver CS3⽹页制作案例教程单中单击【新建⽂件】菜单项，如图3-7所⽰。
word 第三讲 图混排一课件
做出一篇图文混排的比较美观的文章。 5、完成学生证、信封的制作
今天的课到此 结束
大家回去过幸 福快乐的生活
去 吧
文本框格式的设置
■ 线条： 单击上图“线条”区中的“颜色”，如
下图所示。
文本框格式的设置
任选一种颜色，单击“确定”即可填充 文本框，若单击“其他颜色”，如下图所示。
在“标准”选项卡 中，可以选择任一 种颜色，也可以设 置其透明度。 若单击“自定义” 选项卡，则可以自 定义颜色。如下图 所示。
文本框格式的设置
选取
方法： ➢ 单击，选单个 ➢ Shift+单击，多个 ➢ Ctrl+单击，多个 ➢ 用“选择对象”按钮（ ），拖选，只有整 个图形都被框选住以后，才能被选中。
移动
方法如下：
➢ 按住左键拖动 ➢ 选中，按方向键 ➢ Alt+拖动，微移 ➢ Ctrl+方向键，微移 ➢ 执行“绘图→微移→向上”命令
在此区域选择颜色 模式，然后输入相 关数值，即可精确 定义你想要的颜色。
文本框格式的设置
若单击“填充效果”，如下图所示。
在“渐变”选项卡 中，可以选择“单 色、双色、预设” 中的任一方式，进 行设置，接着可以 设置“透明度”、 “底纹样式”、 “变形”。
文本框格式的设置
默认状态下，纹理24种，图案48种。
文本框格式的设置
2）“版式”选项卡，如下图所示。
创建文本框的特殊效果
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 ” 中 需 要 添 加 文
图文混排页面
2、应用文本样式 要想将设置好的文本样式应用于其他段落文本中，只要选中另一
段文本，单击“样式”下拉列表框，选择所需的样式即可。（或“文 本”|“CSS样式”|“s属性”检查器中修
格式设置选项中包含如下选项： （1）仅文本可以插入无格式文本。如果原始文本带格式，所有格式将被 删除。 （2）带结构的文本可以插入文本并保留结构，但不保留基本格式设置。 例如，您可以粘贴文本并保留段落、列表和表格的结构，但是不保留粗体、 斜体和其他格式设置。 （3）带结构的文本以及基本格式可以插入结构化并带简单 HTML 格式 的文本（例如，段落和表格以及带有 b、i、u、strong、em、hr、abbr 或 acronym 标签的格式化文本）。 （4）带结构的文本以及全部格式可以插入文本并保留所有结构、HTML 格式设置和 CSS 样式。 如果选择了“带结构的文本”或“基本格式”，则粘贴文本时可以使用 清理 Word 段落间距清除段落间的多余空格。
由于 PNG 文件具有较大的灵活性并且文件大小较小，所以它对于 几乎任何类型的 Web 图形都是最适合的；但是，Microsoft Internet Explorer（4.0 和更高版本）和 Netscape Navigator（4.04 和更高版 本）只能部分支持 PNG 图像的显示。因此，除非您正在为使用支持 PNG 格式的浏览器的特定目标用户进行设计，否则请使用 GIF 或 JPEG 以迎合更多人的需求。
（1）GIF（图形交换格式）文件最多使用 256 种颜色，最适合显示色调不 连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其它 具有统一色彩和色调的图像。
（2）JPEG（联合图像专家组标准）文件格式是用于摄影或连续色调图像 的高级格式，这是因为 JPEG 文件可以包含数百万种颜色。随着 JPEG 文件 品质的提高，文件的大小和下载时间也会随之增加。通常可以通过压缩 JPEG 文件在图像品质和文件大小之间达到良好的平衡。
在网页中实现图文混排10
课后作业
熟练掌握站点的创建及站点管理
整理现场
下课后请同学们自己将凳子、键盘、鼠标摆放整齐
实训反思
本节课在教学中主要采用演示与学生实践操练相结合的教学法，通过演示操作教学，让学生更能直观的学习操作过程，然后让学生实践操作。
通过现代教学媒体调动了学生的学习积极性，培养学生基本操作技能。
2）、宽、高→可缩小和放大图片的显示尺寸。
3）、源文件→图片的路径和名称。
4）、替代→图像的说明文字。
5）、边框→图片是否要加边框。
二、、编辑图像
1、垂直边距和水平边距→图片四周突出的尺寸
2、对齐→在一行中图形和文本的对齐方式
3、裁切
4、锐化
5、对比度/亮度
6、重新采样：当图片的宽、高缩小后，重新生成Biblioteka 小的图片。优化（为图片瘦身）
三、鼠标经过更换图片特效
1、概念：是指在页面中先显示一张图像，当鼠标移动到该图像上时，图像切换成另一张图像。
2、步骤：
1）、将光标放到要插入图像的地方。
2）、单击菜单“插入记录”---->“图像对象”--“鼠标经过图像”，打开“插入鼠标经过图像对话框”。
3）、设置完成，单击确定。
实训注意事项
教案
实训内容
网页的基本操作
实训地点
误课记录
实训时间
年月号第周星期第节课
教案序号
授课班级
实训课时
2
实训方式
讲课：□示范：□练习：□
实训目的
在网页实现图文混排、优化图片及鼠标经过效果
实训准备
教学PPT、DW软件
实训重点
熟练掌握在网页中使用鼠标经过效果
0301【任务3-1】制作介绍九寨沟景区景点的图文混排网页
单元3 制作图文混排网页【引导训练】【任务3-1】制作介绍九寨沟景区景点的图文混排网页【任务3-1-1】使用“管理站点”对话框创建站点“单元3”【任务描述】使用【管理站点】对话框创建1个名称为“单元3”的本地站点，站点文件夹为“Unit03”。
【任务实施】（1）打开【管理站点】对话框在Dreamweaver CC的主界面，选择命令【站点】→【管理站点】，打开【管理站点】对话框。
（2）打开【站点设置对象】对话框在【管理站点】对话框中单击【新建站点】按钮，打开【站点设置对象】对话框，如图3-3所示。
图3-3 【站点设置对象】对话框在【管理站点】对话框“站点名称”文本框中输入站点名称“单元3”，在“本地站点文件夹”文本框中输入完整的路径名称“D:\网页设计与制作案例\Unit03\”。
在【站点设置对象】对话框中单击【保存】按钮，保存创建的站点，返回【管理站点】对话框，如图3-4所示。
图3-4 新建站点“单元3”后的【管理站点】对话框在【管理站点】对话框中单击【完成】按钮，新建站点便完成。
【任务3-1-2】应用“文件”面板新建网页“0301.html”【任务描述】应用【文件】面板在站点“单元3”中新建1个网页文档“0301.html”。
【任务实施】（1）打开【文件】面板如果【文件】面板处理隐藏状态，则选择命令【窗口】→【文件】打开【文件】面板。
（2）新建网页文档在【文件】面板中站点“单元3”的文件夹“task03-1”上单击右键，在弹出的快捷菜单中单击【新建文件】菜单项。
然后输入新的网页文档名称“0301.html”，按回车键确认。
【任务3-1-3】设置页面的背景图像【任务描述】设置网页“0301.html”的背景图像为“bg-gray.png”。
【任务实施】（1）打开新建的网页文档“0301.html”在【文件】面板中双击网页文档名称“0301.html”，在Dreamweaver CC的文档窗口中打开该网页文档。
第三讲Word的图文混
3.编辑文档中的公式
• 在Word文档中双击需要编辑的数学公式。 这时将出现公式编辑器的工具栏，其菜单 栏将暂时取代Word的菜单栏。
• 在公式编辑器中，可利用其菜单栏和工具 栏上的选项来编辑公式，并完成所需修改。 可以添加、删除或改变公式中的元素，也 可以给公式中的文本应用不同的样式、尺 寸或格式，还可以调整元素的间距和位置 等。
2.用工具栏的“符号”和“样板”
“公式编辑器”窗口提供了一个特殊的工具栏， 客观存在直接位于菜单栏下面。工具栏中包含了 公式所使用的各种“符号”类别和“样板”，分 为上下两行。上面一行为数学公式中的各种“符 号”类别工具按钮，利用这些按钮可在公式中插 入150多个数学符号。其中许多符号在标准的 symbol字体中是没有的。如果要在公式中插入 符号，可先单击工具栏上面一行中相应的符号类 别按钮，这时会显示出该类别符号的工具板，从 中可选择所需的符号。
• 把指针移到菜单中的“叠放次序”命令，拉出下 一级菜单。
• 单击下一级菜单中的相应命令。(如“置于底层 ）
三、使用文本框
1．绘制文本框
如果要绘制文本框，则单击“绘图”工具栏中 的“文本框”或“竖排文本框”按钮，当将指针 移到文档中时，鼠标指针变为十字形。按住左键 拖动鼠标绘制文本框，当大小适当后放开左键。 此时，插入点在文本框中。可以在文本框中输入 文本或插入图片。此外，也可以单击“插入”下 拉菜单中的“文本框”命令来绘制文本框。
工具栏下面一行是插入公式用的各种样
板或结构，包含：分式、根式、求和、积分、 乘积和矩阵等符号。还有数学中使用的各种 围栏或像方括号这样的成对匹配符号。许多 样板还包含“插槽”——输入文字和插入符 号的空间。组合在工具栏上的样板大约有 120个，样板也可以嵌套，也就是把一个或 多个样板插入到另一个样板的插槽中来，建 立复杂的多级化公式。如果要在公式中插入 样板，可先单击工具栏上面一行中相应的样 板类别按钮，这时会显示出该类别样板的工 具板，从中可选择所需的样板。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
授课题目：第三讲制作图文混排网页目的要求：学会通过“管理站点”对话框创建站点；学会通过【文件】面板创建网页；掌握设置页面背景图像的方法；掌握在网页中插入图像的方法；掌握在网页中插入鼠标经过图像的方法；掌握设置图像属性的方法；掌握制作图文混排网页的技巧重点难点：设置页面背景图像；在网页中插入图像；设置图像属性组织教学：点名考勤；复习；引入新课；讲解理论知识；实例演示；指导学生练习；总结总结复习导入新课：图像通常用来添加图形界面、具有视觉感染力的内容或交互式设计元素， 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】应用“文件”面板新建网页“0301.html”【任务描述】应用【文件】面板在站点“单元3”中新建1个网页文档“0301.html”。
【任务实施】（1）打开【文件】面板（2）新建网页文档在【文件】面板中站点“单元3”的文件夹“task03-1”上单击右键，在弹出的快捷菜单中单击【新建文件】菜单项。
然后输入新的网页文档名称“0301.html”，按回车键确认。
【任务3-1-3】设置页面的背景图像【任务描述】设置网页“0301.html”的背景图像为“bg01.gif”。
【任务实施】（1）打开新建的网页文档“0301.html”（2）设置网页的背景图像单击【属性】面板上的【页面属性】按钮，打开【页面属性】对话框，在【页面属性】对话框中“外观（CSS）”属性组中单击背景图像文本框右侧的【浏览】按钮，弹出【选择图像源文件】对话框，在该对话框中搜索到所要设置的背景图像文件“bg01.gif”。
接着单击【确定】按钮，返回【页面属性】对话框。
然后单击【页面属性】对话框中的【确定】按钮，这样就为网页设置了所需的背景图像。
图像在网页中的应用Logo、Gif动画、广告图像、按钮图像、产品图像、背景图像网页上常用的图像类型Gif 图像Jpg 图像Png 图像【任务3-1-4】从外部导入文本与设置文本格式【任务描述】（1）将Word文档“瀑布之美.doc”导入到网页“0301.html”中。
（2）将网页“0301.html”的标题设置为“瀑布之美”。
（3）将网页“0301.html”中文本标题“瀑布之美”的字体设置为“黑体”，大小设置为“18像素”，颜色设置为“#0000FF”，对齐方式设置为“居中对齐”，样式名称为“style1”。
（4）将网页“0301.html”中文本“推荐度：”的字体设置为“仿宋_GB2312”，大小设置为“16像素”，颜色设置为“#00FFFF”，样式名称命名为“style2”。
（5）将网页“0301.html”中文本“★★★★”的字体设置为“楷体_GB2312”，大小设置为“14像素”，颜色设置为“#FF0000”，样式名称命名为“style3”。
（6）将网页“0301.html”中小标题“黄果树瀑布群”和“庐山的三叠泉瀑布”的大小设置为“16像素”，对齐方式设置为“左对齐”，且设置为“粗体”，样式名称命名为“style4”。
（7）将小标题“黄山的百丈瀑”的大小设置为“16像素”，对齐方式设置为“右对齐”，且设置为“粗体”，样式名称命名为“style5”。
（8）将网页“0301.html”中正文文本的字体设置为“宋体”，大小设置为“14像素”，样式名称命名为“style6”。
【任务实施】（1）准备Word文档（2）打开【导入 Word 文档】对话框（3）导入文本（4）设置网页“0301.html”的文本格式以类似的方法将页面文本“推荐度：”的字体设置为“仿宋_GB2312”，大小设置为“16像素”，颜色设置为“#00FFFF”，样式的名称命名为“style2”。
以类似的方法将页面文本“★★★★”的字体设置为“楷体_GB2312”，大小设置为“14像素”，颜色为“#FF0000”，样式的名称命名为“style3”。
以类似的方法将页面小标题“黄果树瀑布群”的大小设置为“16像素”，对齐方式设置为“左对齐”，且设置为“粗体”，样式的名称命名为“style4”。
选择另1个小标题“庐山的三叠泉瀑布”，在CSS【属性】面板的“目标规则”列表框中选择“style4”，即可应用该样式的属性设置。
将页面小标题“黄山的百丈瀑”的大小设置为“16像素”，对齐方式设置为“右对齐”，且设置为“粗体”，样式的名称命名为“style5”。
将页面正文文本的字体设置为“宋体”，大小设置为“14像素”，样式的名称命名为“style6”，所有的正文文本都应用该样式。
（5）设置网页标题在【文档】工具栏的“标题”文本框中输入网页的标题“瀑布之美”。
（6）保存网页单击【标准】工具栏中的【保存】按钮或【全部保存】按钮，保存网页的属性设置。
（7）预览网页效果【任务3-1-5】插入图像与设置图像属性【任务描述】（1）在网页“0301.html”中插入图像p01.jpg，且设置其属性：宽为120，高为80，替换文本为“黄果树瀑布群”，垂直边距为15，水平边距为10，对齐方式为“左对齐”。
（2）在网页“0301.html”中插入图像“p02.jpg”，且设置其属性：宽为120，高为100，替换文本为“黄山的百丈瀑”，垂直边距为10，水平边距为5，对齐方式为“右对齐”。
（3）在网页“0301.html”中插入图像“p03.jpg”，且设置其属性：宽为120，高为100，替换文本为“庐山的三叠泉瀑布”，垂直边距为15，水平边距为10，对齐方式为“左对齐”。
【任务实施】（1）插入第1幅图像（2）设置第1幅图像的属性（3）插入第2幅图像（4）设置第2幅图像的属性（5）插入第3幅图像（6）设置第3幅图像的属性（7）保存网页中插入的图像和设置的图像属性讲解：插入图像（快捷键Ctrl+Alt+I）插入图像在Dreamweaver中插入图像的基本方法是：1．将光标置于要插入图像的位置，在插入工具栏的“常用”类中单击“图像”按钮或选择“插入”菜单中的“图像”命令，打开“选择图像源文件”对话框。
2．在对话框中显示有图像文件名、文件类型和图像源的路径URL(每个网页都有一个唯一的地址，称作统一资源定位器即URL)。
我们选取存放在站点中的图像文件，然后单击【确定】按钮将显示“图像标签辅助功能属性”对话框，在“替代文本”和“详细描述”文本框中输入内容，单击“确定”按钮，即可将图片插入到指定区域。
3．如果所选择的图像文件不在用户设定的当前站点，则将打开“Macromedia Dreamweaver”对话框。
提示是否将图像文件复制到根文件夹，单击【是】按钮，然后打开“复制文件为”对话框，定位到站点中用于存放图像文件的文件夹images，最后单击【保存】按钮即可。
设置图像属性在网页中插入图像后可以对图像的各种相关属性进行设置，若要设置图像属性，请执行以下操作：1.图像名称及大小：使用缩略图下面的文本框设置名称，以便在使用Dreamweaver 行为(如“交换图像”)或脚本语言(如JavaScript 或VBScript)时可以引用该图像。
而缩略图右侧标明了所插入图像的大小。
2.宽和高:以像素为单位指定图像的宽度和高度。
当您在页中插入图像时，Dreamweaver 自动用图像的原始尺寸更新这些文本框。
在“宽”和“高”文本框中输入新值，实现图像大小改变，但却与图像的实际宽度和高度不相符，若要恢复图像原始值，可单击“宽”和“高”文本框右侧的“恢复图像到原始大小”按钮重设大小。
3.源文件：指定图像的源文件。
单击文件夹图标以浏览到源文件，或者直接键入路径。
4.链接：指定图像的超级链接。
将“指向文件”图标拖到“站点”面板中的某个文件，或单击文件夹图标浏览到站点上的某个文档，或手动键入URL。
5.对齐:可以将图像与同一行中的文本、另一个图像、插件或其它元素对齐。
当图像与图像在网页中对齐时，可由属性面板中的按钮、、来确定，当图像与文本、插件或其它元素对齐时，可将图像视为一般字符，运用属性面板中的列表来确定。
6.替代：指定只显示文本的浏览器或已设置为手动下载图像的浏览器中代替图像显示的替代文本。
在某些浏览器中，当鼠标指针滑过图像时也会显示该文本。
7.地图名称和热点工具：允许您标注和创建图像映射。
8.垂直边距和水平边距：沿图像的边缘添加边距(以像素为单位)。
“垂直边距”沿图像的顶部和底部添加边距。
“水平边距”沿图像左侧和右侧添加边距。
若图像和文字贴得太近，容易使人产生压迫感。
因此，适当调整图像间边距可以使浏览者在浏览网页时更加舒适。
9.目标：指定链接的页应当在其中载入的框架或窗口。
(当图像没有链接到其它文件时，此选项不可用。
)当前框架集中所有框架的名称都显示在“目标”列表中。
也可选用下列保留目标名：_blank:将链接的文件载入一个未命名的新浏览器窗口中。
_parent:将链接的文件载入含有该链接的框架的父框架集或父窗口中。
如果包含链接的框架不是嵌套的，则链接文件加载到整个浏览器窗口中。
_self:将链接的文件载入该链接所在的同一框架或窗口中。
此为默认值。
_top:将链接的文件载入整个浏览器窗口中，因而会删除所有框架。
10.低解析度源：指定在载入主图像之前应该载入的图像。
11.边框:以像素为单位的图像边框的宽度。
默认无边框。