(精品)4 编辑文档.ppt

《(精品)4 编辑文档.ppt》由会员分享，可在线阅读，更多相关《(精品)4 编辑文档.ppt（83页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、通过本章学习，应该掌握以下内容：通过本章学习，应该掌握以下内容：1.文本的处理文本的处理2.图片的处理图片的处理3.超链接的处理超链接的处理4.（都需要即会（都需要即会HTML又会又会dw）第第3章章 编辑文档编辑文档 3.1处理文本处理文本3.1.1网页基本标签网页基本标签（1）HTML标记符标记符 这这两两个个标标记记符符是是HTML文文档档的的标标记记符符。处处于于文文档档的的最最前前端端，表表示示文文档档的的开开始始，即即浏浏览览器器从从开开始始解解释释。而而则则位位于于文文件件的的最最后后一一行行，这这样的结果表示这一整份的文档都是样的结果表示这一整份的文档都是HTML语法的文档。语

2、法的文档。（2）HEAD标记符标记符 是是HTML文文件件头头标标记记符符，用用来来描描述述HTML首首部部的的内内容容，说说明明文文档档的的整整体体信信息息。所所有有首首部部信信息息并并不不会会出出现现在在利利用用WWW浏浏览览器器所所看看到到的的窗窗体体中中。通通常与某些标记符一起使用，如常与某些标记符一起使用，如标记符。标记符。（3）TITLE标记符标记符 指指的的是是一一份份文文档档的的标标题题。通通常常来来说说，每每一一份份文文档档都都应应该该有有一一个个标标题题来来简简述述这这一一份份文文档档的的特特色色或或是是主主题题。对对于于WWWWWW浏浏览览器器而而言言，标标题题所所在在的

3、的位位置置虽虽然然依依照照浏浏览览器器的的不不同同而而不不同同，但但是是大大部部分分都都位位于于浏浏览览器的最上方。器的最上方。（4）BODY标记标记符符 指指的的是是定定义义出出一一个个HTMLHTML文文档档的的体体部部，位位于于首首部部下下面面。在在标标记记符符内内的的文文字字，所所有有使使用用标标记记符符的的地地方方都都可可以以经经浏浏览览器器正正确确地地显显示示在在浏浏览览器器窗窗体中。体中。也是一个建议选项也是一个建议选项 。headhead区是指首页区是指首页HTMLHTML代码的代码的和和之间的内容。之间的内容。1.1.公司版权注释公司版权注释 !-2.2.网页显示字符集网页显

4、示字符集 简体中文：简体中文：META=gb2312 繁体中文：繁体中文：META=BIG5 英英语：语：META=iso-8859-1 3.3.网页制作者信息网页制作者信息 META 4.4.网站简介网站简介 META 5.5.搜索关键字搜索关键字 META,6.6.网页的网页的csscss规范规范 LINK 7.7.网页标题网页标题 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 3.1.2 标题处理标题处理 在在HTML中中，用用户户可可以以通通过过Hn标标记记符符来来标标识识文文档档中中的的标标题题和和副副标标题题，其其中中n是是1到到6的的数数字字。表表示示

5、最最大大的的标标题题，表表示示最最小小的的标标题题。使使用用标标题题样样式时，必须使用结束标记符。式时，必须使用结束标记符。标题文字标记符的格式：标题文字标记符的格式：标题文字标题文字属属性性align用用来来设设置置标标题题在在页页面面中中的的对对齐齐方方式式：left（左对齐）、左对齐）、center（居中）或居中）或right（右对齐）。右对齐）。3.1.3 段落处理段落处理 在在HTML中中段段落落处处理理是是通通过过段段落落标标记记来来完完成成的的，常常用用的的段段落落标标记记符符有有：注注释释标标记记符符、强强制制换换行行标标记记符、强制换段标记符、分区显示标记符和水平线等。符、强

6、制换段标记符、分区显示标记符和水平线等。HTML的注释标记符的格式为：的注释标记符的格式为：注注释释并并不不局局限限于于一一行行，长长度度不不受受限限制制。结结束束标标记记符符不不必必与与开开始始标标记记符符在在同同一一行行。注注释释的的内内容容不不在在浏浏览器中显示。览器中显示。1注释标记符注释标记符 注释的作用 适当地在程序中加入注释可以增强程序的可读性，以方便维护人员的维护。即便是对于程序编写人员本人，注释对调试程序和编写程序亦可起到很好的帮助作用。程序员在程序中书写注释是一种良好的习惯，在平时学习和实践时要注意培养这种良好的素养。1 1、表示版本、日期、表示版本、日期2 2、描述编程思

