《应用文本和图像》PPT课件.ppt

第2章 应用文本和图像,2.1 案例1应用文本制作文本网页 2.2学习任务：网页图像与网页图像处理工具 2.3 案例2 应用图像制作图像网页 2.4 实训制作“图文混排”网页,2.1 案例1应用文本制作文本网页,2.1.1 直接输入文本 2.1.2 复制添加其它文档中的文本 2.1.3 设置文本基本属性 2.1.4 创建列表 2.1.5 插入特殊文本,2.1.1 直接输入文本,将鼠标光标定位在插入文本的位置，输入文本即可。,如何输入多个连续的空格？,1.选择“插入HTML特殊字符不换行空格”菜单命令 2.按下Ctrl+Shift+Space组合键 3.编辑首先参数 在“常规”分类选项中，选定“编辑选项”中 的“允许多个连续的空格”,操作演示,如何换行？,1. Enter 插入 （形成一个段落） 2. shiftenter 插入 （段落内换行）,回车，形成段落换行，间隔为空白行,shiftenter ，形成段落内换行，没有空白行间隔,2.1.2 复制添加其它文档中的文本,方法1：选中源文本内容，直接复制到网页相应位置 方法2：文件导入,“编辑选择性粘贴”菜单命令的使用,仅文本：粘贴纯文本，不包括文本的任何格式。 带结构的文本：粘贴文本及段落格式、列表、表格等结构信息。 带结构的文本以及基本格式：粘贴文本结构信息以及基本的格式。 带结构的文本以及全部格式：粘贴文本和结构信息以及完整格式。,注意：向页面中导入的外部文档往往包含了一些多余的代码，可以通过清除冗余代码功能来清除它们。方法是：选择“命令清理Word生成的HTML”菜单命令，打开“清理Word生成的HTML文档”对话框，如图所示。,对整篇网页也可执行清理命令，选择“命令清理XHTML”菜单命令，打开“清理HTML/XHTML”对话框，如图所示，选择要清除的选项，单击【确定】按钮进行清理,属性面板简介：属性设置分为“HTML”和“CSS”两类，当选中“HTML”按钮后，“属性”面板显示与HTML属性相关的选项，如图所示，设置的属性将添加到网页正文的HTML标签中。,各选项含义如下： 格式：网页中的文本分为标题和段落两种格式。网页中的标题一共分为6个级别， 一般对应字体由大到小，同时文字全部加粗。在代码视图中，当使用“标题1”时， 文字两端对应标签，依此类推。点击“页面属性”按钮或选择“修改页面属性”菜单命令， 打开“页面属性”对话框，选择“标题（CSS）”选项，可对每个标题的字体、大小和颜色进行单独设置。 “类”和“ID”：对选定文本设置已定义的CSS样式类型。其中的“重命名”可对默认的样式名进行重新命名， “无”没有CSS样式可供应用，另外可删除已经设置了的文本样式。 “链接”和“目标”：设置文本的超链接和超链接打开方式。 粗体 和斜体 按钮：用于设置选定文本是否呈现粗体和斜体的样式。 按钮：是“项目列表”按钮，用于创建项目列表。 按钮：是“编号列表”按钮，用于创建编号列表。 、 按钮：是“文本缩进”和“文本凸出”按钮，用于设置文本的缩进或凸出效果。,图2-10 CSS相关的“属性”面板,目标规则：对选定的文本设置CSS规则，可选择已定义的CSS规则。选择将为选定文本创 建新CSS规则；选择 对选定文本设置的字体、大小、颜色、加粗及对齐方式，并将添加到 相应的HTML标签中；选择可删除已经设置了的文本样式。 【编辑规则】按钮：单击将打开“CSS规则定义”对话框，对选定的规则进行编辑修改。 【CSS面板】按钮：单击将打开CSS面板，对选定的规则进行编辑修改，或创建新规则。 其他选项是对文本格式做简单设置,注意:用户在添加字体类型时，最好使用宋体、楷体、仿宋和黑体 这4种字体，以防用户端没有相应字体库，造成不能正常显示。,演示,2.1.4 创建列表,列表可以使文本内容层次更加清晰。 列表在网页中有广泛应用，尤其在进行非结构化同等元素间的布局时经常用到。,列表分为有序列表和无序列表两大类。 项目列表是无序列表，对应标签； 编号列表是有序列表，对应标签； 列表中的列表项对应标签。,列表标记格式： ,如何创建列表？,使用“属性”面板中的“项目列表”按钮、“编号列表”按钮， 结合“文本缩进”按钮、“文本凸出”按钮，可以很方便的创建列表。,注意：只可以对段落添加列表，下级列表的创建只需要使用 缩进按钮即可。,演示,自定义列表项： 当系统提供的列表项目不能满足用户的需要时， 用户可自定义项目列表。 自定义项目列表通过“插入”面板“文本”标签中的“dl”、“dt”、“dd”按钮来实现。 标签等同于标签，用来定义列表， 标签等同于标签，用来定义列表项， 标签是对列表项的解释。,演示,列表属性的设置：通过 “属性”面板中的“列表项目”按钮来实现,列表类型：在下拉列表中包含“项目列表”、“编号列表”、“目录列表”、“菜单列表”选项。 其中，“目录列表”和“菜单列表”只在较低版本的浏览器中起作用，在目前的高版本的 浏览器中已经失去作用。 样式：选择相应的列表或编号的样式。 开始计数：只有在编号列表中才可以设置，在其文本框中可以输入一个数字作为编号 列表中第一个项目的值，其后的项目在该值基础上递增。 新建样式：设置选定的列表项目的项目符号样式。 重设计数：只应用于编号列表，指定从该选定的列表项目开始计数的起始值。,演示,2.1.5 插入特殊文本,Dreamweaver中的特殊文本包括特殊符号、水平线、日期和时间等， 如 “”、“”。Dreamweaver CS4针对上述特殊文本，提供了专门的 插入工具，使用起来非常方便。,插入水平线：插入HTML水平线 水平线的标签为 ,插入特殊字符：插入HTML特殊字符 或单击“插入”面板“文本”标签中最后一个按钮右侧的小三角,插入特日期和时间：插入日期,演示,2.2 学习任务：网页图像与网页图像处理工具,2.2.1 网页中常见的图像格式 2.2.2 网页图像设计工具简介,2.2.1 网页中常见的图像格式,在网页中使用图像可以使网页生动、美观、更具视觉冲击力。了解图像的格式及相应的设计工具有助于在网页中恰到好处的使用图像。 适应网络传输的要求，目前网页中通常使用的图像文件只有3种，即 GIF、JPEG 和 PNG，其中GIF 和 JPEG 文件格式的支持情况最好。 1GIF（图形交换格式） GIF文件是Internet上使用最早、最流行的图像格式。由于最高支持256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、,徽标、文本、卡通图像等，当它用来显示更丰富的色彩效果时，往往力不从心，但却有较好的压缩比。GIF图像支持交错显示模式，该模式会在网络传输速率较慢时，以隔行显示的方式慢慢下载显示完一张图片。GIF图像还支持透明背景，图像都是矩形占位的，通过设置背景透明度，来显示类似徽标等非规则形状，而不会遮挡背景。GIF文件的扩展名为.gif。 2JPEG（联合图像专家组） JPEG最多支持1670万种颜色，当网页上需要全彩色图像（如高清晰照片）时，最好选用该格式的图像。JPEG是一种有损压缩，压缩比很高，但压缩效果很好，压缩产生的损失肉眼很难看出来。JPEG图像支持渐进交错显示模式，该模式会在网络传输速率较慢时，由模糊到清晰慢慢下载显示完一张图片。该格式不支持透明度和动画功能。 3PNG（可移植网络图形） Fireworks的默认文件格式。该格式是一种替代GIF格式的无专利权限制的格式，具有GIF和JPEG的全部优点，该格式可,保留所有原始层、矢量、颜色和效果信息（如阴影），具有完全可编辑、灵活性强、文件容量小等特点，但该格式还处于普及阶段，还没有被所有浏览器支持。,2.2.2 网页图像设计工具简介,制作网页的前提是准备好各类素材。Dreamweaver CS4是一款网页设计工具，虽然本身具有一定的图像处理能力，但并不提供图像设计功能。因此，需要用户掌握一种图像处理软件的基本使用方法。现在流行的图像制作软件有Adobe公司的PhotoShop、Fireworks、Illustrator、FreeHand，Corel公司的CorelDrawt等。目前，应用最广的是Photoshop，最适合做网页图像的是Fireworks。 1Photoshop Photoshop是Adobe公司旗下最为出名的图像处理软件之一。从1990年2月由Adobe公司正式发行Photoshop 1.0开始，到2008年10月正式发布Photoshop CS4，Photoshop已经成为,图像处理软件中的领军人物，其功能强大、操作便捷，为设计工作提供了一个广阔的表现空间，使许多不可能实现的效果变成了现实。Photoshop的功能主要有： 处理图像尺寸和分辨率。可以按要求调整图像的尺寸、修改分辨率、裁剪图像。 图层功能。支持多图层工作方法，可以对图层进行合并、合成、翻转、复制和移动等编辑操作。可以建立不同的层，以及控制图层的透明度等。 绘画功能。使用Photoshop提供的绘图工具(喷枪工具、画笔工具、铅笔工具、直线工具等)可以绘制图形，使用文本工具可以在图像中加入文字内容。 选取功能。通过使用多种选取工具(矩形选框工具、椭圆形选框工具、魔棒工具、套索工具等)可以快速选取不同形状的选取范围，以及对不同选取范围进行修改和编辑(如进行羽化，自由变形选取范围，增删、载入和保存选取范围等编辑操作)。,色调和色彩功能。通过此功能可以很容易地调整图像的对比度、色相、饱和度和明暗度。 旋转和变形。可以分别对选取范围、层和路径等多种对象进行翻转和旋转，以及进行拉伸、缩放、倾斜和自由变形等操作。 支持多种颜色模式。可以灵活地转换多种颜色模式，包括黑白、灰度、双色调、索引色、HSB、Lab、RGB和CMYK模式等。 2Fireworks Fireworks与Dreamweaver和Flash并称“网页三剑客”，专门用于网页图形的编辑软件。Fireworks凭借其简便、易用等特点在Web图形设计和制作领域得到了广泛应用。 Fireworks除了具备图像处理软件的一般功能外，典型的功能有：,同时编辑位图和矢量图形的功能。Fireworks能把位图处理和矢量处理完美的结合在一起，使得网页图形设计人员不必在多种图形设计软件之间频繁切换。 大图切割功能。在网页中使用一大幅图像时会影响网页的下载速率，此时往往需要将大图片切割成多个小图片，Fireworks提供了切割工具可以将一个大图片分割成不同色深的多个小图片，并且生成相应的网页文件或代码，从而减小网页的重量。 制作具有动态效果的切图功能。 制作动画功能。利用Fireworks可以合并图象形成动画、使用符号生成动画效果和手工绘制动画。 文字工具及文字特效功能。Fireworks具有强大、完善的文字工具，不仅有完整的文字格式化功能，支持双字节文字，还有方便的文字色彩填充功能和文字对齐选项。,提示：使用Photoshop和Fireworks先制作出网页图像，再使用切片功能，导出切片以及包含切片的HTML文件，利用这种方法可以快速制作生成网页。,2.3 案例2 应用图像制作图像网页,2.3.1 插入图像 2.3.2 设置图像属性 2.3.3 编辑图像 2.3.4 插入其他图像元素 2.3.5 调整图像与页面其他元素对齐,2.3.1 插入图像,在网页中插入一幅图像，需要预先准备好图像文件，然后在插入点通过菜单命令或面板按钮方便地插入图像。 操作步骤如下： 1）新建一个空白HTML文档，并将其以“2-2.html”为文件名保存。 2）将光标置于页面上方，输入网页的主题文字“海南风光”，并根据上面介绍的方法适当设置文本的格式。 3）按下回车键，将光标置于页面的下一行，选择“插入图像”菜单命令；或者单击“插入”面板“常用”标签中的按钮 ，打开“选择图像源文件”对话框，在“查找范围”下拉列表中选择图像所在的目录，在预览区选择要插入的图片，如图2-25所示。,提示：Dreamweaver会自动生成选择的图像文件的URL，如果是在未保存的网页中添加图像文件，Dreamweaver将使用“file:/”开头的绝对地址，如果网页文件是已保存的文档，则Dreamweaver将自动转换为相对于该文档的相对地址。 4）单击【确定】按钮，打开“图像标签辅助功能属性”对话框，如图2-26所示。 5）在“替换文本”下拉列表框中选择或者输入图像的替换文本，单击【确定】按钮，完成图像的插入操作。 6）用同样的方法再次插入一幅图像，插入的两幅图像效果如图2-27所示。 7）保存网页文件，按下F12键预览网页效果。 提示：如果插入的图像不在站点中，插入时会弹出提示对话框，询问用户是否将图像复制到本地站点根目录内。插入图像的规范做法是：在站点根目录下建立如“images”文件夹，将需要插入到网页中的图像预先复制保存在此目录下。当站内文件增删变化后，可用“文件”面板中的刷新按钮查看。,图2-25“选择图像源文件”对话框,图2-26 “图像标签辅助功能属性”对话框,图2-27 插入的图像,2.3.2 设置图像属性,在网页中插入图像后，往往需要对其进行属性设置，例如，调整图像的大小、对齐方式、设置边框等，这些操作可以通过如图2-28所示的“属性”面板来完成。 图像“属性”面板中各项含义如下： 宽、高：指定图像被装入浏览器时所显示的宽度、高度，单,图2-28 图像“属性”面板,位是像素。在页面中插入图像时，Dreamweaver会自动在这两个文本框中填充图像的原始尺寸。要精确调整图像的显示尺寸可以直接在两个文本框中输入像素值；也可以用鼠标直接拖动图像四周的控制点，对图像进行大小调整。按下Shift键的同时拖动图像控制点，可以等比例调整图像的大小。如果需要恢复图像的原始值，单击“宽”和“高”文本框标签，或文本框右侧的“重设大小”按钮。 链接：指定图像的超链接，可以直接在输入框中输入文件的路径，也可以单击后面的图标 ，在打开的“选择图像源文件”对话框中选择要链接的文件，或者拖动“指向文件”图标 到“文件”面板的一个文件。 替换：指定图像无法正常显示时代替图像显示的替换文本。 垂直边距、水平边距：指定沿图像边缘添加的边距，以像素为单位。 边框：指定图像边框的宽度，以像素为单位。默认为无边框。,对齐：指定同一行上图像和文本的对齐方式。 编辑：使用后面的一组按钮可以对图像进行编辑，具体方法将在后面详细介绍。 继续上面的操作： 1）分别选中图2-27中显示的两幅图像，在其对应的“属性”面板中，适当调整图片的大小，并设置图片边框为3。 2）同时选中两幅图像，在“属性”面板中设置“目标规则”为“内联样式”，对齐方式选择居中对齐。 3）保存网页文档，按下F12键在浏览器中浏览网页效果。 提示：在“代码”视图中可以看到图像使用的标签为，src标签属性指定图像源文件，widt/heigh指定图像宽高，border指定图像边框，align指定图像对齐方式。,2.3.3 编辑图像,在网页中插入图像后有时需要再进一步的编辑，Dreamweaver 提供了基本的图像编辑功能，选用图2-28中圈起来的编辑按钮，可以对插入的图像进行编辑操作。 1关联外部编辑工具 Dreamweaver可以关联外部图像编辑器（如Photoshop、Fireworks、ACDsee）来编辑选定的图像，编辑完成保存图像后，Dreamweaver文档中的图像效果将随之变化。如果对选中的图像类型进行了关联操作，“编辑”按钮 将自动可用，点击该按钮即可打开该类图像对应的外部编辑器。可使用“首选参数”对话框选择“文件类型/编辑器”选项，选择要关联的文件扩展名，点击添加按钮 ，打开“选择外部编辑器”对话框进行关联。,2编辑图像设置 单击“编辑图像设置”按钮 ，弹出“图像预览”对话框，如图2-29所示，可对图像进行优化操作。在此对话框中，可将图片进行GIF和JPEG格式的转换，可设置压缩等级，进行可视化裁剪，如果是GIF动画图像，还可以进行帧速和循环播放的控制。右边的预览区可将一幅图像最多分4个窗口显示，分别对其设置，以观察设置效果。 3裁剪图像 裁剪可以删除图像中选定区域以外的多余部分。选定图像，单击裁剪按钮 ，所选图像周围会出现裁剪控制点，拖动鼠标调整裁剪控制点，在边界框内部双击，或按下Enter键均可完成裁剪操作，如图2-30所示。在图像外的任意地方单击可取消选择，选择“编辑撤消裁剪”命令或按下“Ctrl+Z”组合键可撤销刚才的裁剪操作，恢复原始图像。,图2-27 “图像预览”对话框,4调整图像亮度和对比度 亮度即图像的明亮程度，图像中亮的部分和暗的部分就产生了亮暗对比。选中图像，单击亮度/对比度按钮 ，弹出“亮度/对比度”对话框，拖动亮度或对比度滑块进行调整。调整前后的效果如图2-31所示。,图2-31 图像裁剪控制点 图2-32 调整图像亮度和对比度前后对比,5重新取样图像 为了使调整大小后的图像有更加清晰的外观，需要对缩放过的图像重新取样。重新取样是对调整大小后的图像按照一定算法添加或减少像素的过程。原始图像经过缩小，重新取样后原文件由105k变为3.45k，但仍保持了较好的图像质量。选中调整后的图像，单击重新取样按钮 即可。 6锐化图像 锐化图像的功能是增加图像边缘像素的对比度，从而增加图像清晰度。选中图像，单击锐化按钮 ，弹出“亮度/对比度”对话框，进行调整即可。,2.3.4 插入其他图像元素,1插入图像占位符 在网页布局时，有时需要先设计图像在网页中的位置，等设计方案通过后，再将这个位置变成具体的图像，使用图像占位符功能可在网页中预留相应大小的位置。 将光标定位在插入点，单击“插入”面板“常用”标签中的“图像占位符”按钮 ，打开“图像占位符”对话框，如图2-32所示。在“图像占位符”对话框中设置图像占位的名称、宽度、高度、颜色以及替换文本，单击【确定】按钮在页面中插入一个图像占位符。 选中图像占位符，可在“属性”面板中设置其属性。当图像准备好后，双击图像占位符，打开“选择图像源文件”对话框，在资源列表中选定图像文件，单击【确定】按钮完成替换。,图2-32 “图像占位符”对话框,2 插入鼠标经过图像 在网页中，当鼠标经过某个图像时，图像会转换成另外一个图像，当鼠标移开时又恢复为原来的图像，这就是鼠标经过图像功能。它由两幅大小一样的图像组成，一幅是首次加载页面时显示的图像，即主图像，另一幅是鼠标指针移过主图像时显示的图像，即次图像。,将光标定位在要插入图像的位置，单击“插入”面板“常用”标签中的“鼠标经过图像”按钮，打开“插入鼠标经过图像”对话框，如图2-33所示。设置相关选项后，单击【确定】按钮完成鼠标经过图像的插入。 “插入鼠标经过图像”对话框中各选项的含义如下： 图像名称：鼠标经过图像的名称。,图2-33 “插入鼠标经过图像”对话框,原始图像：即页面加载时显示的主图像，可在文本框中直接输入图像的相对路径，也可以通过“浏览”按钮选择图像。 鼠标经过图像：即鼠标经过原始图像时显示的次图像，也可直接输入路径或通过“浏览”按钮选择图像。 预载鼠标经过图像：选中该选项时，次图像将被预先加载到浏览器的缓存中，以便在显示次图像时不会发生延迟。 替换文本：用于在无法正常显示图像时显示替换文本。 按下时，前往的URL：鼠标经过图像时设置的超链接目标地址。 3插入导航条 “导航条”与“鼠标经过图像”的效果非常相似，操作也大致相同。“导航条”通常由一系列的栏目按钮组成。在状态方面，“鼠标经过图像”存在“原始图像”和“鼠标经过图像”两个状态；与其对应的“导航条”还可以有“按下图像”和“按下时鼠标经过图像”共四种状态。,将光标定位在要插入图像的位置，单击“插入”工具栏“常用”选项中的“导航条”按钮 ，打开“插入导航条”对话框，如图2-34所示。设置各选项后，单击【确定】按钮完成导航条的插入。,图2-34 “插入导航条”对话框,2.3.5 调整图像与页面其他元素对齐,当网页中既包含文本，又包含图像时，图像与文本段落其中的一行是平行的，也就是说，图像也作为一个特殊的元素在文本行内显示，尺寸较大的图像占据文本一行的高度，不仅浪费网页空间，而且视觉上也不美观，通过设置图像与同一行内其他元素的对齐方式，可达到文本环绕图像混排的效果。 选中图像，在“属性”面板的“对齐”下拉列表中选择对齐方式，即可改变混排效果。采用部分对齐方式达到的效果如图2-35所示。,图2-35 各对齐方式的效果图,各种对齐方式的含义： 默认值：指定基线对齐。 基线：将文本（或同一段落中的其它元素）的基线与图像的底部对齐。 顶端：将图像的顶端与当前行中最高项（图像或文本）的顶端对齐。 居中：将图像的中线与当前行的基线对齐。 底部：同基线，将图像的底部与当前行对齐。 文本上方：将图像的顶端与文本行中最高字符的顶端对齐。 绝对居中：将图像的中线与当前行文本的中线对齐。 绝对底部：将图像的底部与文本行的底部对齐。 左对齐：将所选图像放置在左侧，文本在图像的右侧换行。 右对齐：将所选图像放置在右侧，文本在图像的左侧换行。,2.4 实训制作“图文混排”网页,本实训重点练习在网页中插入文本、图像，设置图文对齐方式的方法，提高制作图文并茂网页的技能。 1实训要求 练习在网页中添加文本和图像的方法 练习网页中文本格式的设置 练习设置图像属性、编辑图像的方法 练习在网页中图文对齐方式的设置 2实训指导 1）在新建的网页文档中插入一幅图片，然后在图片的后面输入或复制一段文本。,2）选中文本，设置文本的字体、颜色、大小等属性，如图2-36所示。默认文本与图像的底部对齐。 3）选中图像，在“属性”面板的“对齐”下拉列表中选择对齐方式为“左对齐”，在“水平边距”文本框中输入30，以便在水平方向上使图像与页面边框以及文本间留有一段边距，增加页面效果，效果如图2-37所示。,图2-36 在图像后插入文本 图2-37 图像与文本左对齐,4）使光标置于下一行，插入第二幅图像后不换段输入文本，并设置文本属性。选中第二幅图像，在“属性”面板中设置“对齐方式”为“右对齐”，“水平边距”为30。 5）保存网页文件，按下F12键预览图文混排效果，如图2-38所示。,图2-38 图文混排网页效果,本章完,