DW文字、图像和多媒体插入

《DW文字、图像和多媒体插入》由会员分享，可在线阅读，更多相关《DW文字、图像和多媒体插入（65页珍藏版）》请在金锄头文库上搜索。

1、 第第3 3章输入和编辑网页中的基本元素章输入和编辑网页中的基本元素3.1网页中文本的操作 本节课堂目标： 熟练掌握网页文本的操作方法和技巧 本节教学内容： 1：文本对象的插入和格式设置（重点） 2：设置文本标题（难点） 3：段落的设置效果 （难点） 4：项目符号和编号的插入使用 5：历史记录面板的使用思考题：根据以前所学知识说出文本的编辑和设置属性 各包括几个方面？ 文本插入栏的按钮和属性面板的功按钮相似。. 认识文本按钮及属性面板. 插入文本和对象.文本是网页中最基础的载体；纯文本网页占用的存储空间 小，占用的网络带宽较少，打开速度快。将文本（英文、中文、数字）添加到文档中的方法有以下 三

2、种：直接输入、粘贴剪贴板中的文字、导入word格式 的文档。 复制/粘贴，巧妙使用“选择性粘贴”命令。 导入其他格式的文本（需要清理word生成的无关html 代码） 文件导入wordexcel 文档 也可拖动文件放入网页的适当位置，将文档链接 到网页中（链接文本是链接文件的名称）。.插入特殊字符：在html中它被称作实体，以 名称或数字的形式出现。特殊字符如右所 示。操作方法分别是： 菜单法：插入html特殊字符 插入栏按钮法：插入文本字符按钮默认情况下Html中只允许字符之间包含一 个空格，输入连续的多个空格的方法： 设置首选参数改变默认设置 在输入法为全角状态下输入多个空格.水平线（垂直

3、线）插入水平线以可视方式分割文本和对象来组织信息。插入html水平线 可在属性检查器中修改水平线（宽、高等） .插入日期： 菜单法； 插入栏按钮法5.对插入的文本也可以执行删除、搜索、替换、检查拼 写（文本检查拼写shift+f7）等操作。. 设置文本格式 字符的样式指的是字符的外观显示方式。利用Dw 可以设置多种字符样式，如字体、加粗 、倾斜 、 下划线 、 删除线 、 打字型 、 强调等 。默认时 Dreamweaver使用css设置文本的格式,当 使用命令来设置格式和对齐文本 时， css规则将嵌 入到当前文档中； 也可以使用标签来对齐文本（div标签）和设置文本 格式（font标签等）

4、，但要在首选参数中进行设置。. 设置文本标题文本标题来强调段落要表现的内容。在HTML中，定义了6 级标题，从1到6级，每级标题的字体大小依次递减。一段 文字只能设置一个标题级别。 在HTML中，采用如下的标记来定义标题： 和 定义标题1 和 定义标题2 和 定义标题3每级标题的字符大小并没有一个实际上的固定的值，它 是由浏览器所决定的，为标题定义的级别只决定了标题之 间的相互大小。 3. 设置段落效果 1.设置段落格式的方法 使用【属性】面板的【格式】弹出式菜单 选择【文本】|【段落格式】菜单 2.缩进段落所谓缩进，主要是相对于文档窗口（或浏览器窗口）左端 而言的。 属性检查器：“缩进”、“

5、凸出”按钮 文本菜单：“缩进”、“凸出”命令.对齐段落 段落的对齐方式，指的是段落相对文档窗口（或浏览器窗 口）在水平位置的对齐方式。有四种对齐方式：左对齐、 居中对齐、右对齐、两端对齐。 关于文本对齐，源代码设置为： .添加段间距：通过添加换行符在段间添加空行 添加段落换行符：按enter键 添加换行符：按shift+enter键添加特殊字符/换行符换行与分段的区别：文本换行时，按Enter键换行的行距较 大（在代码区生成标签），按EnterShift键换 行的行间距较小（在代码区生成标签）。.创建项目列表. 在HTML中，从总体上分有两种类型的项目列表，一种是无 序项目列表（使用项目符号来