7、路、描述编程思路3 3、对变量、函数、标签加以说明、对变量、函数、标签加以说明 2强制换行标记符强制换行标记符 强强制制换换行行标标记记符符为为，放放在在一一行行的的末末尾尾，可可以以使使后后面面的的文文字字、图图片片、表表格格等等显显示示于于下下一一行行，而而又又不不会在行与行之间留下空行，即强制文本换行。会在行与行之间留下空行，即强制文本换行。强制换行标记符的格式为：强制换行标记符的格式为：文字文字 浏浏览览器器解解释释时时，从从该该处处换换行行。换换行行标标记记符符单单独独使使用用，可使页面清晰、整齐。可使页面清晰、整齐。3强制换段标记符强制换段标记符 强制换段标记符的格式为：强制换段标

8、记符的格式为：文字文字 标标记记不不但但能能使使后后面面的的文文字字换换到到下下一一行行，还还可可以以使两段之间多一空行。使两段之间多一空行。设置段落标记符的格式为：设置段落标记符的格式为：P align=文字文字 /P其其中中属属性性alignalign用用来来设设置置段段落落的的对对齐齐方方式式，可可以以为为leftleft、centercenter或或rightright，分分别别表表示示居居左左、居居中中、居居右。默认方式为右。默认方式为leftleft。4显示预排格式标记符显示预排格式标记符如如果果希希望望在在浏浏览览网网页页时时仍仍保保留留在在编编辑辑工工具具中中已已经经排排好好的

9、的段段落落格格式式，可可以以使使用用标标记记符符将将预预先先排排好好的格式保留下来。的格式保留下来。显示预排格式标记符的格式为：显示预排格式标记符的格式为：预先排好的格式预先排好的格式 在在预预排排格格式式中中，仍仍可可以以用用HTMLHTML语语言言对对文文字字的的格格式式进行设置，如文字的颜色、大小等。进行设置，如文字的颜色、大小等。5水平线水平线 在在页页面面中中插插入入一一条条水水平平标标尺尺线线，可可以以使使不不同同功功能的文字分隔开，看起来整齐、明了。能的文字分隔开，看起来整齐、明了。水平线标记符的格式为：水平线标记符的格式为：HR 在在网网页页中中为为了了增增强强页页面面的的层层

10、次次，其其中中的的文文字字可可以以用用不不同同的的大大小小、字字体体、字字型型和和颜颜色色，通通常常用用FONTFONT标记符来完成。标记符来完成。FONTFONT标记符设置格式为：标记符设置格式为：FONT 被设置的文字被设置的文字 3.1.4 文本格式处理文本格式处理 1文字设置文字设置 （1）size属性属性 sizesize属属性性是是字字号号属属性性，用用于于控控制制文文字字的的大大小小，它它的的取取值值既既可可以以是是绝绝对对值值，也也可可以以是是相相对对值值。使使用用绝绝对对数数值值时时，字字号号属属性性的的值值可可以以从从1 1到到7 7（3 3是是默默认认值值），值值越越大大

11、，显显示示的的文文字字越越大大。使使用用相相对对数数值值时时，可可以以用用“”或或“”来来指指定定相相对对于于当当前前默默认认值值的的字号，例如字号，例如+1+1表示比当前默认字号大表示比当前默认字号大1 1号。号。（2）face属性属性 face属属性性是是字字体体标标记记符符，用用来来指指定定字字体体样样式式。字字体体样样式式也也就就是是通通常常所所说说的的“字字体体”。例例如如，常常用用的的英英文文字字体体有有“TimesNewRoman”、“Arial”等等；常用的中文字体有常用的中文字体有“宋体宋体”、“楷体楷体”等。等。（3）color属性属性 FONT标标记记符符的的color属

12、属性性可可用用来来控控制制文文字字的的颜颜色，属性值可以是颜色名称或十六进制值。色，属性值可以是颜色名称或十六进制值。2格式处理格式处理 HTML中的格式标记符有：中的格式标记符有：这些标记符都是在这些标记符都是在标记符中的。标记符中的。无序列表 面包 咖啡豆 牛奶 黄油有序列表 准备好原料 将原料混合在一起 将混合好的原料放入烘烤盘 在烤箱中烘烤1小时 从烤箱中取出 放置10分钟 端上餐桌定义列表 术语 术语的定义 术语 术语的定义 术语 术语的定义 （1）设置页面背景颜色）设置页面背景颜色 在在标标记记符符中中使使用用bgcolorbgcolor属属性性可可以以为为网网页设置背景颜色，有页

13、设置背景颜色，有1616种标准颜色可供选择。种标准颜色可供选择。（2）设置页面背景图像）设置页面背景图像单单纯纯使使用用一一种种颜颜色色作作为为背背景景显显然然有有些些单单调调，网网页页设设计计者者也也可可选选择择特特定定图图案案作作为为页页面面的的背背景景，使使用用BODYBODY标记符的标记符的backgroundbackground属性即可。属性即可。HTMLHTML语句为：语句为：BODY background=3设置页面属性设置页面属性 （3）设置文字和超链接的颜色）设置文字和超链接的颜色 在在设设置置了了背背景景图图案案或或背背景景颜颜色色后后，常常常常需需要要更更改改正正文文字字

