网页中的基本元素.ppt

《网页中的基本元素.ppt》由会员分享，可在线阅读，更多相关《网页中的基本元素.ppt（70页珍藏版）》请在三一办公上搜索。

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

2、p27-28）,复制/粘贴（ctrl+v，注意首选参数中“复制粘贴”选项的设置）在Dreamweaver中复制和粘贴文本有两种，一是标准的方式，另一种就是仅复制粘贴文本，它忽视了HTML格式，执行复制后选择“编辑选择性粘贴”命令，在打开的对话框中选择“仅粘贴文本”即可实现。导入其他格式的文本（需要清理word生成的无关html代码）文件导入wordexcel 文档 也可拖动文件放入网页的适当位置，以创建链接的形式插入其他格式的文档（链接文本是链接文件的名称。,.插入特殊字符：在html中它被称作实体，以名称或数字的形式出现。特殊字符如右所示。操作方法分别是：菜单法：插入html特殊字符插入栏按

3、钮法：插入文本字符按钮注意：默认情况下Html中只允许字符之间包含一个空格，但可以通过设置首选参数改变默认设置，以实现插入多个空格，可以在全角状态下输入多个空格。,.水平线（垂直线）插入水平线以可视方式分割文本和对象来组织信息。插入html水平线 可在属性检查器中修改水平线（宽、高等）.插入日期：菜单法；插入栏按钮法 5.对插入的文本也可以执行删除、搜索、替换、检查拼写（文本检查拼写shift+f7）等操作。,.设置文本格式.关于设置文本样式字符的样式指的是字符的外观显示方式，例如字符的加粗、倾斜和下划线等，利用Dreamweaver，可以设置多种字符样式。加粗、倾斜、下划线、删除线、打字型、

4、强调 等。默认时 Dreamweaver使用css设置文本的格式,当使用命令来设置格式和对齐文本 时，css规则将嵌入到当前文档中；也可以使用标签来对齐文本和设置文本格式。但要在首选参数中进行设置。,.设置字体利用属性面板，也可以实现对字符字体的设置。打开属性面板上的字体列表，选择相应字体项即可。.设置字号（大小）字号指的是字体的大小，它没有一个绝对的大小标准，其大小只是相对于默认字体而言。例如，1号字和2号字，比默认字体要小一些，而4号字和5号字，比默认字体要大一些。.设置文本颜色打开【文本】菜单，选择【颜色】，可以打开Windows标准的颜色对话框，允许用户选择颜色。,.设置文本标题文本标

5、题来强调段落要表现的内容。在HTML中，定义了6级标题，从1到6级，每级标题的字体大小依次递减。一段文字只能设置一个标题级别。在HTML中，采用如下的标记来定义标题：和 定义标题1和 定义标题2和 定义标题3每级标题的字符大小并没有一个实际上的固定的值，它是由浏览器所决定的，为标题定义的级别只决定了标题之间的相互大小。可以在代码视图中直接使用html的标题标签来设置文本标题的格式，也可以在属性面板中设置标题。,3.设置段落效果 1 设置段落格式使用【属性】面板的【格式】弹出式菜单或选择【文本】|【段落格式】菜单可以应用标准段落和标题标签。缩进段落所谓缩进，主要是相对于文档窗口（或浏览器窗口）左

6、端而言的。许多时候需要缩进段落，例如希望强调一段文字，或引用其他来源的文字，都需要将文字缩进，以示同普通段落的区别。属性检查器：“缩进”、“凸出”按钮文本菜单：“缩进”、“凸出”命令,对齐段落 段落的对齐方式，指的是段落相对文档窗口（或浏览器窗口）在水平位置的对齐方式。有四种对齐方式：左对齐、居中对齐、右对齐、两端对齐。关于文本对齐，源代码设置为：添加段间距：通过添加换行符在段间添加空行 添加段落换行符：按enter键 而添加换行符：按shift+enter键添加特殊字符/换行符 文本换行时，按Enter键换行的行距较大（在代码区生成标签），按EnterShift键换行的行间距较小（在代码区生

