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

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

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

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

3、水平线 可在属性检查器中修改水平线（宽、高等）.插入日期：菜单法；插入栏按钮法 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中，从总体上分有两种类型的项目列表，一种是无序项目列表（使用项目符号来标记项目，产生ul标签） ，另一种是有序项目列表（使用编号来标记项目顺序，产生ol标签）。.在Dream

6、weaver 中，一旦插好一个，下一个列表只需按enter键即可；列表可以嵌套。. 创建项目列表的步骤：选中要转换为项目列表的所有段落。单击“属性”面板上的“项目列表”按钮或“编号列表”按钮；也可以单击“文本”“列表”菜单项，选择相应的“无序列表” 、“有序列表”菜单项。这时被选中的段落文字就被转换为项目列表的形式。,本节习题和作业1. 填空题（1）使用属性检查器或【文本】菜单中的选项可以设置或更改所选文本的字体特性。可以设置字体、字形（如粗体或斜体） _ 、和_。（2）若要插入更多的特殊字符，请选择_ | _ | _或在_栏中选择_图标，选择一个字符，然后单击【确定】。2 . 选择题（多选）

7、（1）设置文本属性可以通过_来设置。 A属性面板B控制面板 C启动面板D文本菜单,（2）在网页中连续输入空格的方法是_。 A连续按空格键 B按下Ctrl键再连续按空格键 C转换到中文的全角状态下连续按空格键 D按下Shift键再连续按空格键3.简答题：（1）下图所示情况何时出现？(2)如何将已经加入了粗、斜体的文字改为正常字体？,(3)如何使日期保持在页面右下角？(4)如何使编号呈下图所示的样式？（属性面板列表项目按钮）,4.操作题（1）将页面中添加如下图所示的表格（暂时可以通过导入word文档的方法实现）,（2.）制作如下的文字页面,.网页图像的运用本节内容和目标： 了解GIF、PNG和JP

8、EG三种图像格式 的异同点和使用环境。(重点、难点) 掌握在Dreamweaver 8.0中使用图像的一些基本方法和技巧（重点） 掌握编辑和设置图像的方法 掌握创建图像映射和电子相册的方法,.网页中图像格式简介图像在网页中通常起到画龙点睛的作用，它能装饰网页，表达个人的情趣和风格，恰到好处地使用图像能使网页更加地生动、形象和美观 。图像比文本更能直观地表达信息。 网页中图像格式有： GIF 、JPEG 、PNG 、TIFF、BMP等，而最常用图像格式有：GIF 、JPEG 、PNG,图1 JPEG 图2 GIF 图3 PNG,1GIF（Graphics Interchange Format）格