14、符符和和超超链链接接的的颜颜色色，以以便便与与背背景景相相适适应应。设设置置正正文文和和超超链链接接颜颜色色时时，可可以以使使用用BODY标标记记符符的的text、link、vlink和和alink属属性性。其其中中，text属属性性用用于于设设置置正正文文的的颜颜色色；link属属性性用用于于设设置置未未被被访访问问的的超超链链接接的的颜颜色色；vlink用用于于设设置置已已被被访访问问过过的的超超链链接接的的颜颜色色；alink用用于于设设置置活活动动超超链链接接（即即当当前前选选定定的的超链接）的颜色。超链接）的颜色。（1 1）自自动动换换行行：在在输输入入文文字字时时，若若某某一一行行

15、的的长长度度超超过过了了DreamweaverDreamweaver MXMX窗窗口口的的显显示示范范围围，文文字字将将自自动动换换到到下下一行。一行。（2 2）利利用用“EnterEnter”换换行行：在在输输入入文文字字后后按按“EnterEnter”键，文字成段，且上下段之间空一行。键，文字成段，且上下段之间空一行。（3 3）利利用用“Shift+EnterShift+Enter”键键换换行行：如如果果想想要要将将文文字字手手动动 换换 行行，中中 间间 又又 不不 能能 出出 现现 空空 白白 行行，可可 以以 按按“Shift+EnterShift+Enter”键。键。3.1.5 利

16、用利用Dreamweaver MX处理网页文本处理网页文本 一一、输入文本、输入文本 1换行换行 有有时时为为了了内内容容的的需需要要，要要在在网网页页中中插插入入一一些些键键盘盘上上没没有有的的特特殊殊字字符符，在在DreamweaverDreamweaver MXMX中中，这这些些特特殊殊字字符符不不仅仅可可以以通通过过“插插入入”“HTML”“HTML”菜菜单单下下的的“特特殊殊字字符符”命命令令来来插插入入，还还可可以以通通过过插插入入“字字符符”面面板来直接插入。板来直接插入。2插入特殊的字符插入特殊的字符 DreamweaverDreamweaver MXMX中中，在在文文本本开开

17、始始处处按按空空格格键键是是不不会会输输入入空空格格的的，在在文文字字之之间间按按空空格格键键可可以以输输入入半半个个空空格格。如如果果要要在在网网页页中中输输入入空空格格，可可以以采采用用如如下下三三种种方方法：法：（1 1）按按住住“Ctrl+ShiftCtrl+Shift”键键，按按一一次次空空格格键键，键键入半个空格。入半个空格。（2 2）将将输输入入法法由由半半角角状状态态切切换换到到在在全全角角状状态态，按按一次空格键，键入一个空格。一次空格键，键入一个空格。（3 3）将将编编辑辑窗窗口口切切换换到到代代码码视视图图，在在要要输输入入空空格格的地方输入代码的地方输入代码 n

18、bsp;，产生半个空格。，产生半个空格。3输入空格输入空格在在网网页页中中加加入入适适当当的的注注释释文文字字，可可以以为为日日后后修修改改、管管理理网网页页提提供供方方便便。由由于于批批注注只只有有在在编编辑辑网网页页时时或或查查看看原原代代码码时时才才能能看看到到，所所以以不不必必担担心心批批注注文文字字会会破破坏坏版面。版面。将将光光标标移移到到想想要要插插入入的的注注释释地地方方，然然后后在在插插入入“常常用用”面面板板中中单单击击“注注释释”按按钮钮，或或选选择择“插插入入”|“|“文文本本对对象象”|“|“注注释释”命命令令，弹弹出出“注注释释”对对话话框，再单击框，再单击“确定确

19、定”按钮即可。按钮即可。4加入注释文字加入注释文字5插入水平线插入水平线在页面中插入水平线的方法如下：在页面中插入水平线的方法如下：首首先先确确定定插插入入水水平平线线的的位位置置，然然后后单单击击插插入入面面板板上上“常常用用”选选项项卡卡中中的的按按钮钮，或或选选择择“插插入入”|“水平线水平线”菜单命令，则可在页面中插入了一条水平线。菜单命令，则可在页面中插入了一条水平线。选选中中水水平平线线，打打开开水水平平线线属属性性面面板板，可可以以设设置置水水平线的属性。平线的属性。如如果果要要在在文文档档中中查查找找或或替替找找某某个个文文字字，可可利利用用DreamweaverMX提提供供的