7、成标签）。,.创建项目列表.设置段落的项目列表是Dreamweaver 一个很重要的格式设置方法。在HTML中，从总体上分有两种类型的项目列表，一种是无序项目列表，另一种是有序项目列表，当然还有定义列表、目录列表和菜单列表。无序项目列表使用项目符号来标记项目，有序项目列表则使用编号来标记项目顺序。.在Dreamweaver 中，允许设置多种项目列表格式。一旦插好一个，下一个列表只需按enter键即可。,.项目列表的类型在HTML中，可以创建的列表有：无序列表、有序列表、定义列表、目录列表和菜单列表.使用现有的项目列表要使用现有的项目列表，请执行如下步骤：选中要转换为项目列表的所有段落。单击“属

8、性”面板上的“项目列表”按钮或“编号列表”按钮；也可以单击“文本”“列表”菜单项，选择相应的“无序列表”（ul标签）、“有序列表”菜单项（ol标签）。这时被选中的段落文字就被转换为项目列表的形式。.创建嵌套项目列表：缩进后再创建即可。,历史记录面板,打开该面板:“窗口-历史记录”(shift+f10)撤消:一个或多个步骤(数目最多为指定的数目)重做 应用在文档间复制和粘贴步骤设置:编辑-首选参数(指定数目),本节习题和作业1 填空题（1）使用属性检查器或【文本】菜单中的选项可以设置或更改所选文本的字体特性。可以设置字体、字形（如粗体或斜体）_、和_。（2）若要插入更多的特殊字符，请选择_|_|

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

10、,.网页图像的运用本节内容和目标：了解GIF、PNG和JPEG三种图像格式 的异同点和使用环境。(重点、难点)掌握在Dreamweaver 8.0中使用图像的一些基本方法和技巧（重点）掌握编辑和设置图像的方法 掌握创建图像映射和电子相册的方法,.网页中图像格式简介图像也是网页中主要元素之一，图像不但能美化网页，与文本相比能够更直观地表达信息。图像在网页中通常起到画龙点睛的作用，它能装饰网页，表达个人的情趣和风格，恰到好处地使用图像能使网页更加地生动、形象和美观。网页中图像格式有：GIF、JPEG、PNG、TIFF、BMP等，而最常用图像格式有：GIF、JPEG、PNG,图1 JPEG 图2 G

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

12、百万种色彩.分辨率较高，可用于处理照片。c.JPEG格式不支持透明色，也没有动画的概念,只能为静态图像;采用JPEG格式对图像进行压缩后，不能再重新打开图像。,3.PNG：Portable Network Graphic(便携或可移植网络图形格式，开发于1995年)：使用量逐渐增多。a.采用与GIF图像格式类似的压缩算法，能真实地显示原始图像，支持透明背景，是fireworks软件自身的文件格式，其扩展名为.png.b.支持真彩色，与JPEG格式没有太大的差别，目前在网络上得到大力推广。c.但只有Microsoft IE(4.0及以上版本)和Netscape Navigator(4.04及以上

13、版本)才支持，GIF和JPEG不受浏览器限制，应用较广泛。d.PNg支持监视器的伽码设置修正，可跨平台兼容。,GIF、JPEG、PNG这几种格式都是标准的位图格式.所谓位图格式就是指用图片上每一点的信息来描述图像；而矢量格式则是用线条和填充色等数学信息来描述图像。矢量格式的文件要比位图格式的文件小得多，可表现一般的静态画面也可以表现动画.在Web页上显示图片之前，通常需要考虑下列三个问题：确保文件较小:采用正确的格式进行优化处理,使图像具有所需的像素大小 控制图像的数量和质量；合理使用动画。,.在网页中使用图像 1插入图像：为了保证参数的正确，图象文件必须保存在当前站点的images文件夹中，

14、否则dw提示将其复制到当前站点目录下。插入后产生img标签。具体操作步骤：单击插入-图像命令/常用插栏的插入图像按钮。2.插入图像占位符：暂时为图片占个位置，在浏览器中不显示，在发布网站之前需用具体图象替换它，在属性检查器中（源文件）完成替换更新。一旦插入在html代码中自动产生一个包含属性的图象标签src和替换文本标签（alt）。,src表示要插入图像的文件名，必须包含绝对路径或相对路径，图像可以是GIF文件、JPEG文件或PNG文件。alt表示图像的简单文本说明，用于不能显示图像的浏览器或浏览器能显示图像但显示时间过长时先显示，以帮助访问者了解图像的信息。具体操作步骤：单击“插入-图像对象