9、式 (图形交换格式)：使用最早、应用最广泛。a.无损压缩、跨平台兼容； b .占用磁盘空间小、支持动画，交织下载、支持透明背景图像。c.支持8位(256色）图像，能够很好地表现不连续色调和大面积色彩统一的图像，如：导航条、按钮、图标、广告条（banner）、徽标等对色彩要求不高的图像格式。,2. JPEG：Joint Photographic Expert Group（联合图像专家组） 格式：目前最受欢迎。 a.采用特殊的压缩算法，在失真较小的前提下，对图片进行有损压缩； b .用来表现较为专业的或有连续色调的图像可包含数百万种色彩. 分辨率较高，可用于处理照片。c. JPEG格式不支持透明色

10、，也没有动画的概念;采用JPEG格式对图像进行压缩后，不能再重新打开图像。,3.PNG：Portable Network Graphic(便携或可移植网络图形格式，开发于1995年)：使用量逐渐增多。 a .采用与GIF图像格式类似的压缩算法，能真实地显示原始图像，支持透明背景，可控制压缩比，文件小,灵活性强,完全可替代GIF格式,是fireworks软件自身的文件格式，其扩展名为.png, 只有带扩展名dw才能识别. b .支持真彩色，与JPEG格式没有太大的差别，目前在网络上得到大力推广。 c .但只有Microsoft IE (4.0及以上版本)和Netscape Navigator(4

11、.04及以上版本)才支持， GIF和JPEG不受浏览器限制，应用较广泛。 d.Png支持监视器的伽码设置修正，可跨平台兼容。,总结：当只需要静态图像且色彩要求也不高时：当所选用图像较小时用gif格式文件小；而当所选用图像大时用jpg格式文件小。此时png格式不具备优势。GIF、JPEG 、PNG这几种格式都是标准的位图格式.所谓位图格式就是指用图片上每一点的信息来描述图像；而矢量格式则是用线条和填充色等数学信息来描述图像。矢量格式的文件要比位图格式的文件小得多，可表现一般的静态画面也可以表现动画.在Web页上显示图片之前，通常需要考虑下列三个问题： 确保文件较小:采用正确的格式进行优化处理 ,

12、使图像具有所需的像素大小 控制图像的数量和质量； 合理使用动画。,.在网页中使用图像 1插入图像：为了保证参数的正确，图象文件必须保存在当前站点的images文件夹中，否则dw提示将其复制到当前站点目录下。插入后产生img标签。 具体操作步骤：单击插入-图像命令/常用插栏的插入图像按钮 。2.插入图像占位符：暂时为图片占个位置，在浏览器中不显示，在发布网站之前需用具体图象替换它，在属性检查器中（源文件）完成替换更新。一旦插入在html代码中自动产生一个包含属性的图象标签src和替换文本标签（alt）。,src表示要插入图像的文件名，必须包含绝对路径或相对路径，图像可以是GIF文件、JPEG文件

13、或PNG文件。alt表示图像的简单文本说明，用于不能显示图像的浏览器或浏览器能显示图像但显示时间过长时先显示，以帮助访问者了解图像的信息。 具体操作步骤 ：单击“插入-图像对象图像占位符”命令/常用插栏的插入图像图像占位符 按钮。在名称框中给占位符取名的命名规则：字母开头，只能包含字母和数字，不能使用空格和ASCII字符。,3.创建鼠标经过图象（轮换图像）：只能在浏览器中查看（在文档窗口中不能查看效果）并使用鼠标指针移过它时发生变化的图像，由主图像（即页面首次装载时所显示出的图像）和翻转图像（当鼠标指针掠过时所显示的图像）组成，二者大小要一样。一旦插入在html代码中自动产onmouseove

14、r事件。4. 在dw中图像的编辑功能仅适用于GIF 和JPEG 图像格式。在属性检面板中编辑图像在其中可设置图像的属性参数（宽、高、替代）、对齐图像（左、右、居中对齐）、边距、边框、改变图像的尺寸 （也可直接拖动调整控制点）、裁剪图像、调整其对比度、锐化图像。,上述设置也可通过菜单实现：修改-图像用fireworks优化图像： 要方便地完成相关的处理工作，则需要图形图像处理软件的协助。 具体操作：修改图像-在fireworks优化图像。 在页面中合理地使用图形图像已经成为网页制作的一个基本要求。但是并非所有图形图像都可以直接用在网页中，大多数情况下，需要对原始图像素材进行一些处理，例如图像优化

15、、添加特效等，然后再在网页中使用。,为图像添加热点 热点即图像上不可见的区域，该区域分配了一个超链接。为图像添加热点就是在图像上划分区域，从而设定图像上制作超链接的范围。使用图像或图像中的某些区域来创建超链接，为网页设计增色不少。如果我们不建立链接，只是当鼠标移到图像的某些区域时，能显示一些提示信息或对图的注释，那么效果也一定不错。 在Dream weaver中为图像添加热点的方法为： 选定图像，打开图像属性面板，选择设置热点按钮，单击鼠标左键并拖动， 在图像中设置热点形状。,.设置图文混排和图像边距的效果。图像和文字的对齐有：对齐时要先选择图像，再选对齐方式。设置图像边距，可以使图像和相邻的文字或其他图片之间有一个间距。7.制作电子相册：命令创建网站相册,本节习题和作业1填空题（1）在计算机领域中，图像分为_和_2大类。（2）GIF图像采用的是_压缩格式。2 选择题（2）网页通常可以支持的图像格式有_。 AGIF BBMP CAVI DPSD EPNG FJPEG。,