20、的查查找找和和替替换换功功能能。选选择择“编编辑辑”|“查查找找和和替替换换”命命令令，打打开开“查查找找和和替替换换”对话框。在该对话框中进行查找和替换操作。对话框。在该对话框中进行查找和替换操作。二、二、查找查找/替换文本的内容替换文本的内容 在在DreamweaverMX中中设设置置文文本本格格式式可可以以通通过过属属性性面面板板，类类似似于于MicrosoftWord中中对对文文本本的的属属性性设设置置，包包括括段段落落的的格格式式、字字体体、字字号号、字字的的颜颜色色、字字体体加加粗粗/倾倾斜斜、对对齐齐方方式式（左左对对齐齐/居居中中/右右对对齐齐）、文字所链接的路径或、文字所链接

21、的路径或URL等。等。三、三、设置文本格式设置文本格式 在在创创建建文文档档前前或或创创建建文文档档后后，还还需需要要对对页页面面的的属属性性进进行行必必要要设设置置，设设定定一一些些影影响响整整个个网网页页的的参参数数。设设置置页页面面属属性性时时，选选择择“修修改改”|“|“页页面面属属性性”命命令令，出出现现“页页面面属属性性”对对话话框框中中进进行行页页面属性的设置。面属性的设置。四、四、设置页面的属性设置页面的属性 实战实战将将word中的内容放到网页上中的内容放到网页上（有表格等）（有表格等）l直接复制、然后调整l利用word生成html文件l生成flashMacromedia F

22、lash Paper通过本节学习，应该掌握以下内容：通过本节学习，应该掌握以下内容：3.2 网页图像的处理网页图像的处理 1.能够选择合适的网页颜色能够选择合适的网页颜色2.了解网页图像的基本格式了解网页图像的基本格式3.掌握使用网页图像的要点掌握使用网页图像的要点4.在网页中插入图像的方法在网页中插入图像的方法5.图像属性的设置图像属性的设置6.调整图像的大小及位置调整图像的大小及位置3.2.1 网页中的颜色网页中的颜色 在在网网页页中中是是以以RGB方方式式来来表表示示颜颜色色的的，RGB颜颜色色包包括括几几百百万万种种之之多多，这这么么多多的的颜颜色色却却有有一一个个共共同同点点，都都是

23、是由由红红、绿绿、蓝蓝这这三三种种基基色色调调混混和和而而成成的的，RGB其其实就是实就是Red、Green、Blue的缩写。的缩写。这这三三种种基基色色中中每每一一种种颜颜色色的的饱饱和和度度和和透透明明度度都都是是可可以以变变化化的的，用用0（表表示示最最弱弱）255（表表示示最最强强）的的数数值值来来表表示示。例例如如纯纯红红色色表表示示为为：Red100%、Green0%、Blue0%，简简单单的的表表示示法法为为（255，0，0），用用十六进制数来表示的话就变成了十六进制数来表示的话就变成了“FF0000”。在网页中运用色彩一般应遵循下列几个原则在网页中运用色彩一般应遵循下列几个原则

24、:（1 1）一一个个页页面面中中切切忌忌采采用用过过多多的的颜颜色色，否否则则会会给给人人一一种种繁繁杂杂的的感感觉觉，也也烘烘托托不不了了网网页页的的主主题题，因因此此一一种种风风格的网页选用颜色一般不要超过三四种。格的网页选用颜色一般不要超过三四种。（2 2）背背景景的的颜颜色色不不要要太太深深，显显得得过过于于厚厚重重，因因为为这这样样会影响整个页面的显示效果。会影响整个页面的显示效果。（3 3）要保持整个站点的色调统一。）要保持整个站点的色调统一。（4 4）要要围围绕绕网网页页的的主主题题选选择择颜颜色色，色色彩彩要要能能烘烘托托出出主主题。题。3.2.2 图像格式图像格式 GIFGI

25、F格格式式（Graphics Graphics Interchange Interchange Format Format 图图像像交交换换格格式式）采采用用无无损损压压缩缩（所所谓谓无无损损压压缩缩是是指指在在压压缩缩过过程程中中图图像像的的质质量量不不会会丢丢失失）算算法法进进行行图图像像的的压压缩缩处处理理，是是目目前前在在网网页页设设计计中中使使用用最最普普遍遍、最最广广泛的一种图像格式。泛的一种图像格式。GIF格格式式可可以以高高度度压压缩缩图图像像;GIF格格式式支支持持图图像像游游离离在在背背景景之之上上的的视视觉觉效效果果;GIFGIF格格式式的的图图像像可可以以被被交交错错下