15、图像占位符”命令/常用插栏的插入图像图像占位符 按钮。在名称框中给占位符取名的命名规则：字母开头，只能包含字母和数字，不能使用空格和ASCII字符。,3.创建鼠标经过图象（轮换图像）：只能在浏览器中查看（在文档窗口中不能查看效果）并使用鼠标指针移过它时发生变化的图像，由主图像（即页面首次装载时所显示出的图像）和翻转图像（当鼠标指针掠过时所显示的图像）组成，二者大小要一样。一旦插入在html代码中自动产onmouseover/out事件。4.在dw中图像的编辑功能仅适用于GIF 和JPEG 图像格式。在属性检面板中编辑图像在其中可设置图像的属性参数（宽、高、替代）、对齐图像（左、右、居中对齐）、

16、边距、边框、改变图像的尺寸（也可直接拖动调整控制点）、裁剪图像、调整其对比度、锐化图像。,上述设置也可通过菜单实现：修改-图像用fireworks优化图像：要方便地完成相关的处理工作，则需要图形图像处理软件的协助。具体操作：修改图像-在fireworks优化图像。在页面中合理地使用图形图像已经成为网页制作的一个基本要求。但是并非所有图形图像都可以直接用在网页中，大多数情况下，需要对原始图像素材进行一些处理，例如图像优化、添加特效等，然后再在网页中使用。,为图像添加热点 热点即图像上不可见的区域，该区域分配了一个超链接。为图像添加热点就是在图像上划分区域，从而设定图像上制作超链接的范围。使用图像

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

18、网页通常可以支持的图像格式有_。AGIF BBMP CAVI DPSD EPNG FJPEG。,3简答题（1）网页中常用的图像格式有哪些？各有什么特点？如果在网页中添加动画格式的浮动广告，采用何种格式？为什么？电子相册，应该用哪种格式最好？(2)如何创建鼠标变换图像和图像热点？4操作题：搜集自己的喜爱的图片，制作一个电子相册。,上机练习练习1 美化文字格式制作一个文字网页，效果如图1-80所示。请按照图中的提示信息进行制作。,图1-80 美化文字格式,练习2 图文并茂 制作一个图文并茂的网页，效果如图1-81所示。注意这里要应用图像属性中的左对齐和右对齐项设置图文并茂的网页效果。,图1-81

19、图文并茂,.网页多媒体的运用（参阅教材第四章）本节内容和目标 1.了解网页多媒体的文件类型（难点）2.了解多媒体属性的设置（重点）3.对媒体对象使用参数和行为（重点）,在网页中使用视频和flash格式 一个优秀的网站应该不仅仅是由文字和图片组成的，而是动态的、多媒体。为了增强网页的表现力，丰富文档的显示效果，需用向网页中插入Flash动画、Shockwave动画、QuickTime 影片文件、Java小程序、mp3音频播放插件等多媒体内容。1.网页中可用的视频文件格式有：DAT、AVI、RM、WMV、MPEG格式、ASF、RMVB和flash等，通过“插入媒体插件”完成这些视频文件的插入，插入

20、后设置hidden为false即可。经常使用的视频文件有RM、MPEG和flash等。,2.常见的flash文件格式：flash（.fla格式）:是flash软件中创建的各种项目的源文件。只能在flash中打开,输出成SWF或SWT文件，才能在浏览器中使用。flash影片文件（.swf格式）：是经过压缩和优化了的.fla格式文件，可在浏览器中播放。flash模板文件（swt格式）可以让用户修改和替换swf 文件中的信息，使用在 flash按钮中，用户可以使用自己的文字或链接修改模板，来创建字定义的swf 文件并使用。使用flash按钮和文本：这两种对象所创建的文件格式也是.swf，经过优化的文

21、件的压缩版本可在浏览器和dw中播放预览，也可在dw中编辑。,flash动画：Flash动画以小巧、动感、富有交互性而风靡网络。在制作网页时，将Flash动画应用到网页中，能使网页更具动感，更富有感染力。在网页设计中的使用非常普遍。flash视频文件（.flv格式）：Flash视频是Macromedia推出的视频格式，是一种有经过编码的音频和视频数据、适用于网络应用的媒体格式，播放品质高，同时文件的体积比较小，通过flash player传送。Flash视频文件的扩展名为.FLV。,flash元素文件（.swc格式）：是一种特殊类型的flash文件，通过将此类文件合并到网页，可以创建丰富的int

