应用文本和图像

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,*,第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”对话框，如图所示，选择要清除的选项，单击【确定】按钮进行清理,2.1.3 设置文本基本属性,属性面板简介：属性设置分为“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）按下回车键，将光标置于页面的下一行，选择“插入图像”菜单命令；或者单击“插入”面板“常用”标签中的按钮 ，打开“选择图像源文件”对话框，在“查找范围”下拉列表中选择图像所在的目录，在预览区选择