26、下载载;可可以以将将很很多多幅幅图图像像结结合合在在一一个个GIF文文件中。件中。1GIF格式格式2JPEG格式格式 JPEG格格式式（JointPhotoExpertGraphics，联联合合图图形形专专家家组组图图片片格格式式）是是另另一一种种在在Web上上应应用用广广泛泛的的图图像像格格式式。由由于于它它支支持持的的颜颜色色数数几几乎乎没没有有限限制制，因因此此适适用用于于使使用用真真彩彩色色或或平平滑滑过过渡渡色色的的照照片片和和图图片片。与与GIF格格式式采采用用无无损损压压缩缩不不同同，JPEG格格式式使使用用有有损损压压缩缩来来减减小小图图片片文文件件的的大大小小，因因此此用用户

27、户将将看看到到随随着着文文件件的减小，图片的质量也降低了。的减小，图片的质量也降低了。JPEG格式图像的优点：格式图像的优点：摄影作品或写实作品支持高级压缩。摄影作品或写实作品支持高级压缩。利用可变的压缩比可以控制文件大小。利用可变的压缩比可以控制文件大小。支持交错（对于渐近式支持交错（对于渐近式JPEG文件）。文件）。广泛支持广泛支持Internet标准。标准。1.有损压缩使之不适合表达高清晰度的图像：有损压缩使之不适合表达高清晰度的图像：2.最最高高只只能能以以256色色显显示示的的用用户户，可可能能无无法法观观看看JPEG图像；图像；3.当当图图像像中中包包含含fine字字体体时时应应避

28、避免免用用JPEG格格式式，在在该该字字体体与与纯纯颜颜色色重重叠叠的的地地方方，JPEG压压缩缩作作品品看看上上去只是一种外观近似。去只是一种外观近似。4.采采用用JPEG格格式式对对图图像像进进行行压压缩缩后后，不不能能再再重重新新打打开图像。开图像。5.JPEG格式不支持透明色，也没有动画的概念。格式不支持透明色，也没有动画的概念。JPEG格式图像的缺点：格式图像的缺点：PNG格格式式（PortableNetworksGraphics，可可移移植植的的网网络络图图形形格格式式）是是近近年年来来新新出出现现的的一一种种图图像像格格式式，它它适适于于任任何何类类型型、任任何何颜颜色色深深度度

29、的的图图片片。该该格格式式用用无无损损压压缩缩来来减减小小图图片片文文件件的的大大小小，同同时时保保留留图图片片中中的的透透明明区区域域。此此外外，该该格格式式是是仅仅有有的的几几种种支支持持透透明明度度概概念念的的图图片片格格式式之之一一（透透明明GIF的的透透明明度度只能是只能是50%，但，但PNG格式可以是格式可以是0%50%）。）。3PNG格式格式 GIF、JPEG、PNG这这几几种种格格式式都都是是标标准准的的位位图图格格式式，但但现现在在Web上上还还可可以以使使用用新新的的矢矢量量格格式式。所所谓谓位位图图格格式式就就是是指指用用图图片片上上每每一一点点的的信信息息来来描描述述图

30、图像像，而而矢矢量量格格式式则则是是用用线线条条和和填填充充色色等等数数学学信信息息来来描描述述图图像像。相相比比而而言言，矢矢量量格格式式的的文文件件要要比比位位图图格式的文件小得多，但表现力丝毫不逊色。格式的文件小得多，但表现力丝毫不逊色。除除了了表表现现一一般般的的静静态态画画面面以以外外，动动画画是是矢矢量量格式具有巨大优势的另一个领域。格式具有巨大优势的另一个领域。4矢量格式矢量格式 优点优点（1）文件小；（2）图像元素对象可编辑；（3）图像放大或缩小不影响图像的分辨率；（4）图像的分辨率不依赖于输出设备；缺点缺点（1）重画图像困难；（2）逼真度低，要画出自然度高的图像需要很多的技巧

31、。在在Web页页上上显显示示图图片片之之前前，通通常常需需要要考考虑虑下列三个问题：下列三个问题：确保文件较小；确保文件较小；1）使图像具有所需的像素大小）使图像具有所需的像素大小2）采用正确的格式进行优化处理）采用正确的格式进行优化处理控制图像的数量和质量；控制图像的数量和质量；合理使用动画。合理使用动画。3.2.3 使用网页图像的要点使用网页图像的要点 在在Dreamweaver中中插插入入图图像像非非常常简简单单，具具体体操操作作步骤如下：步骤如下：（1）打开网页，将光标移到将要插入图像的位置。）打开网页，将光标移到将要插入图像的位置。（2）用用下下列列3种种方方法法中中的的任任意意一一