22、ernet应用程序；有可自定义的参数。flashpaper文件：是经过转换软件Flash Paper转换后的文件，该软件允许把任何的可打印的文档直接转换成Flash文档或PDF文档，并且保持原来的文件的排版格式。转换后的文件也可以直接插入到网页中，在网页中可以直接阅读、搜索或打印。总结：Flash格式虽多，但在网页中用得较多的还是.swf格式。,3.各种格式flash的插入和属性设置（1）插入和编辑flash动画、flash影片和 flash模板。方法有菜单法或按钮法：插入媒体flash设置参数（autoplay、loop、volume）参数设置：Flash动画控制参数的设计稍微有点难度，不能

23、在【属性】面板中直接设置，需要打开【参数】对话框进行设置。设置参数为menu，值为false，作用是让浏览器不显示flash的控制菜单。,使Flash的背景变为透明。单击属性面板中的“参数”按钮，打开“参数”对话框，设置参数为wmode，值为transparent，这样在任何背景下，Flash动画都能实现透明背景的显示；若其值为 Window用来在网页上用影片自己的矩形窗口来播放应用程序，表明flash应用程序与html的层没有任何交互，并始终位于最顶层；若值为opaque使应用程序隐藏页面上位于它后面的所有显示内容。,(2)使用flash按钮（基于flash 模板的可更新按钮）：插入媒体fl

24、ash按钮 创建、插入、设置各选项 修改 播放预览。在“插入Flash按钮”对话框中“样式”用来选择按钮的外观，“按钮文本”用来输入按钮上的文字，“字体”和“大小”用于设置按钮上文字的字体和大小，字号变大，按钮并不会跟着改变。,注意：确认flash 按钮和html文件放在同一个文件夹下，浏览器可以辨认文档相对连接，保存在同一文件夹下可以保证这些链接工作正常。因为浏览器不能在flash影片中识别站点根目录相对路径。,插入 Flash 按钮,Flash 按钮可根据鼠标指针位置和状态的不同，显示不同的图像，并且会在鼠标单击时执行超链接跳转的动作。定位插入点，在“插入”栏的“媒体”面板中单击“Flas

25、h 按钮”按钮，打开“插入 Flash 按钮”对话框。,插入flash按钮效果,(3)使用flash文本 用Flash文本制作导航栏目 插入媒体flash文本设置参（autoplay、loop、volume）,确认flash文本和html文件放在同一个文件夹下，浏览器可以辨认文档相对连接，保存在同一文件夹下可以保证这些链接工作正常。,flash文本效果,(4)插入flashpaper文件 在浏览器中打开包含FlashPaper文档的页面时，浏览者能够浏览FlashPaper文档中的所有页面，而无需加载新的Web页。也可以搜索、打印和缩放该文档。选择“插入”“媒体”“FlashPaper”。在“

26、插入FlashPaper”对话框中，输入宽度和高度（以像素为单位）指定FlashPaper对象在网页上的尺寸，FlashPaper将缩放文档以适合宽度。单击“确定”在页面中插入文档。由于FlashPaper文档是Flash对象，因此页面上将出现一个Flash占位符。如果需要，在属性检查器中设置其他属性。,(5)使用flash元素（图像查看器）：插入、编辑 可以用来查看图像，但图需要在flash元素属性的imgURLS中设置各个图像路径。具体设置看下页。通过该法可以用来制作电子相册,(6)在网页中使用shockwave动画/影片 插入媒体shockwave（选择*.dcr 或shockwave小

27、游戏）shockwave是专门的Flash动画升级插件 播放shockwave动画需要安装shockwave player插件,(7)使用flash视频（.Flv，仅8.0 能实现）在使用插入前，必须有一个经过编码生成的视频（.flv）文件。主要有以下2种视频形式 a累进式下载视频：先下载到浏览者的电脑上，再进行播放 b流视频：经过很短的时间缓冲后在网页上播放。插入媒体flash视频,4.控制flash动画 在属性检查其中分别给插入到网页中的flash动画命名，如图命名为main。,在网页中添加文字“播放”和“停止”或类似的按钮，分别加上空链接（#），然后添加行为“控制shockwave或fl