6、标记项目，产生ul标签） ，另 一种是有序项目列表（使用编号来标记项目顺序，产生ol标 签）。 .在Dreamweaver 中，一旦插好一个，下一个列表只需按 enter键即可；列表可以嵌套。. 创建项目列表的步骤： 选中要转换为项目列表的所有段落。 单击“属性”面板上的“项目列表”按钮或“编号列表”按钮 ；也可以单击“文本”“列表”菜单项，选择相应的“无序 列表” 、“有序列表”菜单项。 这时被选中的段落文字就被转换为项目列表的形式。本节习题和作业 1. 填空题 （1）使用属性检查器或【文本】菜单中的选项可以设置或 更改所选文本的字体特性。可以设置字体、字形（如粗 体或斜体） _ 、和_。

7、（2）若要插入更多的特殊字符，请选择_ | _ | _或在_栏中选择_图标，选择一个字 符，然后单击【确定】。 2 . 选择题（多选） （1）设置文本属性可以通过_来设置。A属性面板B控制面板C启动面板D文本菜单（2）在网页中连续输入空格的方法是_。A连续按空格键B按下Ctrl键再连续按空格键C转换到中文的全角状态下连续按空格键D按下Shift键再连续按空格键 3.简答题： （1）下图所示情况何时出现？(2)如何将已经加入了粗、斜体的文字改为正常字体？(3)如何使日期保持在页面右下角？ (4)如何使编号呈下图所示的样式？（属性面板列表 项目按钮）4.操作题（1）将页面中添加如下图所示的表格（暂

8、时 可以通过导入word文档的方法实现）（2.）制作如下的文字页面.网页图像的运用本节内容和目标： 了解GIF、PNG和JPEG三种图像格式 的异同点和 使用环境。(重点、难点) 掌握在Dreamweaver 8.0中使用图像的一些基本方法和技巧（重点） 掌握编辑和设置图像的方法 掌握创建图像映射和电子相册的方法 .网页中图像格式简介 图像在网页中通常起到画龙点睛的作用，它能装饰网页，表 达个人的情趣和风格，恰到好处地使用图像能使网页更加地 生动、形象和美观 。图像比文本更能直观地表达信息。 网页中图像格式有： GIF 、JPEG 、PNG 、TIFF、BMP等 ，而最常用图像格式有：GIF