32、种种方方法法，打打开开“选选择择图像源图像源”对话框。对话框。在插入在插入“常用常用”面板中，单击插入图像按钮。面板中，单击插入图像按钮。直直接接拖拖曳曳插插入入“常常用用”面面板板中中的的插插入入图图像像按按钮钮至至页页面的光标处。面的光标处。选选择择DreamweaverMX主主菜菜单单中中的的“插插入入”|“图图像像”命令。命令。3.2.4 在网页中插入图像在网页中插入图像1插入图像插入图像（3）在在对对话话框框中中选选择择查查找找图图像像文文件件的的路路径径，选选中中“预预览览图图像像”复复选选框框，选选定定图图像像的的预预览览图图就就显显示示在在对对话话框的右侧。框的右侧。（4）如如

33、果果文文件件存存放放在在网网站站的的目目录录中中，那那么么将将“相相对对于于”下拉列表调整到下拉列表调整到“文档文档”项。项。（5）然后单击）然后单击“确认确认”按钮，图像就插入到网页中了。按钮，图像就插入到网页中了。在在文文档档中中插插入入图图像像后后，用用鼠鼠标标单单击击图图像像，图图像像四四周周出出现现可可编编辑辑的的缩缩放放手手柄柄，说说明明该该图图像像被被选选定定。这这时时属性面板中显示出关于图像的属性信息。属性面板中显示出关于图像的属性信息。2图像属性参数图像属性参数图图像像属属性性面面板板的的左左上上方方有有一一个个缩缩略略图图，它它的的右右边边是是“图图像像”字字样样，“图图像

34、像”的的右右边边是是当当前前文文件件大大小小，下下方方的的空空格格可可以以键键入入名名称称，以以便便将将来来使使用用时时好好调调用用该该文件。文件。改改变变图图像像的的尺尺寸寸大大小小，可可以以通通过过在在属属性性面面板板中中的的“宽宽”和和“高高”文文本本框框中中直直接接输输入入数数值值来来改改变变图图像像的的尺尺寸寸大大小小，当当在在网网页页中中需需要要精精确确地地定定位位元元素素时时，这这种种方方法法可可以以帮帮助助设设计计者者达达到到预预想想的的效效果果。不不过过这这种种方方法法有有一一个个弊弊端端，如如果果数数值值输输入入不不当当，可可能能造造成成图图像像在在浏浏览览器器中中无无法法

35、正正常常显显示示。此此外外，还还可可以以通通过过拖拖放放图图像像四四周的缩放边框来改变图像的尺寸。周的缩放边框来改变图像的尺寸。3改变图像的尺寸改变图像的尺寸Dreamweaver中中调调整整图图像像位位置置的的方方法法很很简简单单，简简述如下：述如下：（1）选中页面中要编辑的图像；）选中页面中要编辑的图像；（2）打打开开图图像像属属性性面面板板中中的的“对对齐齐”下下拉拉列列表表，在在列表中选择需要的选项。列表中选择需要的选项。4调整图像在网页中的相对位置调整图像在网页中的相对位置在在页页面面中中合合理理地地使使用用图图形形图图像像已已经经成成为为网网页页制制作作的的一一个个基基本本要要求求

36、。但但是是并并非非所所有有图图形形图图像像都都可可以以直直接接用用在在网网页页中中，大大多多数数情情况况下下，需需要要对对原原始始图图像像素素材材进进行行一一些些处处理理，例例如如图图像像优优化化、添添加加特特效效等等，然然后后再再在在网网页页中中使使用用。要要方方便便地地完完成成相相关关的的处处理理工工作作，则则需需要要图图形形图图像像处处理理软软件件的的协协助助。另另外外，对对于于具具备备创创作作才才能能的的网网页页制制作作者者来来说说，也也可可以以直直接接使使用用图图形形图图像像处处理理软软件创作出适合件创作出适合Web的作品。的作品。5编辑图像编辑图像在在浏浏览览网网页页时时，可可能能

37、会会遇遇到到下下列列情情况况。当当图图像像不不能被浏览器正常显示时，图像区变成了空白区域。能被浏览器正常显示时，图像区变成了空白区域。利利用用Dreamweaver中中为为图图像像加加文文字字说说明明的的功功能能，可可使使网网页页中中的的图图像像在在不不能能被被浏浏览览器器正正常常显显示示时时，以以说说明文字代替，以帮助访问者了解图像的信息。明文字代替，以帮助访问者了解图像的信息。3.2.6 在在Dreamweaver MX中巧妙地处理图像中巧妙地处理图像1给图像加文字说明给图像加文字说明2制作低分辨率图像制作低分辨率图像低低分分辨辨率率图图像像是是相相对对于于高高分分辨辨率率图图像像而而言言

