下载文档原格式
InDesign图文混排与出版制作教程第一章：介绍InDesignInDesign是Adobe公司推出的一款专业排版软件，被广泛应用于出版、印刷和媒体行业。
它可以实现图文混排，即将文字、图片、表格等元素相互组合排列，达到美观、易读的效果。
本章将介绍InDesign的基本功能和界面布局，并提供一些操作技巧。
第二章：页面设置与调整在使用InDesign进行出版制作时，合理的页面设置是至关重要的。
本章将详细介绍如何设置页面尺寸、页边距、标尺以及页面布局等。
同时，还将探讨如何调整页面的大小、方向和页码。
第三章：文本编辑与样式设计文字是出版制作中最重要的元素之一，因此优秀的文本编辑和样式设计是必不可少的。
本章将详细介绍如何导入、编辑和调整文本内容，包括字体、大小、段落格式、间距等。
此外，还将介绍如何创建自定义样式和使用特殊效果来提升文字的视觉效果。
第四章：图像添加与处理图像在出版制作中起着重要的作用，能够丰富页面的内容和表现力。
本章将介绍如何添加图像到InDesign项目中，并对其进行调整和处理。
涉及的技术包括图片导入、剪裁、缩放、调整颜色等。
第五章：表格设计与调整表格在排版中常用于呈现大量数据或比较复杂的布局。
本章将详细介绍如何创建、编辑和调整表格，包括行列添加、格式设置、单元格合并、表格样式等。
同时，还将介绍如何应对长表格和跨页表格的处理。
第六章：图文混排技巧与布局设计图文混排是InDesign的一项重要功能，能够使得页面呈现更加丰富多样的内容形式。
本章将介绍一些图文混排的技巧，如文字环绕图片、文字沿路径排列等。
同时，还将着重讨论布局设计的原则和技巧，包括对齐方式、间距控制、块状与分栏布局等。
第七章：出版物导出与打印准备当设计完成后，出版物需要被导出为特定的文件格式或准备好进行打印。
本章将探讨如何将InDesign项目导出为PDF、EPUB等常见格式，并提供一些打印准备的技巧，如输出设置、色彩管理、印刷预览等。
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所⽰。
单元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的文档窗口中打开该网页文档。
授课题目：第三讲制作图文混排网页目的要求：学会通过“管理站点”对话框创建站点；学会通过【文件】面板创建网页；掌握设置页面背景图像的方法；掌握在网页中插入图像的方法；掌握在网页中插入鼠标经过图像的方法；掌握设置图像属性的方法；掌握制作图文混排网页的技巧重点难点：设置页面背景图像；在网页中插入图像；设置图像属性组织教学：点名考勤；复习；引入新课；讲解理论知识；实例演示；指导学生练习；总结总结复习导入新课：图像通常用来添加图形界面、具有视觉感染力的内容或交互式设计元素， 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.边框:以像素为单位的图像边框的宽度。
默认无边框。