28、ash”，在弹出的对话框中选择要进行控制的flash名即可实现。,在网页中使用音频添加音频能极好地吸引读者,烘托良好的艺术氛围,但是添加音乐后,会让网页文件变大,增加网页下载的时间,所以在添加音乐时,需要考虑声音文件的大小、声音品质和在不同浏览器中的差异,适时适度的增加。1.在网页中添加音频文件的2种方式：链接到音频文件：主要使用超级链接实现，提供音乐下载或在线播放，但在线打开播放时需要读者安装好相应的播放器。嵌入声音文件：可以设置网页的背景音乐,也可以提供音乐在线播放。但在线播放时，需要浏览器安装相应的插件，可以显示其外观及进行相应的播放、暂停和音量控制。本章着重讲解嵌入声音文件。,2.网页

29、中添加背景音乐的文件格式有:mid、wmv、mp3、wav等。mid/midi格式：音质好、文件小、反应快、可重复播放、被多数浏览器支持，是网页中默认的背景音乐格式，也是设计者的首选。但录制要求较高，且依赖于声卡，多用于器乐。MP3压缩率最高、音质最好。WMV：wav和aif（aiff）文件：二者相似：音质好、被多数浏览器支持，录制。,3.嵌入声音文件的几种方式和操作思路 方法1：插入媒体插件将鼠标定位到需要插入音频文件的位置，执行插入媒体插件-选择一个音频文件设置（hidden、loop、autoatart等）参数。如果访问者安装有能播放相应格式文件的插件（例如 RealMedia 或 Qu

30、ickTime 插件），那么可以通过嵌入的方式将声音与视频直接插入页面中，从而获得更多对媒体的控制（例如，可选择是否播放和设置音量。,插件的位置和播放效果如图所示：,方法2：下载安装sound.mxp插件，然后选择常用插入栏上安装的小喇叭按钮，即打开下面对话框，完成设置即可。Forever：设置无限循环播放 Never：不循环播放，即只播放一次 NO of times：设置播放的次数 点击“Browser”按钮选择好声音文件。使用这种方法插入的音乐文件，其相关属性值都为“true”,可以实现“自动循环播放效果”。,方法3：在HTML语言中，通过这个标记可以嵌入多种格式的音乐文件。这是最基本的方

31、法，也是最常用的方法，支持现在大多的主流音乐格式，如WAV、MID、MP3、WMA、WMV、DAT等。具体操作是：切换到DW的“代码”视图，将光标定位到 之前的位置，在光标的位置写下下面这段代码：，可以实现音乐循环播放。方法4：使用标签可添加的音乐格式有：RM、WAV、WMV、MP3、WMA、MID等。使用这种方法设置的背景音乐，只要不将窗口关闭，它会一直播放。,学习更多插入背景音乐的方法，请参看word文档中插入背景音乐详解 插入的视频和背景音乐，若能正常播放，不但取决于插入的方式，还取决于pc机中安装的播放器，以及这些多媒体文件和当前网页的位置关系（不在同一个文件夹也不能保证正常播放）。,

32、本节习题：1网页中常用的视频文件、flash文件和声音文件分别有哪些？各有什么特点？2如何插入flash,flash元素,flash 按钮,flash文本？3课后所有习题。,练习1 插入Flash并使动画背景透明,配套光盘上提供了一个Flash动画文件（samplespart4trans.swf），这是一个白色背景的文字动画。要求制作一个网页，设置网页背景为蓝色，将这个Flash动画插入到网页中，并设置这个Flash动画的背景透明，这样可以和网页背景融合在一起。效果如图所示。,练习2 Flash导航条,利用在Dreamweaver中直接制作Flash按钮的功能，制作一个动感的Flash导航条，效果如图所示。,练习3 循环播放的网页背景音乐,利用在Dreamweaver中插入插件的功能，制作一个网页，使这个网页具备循环播放背景音乐的功能。本章到处结束，谢谢合作！预习内容：第三章 网页中的表格,