38、的的，高高分分辨辨率率图图像像一一般般指指的的是是图图像像的的色色彩彩丰丰富富逼逼真真、压压缩缩比比较较小小的的图图像像，这这种种图图像像文文件件容容量量比比较较大大，浏浏览览器器要要费费很很长长时时间间来来下下载载。而而低低分分辨辨率率图图像像包包含含的的色色彩彩少少、压压缩缩比比较较大大，所所以以这这种种图图像像文文件件容容量量较较小小，能能够够较较快快地地被被浏浏览览器器下下载载。因因此此经经常常要要为为高高质质量量、大大尺尺寸寸的的图图像像制制作作一一个个副副本本，这这个个副副本本图图像像采采用用的的是是较较低低的的分分辨辨率率，从而减小了文件的大小，缩短了图像的下载时间。从而减小了文

39、件的大小，缩短了图像的下载时间。3为图像添加热点为图像添加热点热热点点即即图图像像上上不不可可见见的的区区域域，该该区区域域分分配配了了一一个个超超链链接接。为为图图像像添添加加热热点点就就是是在在图图像像上上划划分分区区域域，从从而设定图像上制作超链接的范围。而设定图像上制作超链接的范围。在在Dreamweaver中为图像添加热点的方法为：中为图像添加热点的方法为：（1）选选定定图图像像，打打开开图图像像属属性性面面板板，选选择择设设置置热热点点按按钮钮，单单击击鼠鼠标标左左键键并并拖拖动动，在在图图像像中中设设置置热热点点形形状。状。（2）在属性面板中设置热点的超链接。）在属性面板中设置热

40、点的超链接。3.3.7利用利用HTML处理图像处理图像在在HTML中中，使使用用IMG标标记记符符可可以以在在网网页页中中加加入入图图像像。它它具具有有两两个个基基本本属属性性：src和和alt，分分别别用用于设置图像文件的位置和替换文本。于设置图像文件的位置和替换文本。src表表示示要要插插入入图图像像的的文文件件名名，必必须须包包含含绝绝对对路路径径或或相相对对路路径径，图图像像可可以以是是GIF文文件件、JPEG文文件件或或PNG文文件件。alt表表示示图图像像的的简简单单文文本本说说明明，用用于于不不能能显显示示图图像像的的浏浏览览器器或或浏浏览览器器能能显显示示图图像像但但显显示时间

41、过长时先显示。示时间过长时先显示。一、一、插入图像插入图像 二、二、设置图像属性设置图像属性 在在HTMLHTML中中，使使用用IMGIMG标标记记符符的的widthwidth和和heightheight属属性性可可以以指指定定图图像像的的宽宽度度和和宽宽度度，以以告告诉诉浏浏览览器器WebWeb页页应应分分配配给给图图像像多多少少空空间间（以以像像素素为为单单位位）。当当浏浏览览器器解解释释WebWeb页页时时，在在实实际际下下载载图图像像之之前前会会给给图图像像预预留留出出空空间间，以以避避免免在在每每个个图图像像下下载载时时重重新新绘绘制制网网页页，从从而而加加快快网网页页的的下下载载速

42、速度度。widthwidth和和heightheight属属性的取值既可以是像素数，也可以是百分数。性的取值既可以是像素数，也可以是百分数。1指定图像的宽和高指定图像的宽和高2图像的边框图像的边框使使用用IMG标标记记符符的的border属属性性，可可以以给给图图像像添加边框效果，边框的取值是像素数。添加边框效果，边框的取值是像素数。3设置图像周围的空白设置图像周围的空白可可 以以 在在 IMG标标 记记 符符 内内 使使 用用 属属 性性 hspace和和vspace设设置置图图像像周周围围空空白白，其其中中hspace示示水水平平方方向向的的空空白白，vspace表表示示垂垂直直方方向向的

43、的空空白白，它它们们的的取取值值都都是是像像素素数数。通通过过指指定定图图像像周周围围的的空空白白，可可以使页面的版式更加合理。以使页面的版式更加合理。（1 1）图像在页面中的对齐）图像在页面中的对齐设设置置图图像像在在页页面面中中的的对对齐齐与与设设置置文文本本对对齐齐类类似似，可可以以使使用用DIVDIV或或P P标标记记符符将将IMGIMG标标记记符符括括起起来来，然然后后使用使用alignalign属性。属性。（2 2）图像与周围内容的垂直对齐）图像与周围内容的垂直对齐使使用用IMGIMG标标记记符符的的alignalign属属性性，可可以以控控制制图图像像与与周周围围内内容容的的垂垂

44、直直对对齐齐。此此时时，alignalign属属性性的的值值可可以以是是：toptop、middlemiddle、bottom bottom 分分别别表表示示图图像像与与周周围围内内容容的顶部、中央、底部对齐。的顶部、中央、底部对齐。4图像的对齐图像的对齐 （3 3）图文混排时的图像对齐）图文混排时的图像对齐如如果果要要在在图图像像的的左左、右右环环绕绕文文字字，也也应应该该使使用用IMGIMG标标记记符符的的alignalign属属性性，此此时时，alignalign属性的值可以是：属性的值可以是：left left 表示图像居左，文本在图像右侧；表示图像居左，文本在图像右侧；right r