9、、JPEG 、PNG图1 JPEG 图2 GIF 图3 PNG 1GIF（Graphics Interchange Format）格式 (图形交换 格式)：使用最早、应用最广泛。 a.无损压缩、跨平台兼容； b .占用磁盘空间小、支持动画，交织下载、支持透明背景 图像。 c.支持8位(256色）图像，能够很好地表现不连续色调和大 面积色彩统一的图像，如：导航条、按钮、图标、广告 条（banner）、徽标等对色彩要求不高的图像格式。2. JPEG：Joint Photographic Expert Group（联合图 像专家组） 格式：目前最受欢迎。a.采用特殊的压缩算法，在失真较小的前提下，对

10、图片 进行有损压缩； b .用来表现较为专业的或有连续色调的图像可包含 数百万种色彩. 分辨率较高，可用于处理照片。c. JPEG格式不支持透明色，也没有动画的概念;采用 JPEG格式对图像进行压缩后，不能再重新打开图像。3.PNG：Portable Network Graphic(便携或可移植网络 图形格式，开发于1995年)：使用量逐渐增多。a .采用与GIF图像格式类似的压缩算法，能真实地显 示原始图像，支持透明背景，可控制压缩比，文件小, 灵活性强,完全可替代GIF格式,是fireworks软件自身 的文件格式，其扩展名为.png, 只有带扩展名dw才能 识别.b .支持真彩色，与JP

11、EG格式没有太大的差别，目前在 网络上得到大力推广。c .但只有Microsoft IE (4.0及以上版本)和Netscape Navigator(4.04及以上版本)才支持， GIF和JPEG不受 浏览器限制，应用较广泛。d.Png支持监视器的伽码设置修正，可跨平台兼容。总结： 当只需要静态图像且色彩要求也不高时：当所选用图像较 小时用gif格式文件小；而当所选用图像大时用jpg格式文 件小。此时png格式不具备优势。 GIF、JPEG 、PNG这几种格式都是标准的位图格式.所谓位 图格式就是指用图片上每一点的信息来描述图像；而矢量 格式则是用线条和填充色等数学信息来描述图像。矢量格 式的

12、文件要比位图格式的文件小得多，可表现一般的静态 画面也可以表现动画. 在Web页上显示图片之前，通常需要考虑下列三个问题： 确保文件较小:采用正确的格式进行优化处理 ,使图像具 有所需的像素大小 控制图像的数量和质量； 合理使用动画。 .在网页中使用图像1插入图像：为了保证参数的正确，图象文件必须保存 在当前站点的images文件夹中，否则dw提示将其复制 到当前站点目录下。插入后产生img标签。具体操作步骤：单击插入-图像命令/常用插栏的插入图像 按钮 。 2.插入图像占位符：暂时为图片占个位置，在浏览器中不 显示，在发布网站之前需用具体图象替换它，在属性检 查器中（源文件）完成替换更新。一

13、旦插入在html代码 中自动产生一个包含属性的图象标签src和替换文本标 签（alt）。src表示要插入图像的文件名，必须包含绝对路径或相对路 径，图像可以是GIF文件、JPEG文件或PNG文件。alt表 示图像的简单文本说明，用于不能显示图像的浏览器或浏 览器能显示图像但显示时间过长时先显示，以帮助访问者 了解图像的信息。具体操作步骤 ：单击“插入-图像对象图像占位符”命令/ 常用插栏的插入图像图像占位符 按钮。在名称框中给占位符取名的命名规则：字母开头，只能包 含字母和数字，不能使用空格和ASCII字符。3.创建鼠标经过图象（轮换图像）：只能在浏览器中查看（ 在文档窗口中不能查看效果）并使

14、用鼠标指针移过它时 发生变化的图像，由主图像（即页面首次装载时所显示 出的图像）和翻转图像（当鼠标指针掠过时所显示的图 像）组成，二者大小要一样。一旦插入在html代码中自 动产onmouseover事件。 4. 在dw中图像的编辑功能仅适用于GIF 和JPEG 图像格式。 在属性检面板中编辑图像在其中可设置图像的属性参数（宽、高、替代）、对齐图 像（左、右、居中对齐）、边距、边框、改变图像的尺 寸 （也可直接拖动调整控制点）、裁剪图像、调整其对 比度、锐化图像。 上述设置也可通过菜单实现：修改-图像 用fireworks优化图像：要方便地完成相关的处理工作，则需要图形图像处理软件的 协助。

15、具体操作：修改图像-在fireworks优化图像。在页面中合理地使用图形图像已经成为网页制作的一个 基本要求。但是并非所有图形图像都可以直接用在网页中 ，大多数情况下，需要对原始图像素材进行一些处理，例 如图像优化、添加特效等，然后再在网页中使用。为图像添加热点 热点即图像上不可见的区域，该区域分配了一个超链接。 为图像添加热点就是在图像上划分区域，从而设定图像上 制作超链接的范围。使用图像或图像中的某些区域来创建 超链接，为网页设计增色不少。如果我们不建立链接，只 是当鼠标移到图像的某些区域时，能显示一些提示信息或 对图的注释，那么效果也一定不错。在Dream weaver中为图像添加热点的方法为： 选定图像 ，打开图像属性面板，选择设置热点按钮，单击鼠标左键 并拖动， 在图像中设置热点形状。 .设置图文混排和图像边距 的效果。 图像和文字的对齐有： 对齐时要先选择图像， 再选对齐方式。 设置图像边距， 可以使图像和相邻的 文字或其他图片之间 有一个间距。7.制作电子相册：命令创建网站相册本节习题和作业 1填空题 （1）在计算机领域中，图像分为_和_2大 类。 （2）GIF图像采用的是_压缩格式。 2 选择题 （2）网页通常