45、ight 表示图像居右，文本在图像左侧。表示图像居右，文本在图像左侧。3.3 在网页中使用超链接在网页中使用超链接3.3.1利用利用DreamweaverMX处理超链接处理超链接3.3.1.1 超链接简介超链接简介 1什么是超链接什么是超链接 所所谓谓的的超超链链接接是是指指从从一一个个网网页页指指向向一一个个目目标标的的连连接接关关系系，这这个个目目标标可可以以是是另另一一个个网网页页，也也可可以以是是相相同同网网页页上上的的不不同同位位置置，还还可可以以是是一一个个图图片片、一一个个电电子子邮邮件件地地址址、一一个个文文件件，甚甚至至是是一一个个应应用用程程序序。而而在在一一个个网网页页中

46、中用用来来超超链链接接的的对对象象，可可以以是是一一段段文文本本或或者者是是一一个图片。个图片。按按照照链链接接路路径径的的不不同同，网网页页中中超超链链接接一一般般分分为为以下以下3 3种类型：种类型：1.内内部部链链接接：即即在在同同一一个个站站点点内内的的不不同同页页面面之之间间相相互互联系的超链接。联系的超链接。2.锚点链接：可以链接到网页中某个特定位置的链接。锚点链接：可以链接到网页中某个特定位置的链接。3.外外部部链链接接：把把网网页页与与InternetInternet中中的的目目标标相相联联系系的的链链接。接。4.如如果果按按照照使使用用对对象象的的不不同同，网网页页中中的的链

47、链接接又又可可以以分分为为：文文本本超超链链接接、图图像像超超链链接接、E-mail链链接接、锚点链接、多媒体文件链接、空链接等锚点链接、多媒体文件链接、空链接等合合理理安安排排超超链链接接在在网网页页的的制制作作中中是是非非常常重重要要的的。采采用用什什么么结结构构的的链链接接会会直直接接影影响响到到网网页页的的布布局局。建建议议 ：避免孤立文件的存在避免孤立文件的存在 在网页中避免使用过多的超链接在网页中避免使用过多的超链接 网页中的超链接不要超过网页中的超链接不要超过4 4层层 页面较长时可以使用书签页面较长时可以使用书签 设置主页或上一层的链接设置主页或上一层的链接 2合理安排超链接合

48、理安排超链接 3文档路径类型文档路径类型 在在一一个个网网站站中中，有有绝绝对对路路径径、和和根根目目录录相相对对路路径以及和文档相对路径径以及和文档相对路径3 3种类型的文档路径。种类型的文档路径。绝绝对对路路径径：是是包包含含服服务务器器协协议议（对对于于网网页页来来说说通常是通常是http:/http:/或或ftp:/ftp:/）的完全路径。的完全路径。和和根根目目录录相相对对的的路路径径：是是从从当当前前站站点点的的根根目目录录开开始始的的路路径径。站站点点上上所所有有可可公公开开的的文文件件都都存存放放在在站站点点的的根根目目录录下下。(例例 如如，/support/tips.htm

49、l 是是 文文 件件(tips.html)的的站站点点根根目目录录相相对对路路径径，该该文文件件位位于于站站点点根根文文件夹的件夹的support子文件夹中。子文件夹中。)和和文文档档相相对对的的路路径径：是是指指和和当当前前文文档档所所在在的的文文件件夹相对的路径。夹相对的路径。3.3.1.2 创建文本超链接创建文本超链接 1建立文本超链接建立文本超链接 在在浏浏览览网网页页时时，鼠鼠标标指指针针经经过过某某些些文文本本时时，指指针针的的形形状状发发生生变变化化，同同时时文文本本也也会会发发生生变变化化（如如出出现现下下划划线线、文文本本的的颜颜色色发发生生变变化化、字字体体发发生生变变化化

50、等等），提提示示这这是是带带链链接接的的文文本本。此此时时点点击击鼠鼠标标，就就会会打打开所链接的网页，这就是文本超链接。开所链接的网页，这就是文本超链接。在在DreamweaverDreamweaver MX MX中创建文本超链接的步骤为：中创建文本超链接的步骤为：（1）在在网网页页上上选选择择需需要要添添加加超超链链接接的的文文本本，打打开开文文本本的的属性面板。属性面板。（2）在属性面板上指定文字的链接目标。）在属性面板上指定文字的链接目标。（3）在）在“目标目标”下拉列表框中选择目标文件打开的方式。下拉列表框中选择目标文件打开的方式。设设置置结结束束后后，在在网网页页中中被被选选择择的