4.插入图像占位符图像占位符作为临时代替图像的符号，是在网页设计阶段使用的重要占位工具。读者可以随意定义其大小，并放置在预插入
图像的位置，用自定义的颜色来代替图像。在有了合适的图像后，可以通过图像占位符“属性”面板的“源文件”文本框设置实际需要的图像文件
，设置完毕后图像占位符将自动变成图像。在网页中插入图像占位符的具体操作步骤如下：（1）在文档窗口中，将插入点放置在要插入占位符
图形的位置。（2）通过以下几种方法启用“图像占位符”命令，弹出“图像占位符”对话框，效果如图3.60所示。3.1.4网页图像
4.插入图像占位符图像占位符作为临时代替图像的符号，是在网页设计阶段使用的重要占位工具。读者可以随意定义其大小，并
放置在预插入图像的位置，用自定义的颜色来代替图像。在有了合适的图像后，可以通过图像占位符“属性”面板的“源文件”文本框设置实际需
要的图像文件，设置完毕后图像占位符将自动变成图像。在网页中插入图像占位符的具体操作步骤如下：（1）在文档窗口中，将插入点放置在
要插入占位符图形的位置。（2）通过以下几种方法启用“图像占位符”命令，弹出“图像占位符”对话框，效果如图3.60所示。3.1.
4网页图像选择“插入”面板中的“常用”选项卡，单击“图像”展开式工具按钮，选择“图像占位符”选项。选
择“插入>图像对象>图像占位符”命令。在“图像占位符”对话框中，按需要设置图像占位符的大小和颜色，并未图像
占位符提供文本标签，单击“确定”按钮，文成设置，效果如图3.61所示。3.1.4网页图像图3.60图像占位符图3.61
设置图像占位符后的效果提示：在“图像占位符”弹出框中“名称”文本框中不能输入中文，可以是字符和数字的组合，但不能以数
字开头。5.给图片添加文字说明网页中的某些图像代表特定的意义，有时需要为网页中的图像添加说明性文字，就会用到图像的
alt属性来设置图像的替换文本。当鼠标放置在图像上时，就会显示指定的说明性文字。另外，使用alt属性还可以给那些不能
看到你文件中图像的浏览者提供文字说明，这包括那些使用本来就不支持图像显示或图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅
读器的用户等。当图片不能在浏览器中正常显示时，网页中图片的位置就变成空白区域，如图3.62所示。3.1.4网页图像3.1.4
网页图像图3.62图示空白为了让浏览者在不能正常显示图片时也能了解图片的信息，常为网页的图像设置alt属性。
Alt属性的设置有以下两种方法。（1）在图像代码中添加。比如：。（2）在“属性”编辑器中设置添加。如图3.63所示，属性编辑器中，右边“替换”一项，填入替换文本，可以用来设置
alt属性。3.1.4网页图像图3.63在属性编辑器中设置alt属性提示：在写替换文字前要仔细考虑，确保所写
文字确实为那些看到或看不到图像的人提供了说明信息，并且在上下文中有意义。对于那些装饰性的图片可以不用设置或者使用空的值（alt="
"，引号中间没有空格）。6.跟踪图像在工程设计过程中，一般先在图像处理软件中勾画出工程蓝图，然后再此基础上反复修改
，最终得到一幅完美的设计图。制作网页时也应采用工程设计的方法，先在图像处理软件中绘制网页的蓝图，将其添加到网页的背景中，按设计方案
对号入座，等网页制作完成后，再将蓝图删除。DreamweaverCS5利用“跟踪图像”功能来实现上述网页设计的方式。设置网页蓝
图的具体操作步骤如下。（1）在图像处理软件中绘制网页的设计蓝图，如图3.64所示。（2）选择“文件>新建”命令，新建文档。
3.1.4网页图像3.1.4网页图像图3.64网页的设计蓝图（3）选择“修改>页面属性”命令，弹出“页面属性”
对话框，在“分类”列表中选择“跟踪图像”选项，转换到“跟踪图像”对话框，如图3.65所示。单击“浏览”按钮，在弹出的“选择图像源文
件”对话框中找到步骤（1）中设计蓝图的保存路径，如图3.66所示。3.1.4网页图像图3.65“跟踪图像”对话框图3.6
6设计蓝图的保存路径（4）在“页面属性”对话框中调节“透明度”选项的滑块，使图像呈半透明状态，如图3.67所示，单击“确定”按
钮完成设置。3.1.4网页图像图3.67“透明度”选项的滑块7.鼠标经过图像鼠标经过图像是指当鼠标指针移动
到图像上时会显示预先设置好的另一副图像，当鼠标指针移开时，又会恢复为第一幅图像。在制作网页中的按钮、广告时，经常会用到这种效果，使
网页变得生动有趣。它实际上是由两幅图像组成，即原始图像和替换图像，在制作鼠标经过图像时，应保证两幅图像大小一致。设置
鼠标经过图像的具体操作步骤如下。（1）在“编辑区”中单击选中要插入图像的区域。（2）选择菜单栏“插入>图像对象>鼠标经
过图像”。3.1.4网页图像（3）在弹出的“插入鼠标经过图像”对话框中，输入图像名称，选择原始图像，再选择鼠标经过图像时显示
的图像，如果用户需要在鼠标经过图像时显示图片说明或者在点击图片时链接到其他网址，还可在“替换文本”中输入说明用的文字以及设置链接的
URL地址，单击“确定”按钮，如图3.68所示。3.1.4网页图像图3.68“插入鼠标经过图像”对话框（4）插入鼠标经过
图像后，保存文档并在浏览器中浏览。鼠标经过前图像如图3.69所示，鼠标经过后图像如图3.70所示。3.1.4网页图像图3.6
9鼠标经过前图像图3.70鼠标经过后图像由上面的操作可知，鼠标经过图像有以下两种状态。?原始状态：在网页中的
正常显示状态。?变换图像状态：当鼠标经过或者单击图像时显示变化图像。在设置鼠标经过图像时，两幅图像的尺寸大小必须是
一样的。Dreamweaver将以第1幅图像的尺寸大小作为标准，在显示第2幅图像时，将按照第1幅图像的尺寸大小来显示。如果第2幅图
像比第1幅图像大，那么将缩小显示；反之，则放大显示。为避免第2幅图像可能出现的失真现象，在制作和选择两幅图像时，尺寸应保持一致。
一般要先在图像处理软件中将两种状态的图像文件制作好，分别保存到网站的图像文件夹内，然后才能创建鼠标经过图像。当包含“鼠
标经过图像”的网页被浏览器下载时，会将这两种状态的图像一起下载。暂时不显示的图像被存放在浏览器的缓存中，当鼠标经过图像时，再从缓存
中将变化的图像调出来，这样图像的变化就没有停滞的感觉，也节省了用户的等待时间。3.1.4网页图像【项目描述】个
人网站主页大体上包括以下内容：我的圈子、我的相册、我的音乐、最新动态、项目互动和资源下载等6大模块，这六大模块部分简介如下。1.
介绍我的班级和我班级里的同学，把我班的同学加载到我的网页中并对每个人做详细的介绍，形成一个像同学录一样的页面，在这里，每个人可以尽
量书写个人的兴趣爱好。2.个人简历。首先是个人详细的自我介绍，然后加上个人的求职信和个人简历，以便企业更深的了解。3.我的相册
简介：（1）设计个人的相册（2）朋友的相册4.贴图。如果发现好的图片我收集起来可以和广大朋友共同分享。5.我的音乐简介。该模块
主要包括：国内最新的流行音乐、日韩最新的流行音乐、欧美最新的流行音乐。实践1、制作个人网站主页【项目实训】谢谢！（
2）外部链接外部链接是与其他网站的网页或者图像的链接，下面我们就来学习如何创建外部链接，具体步骤如下：（1）在页面
中选择需要插入外部链接的文本，如图3.30所示。3.1.3超链接图3.30选择链接文本
（2）在“属性”栏中的“链接”文本框中输入链接地址http://www.sxxmfc.com，如图3.31
所示。3.1.3超链接图3.31设置属性（3）完成外部链接制作
。文本Href:目标端点；target:blank浏
览器会另开一个新窗口显示;parent指向父frameset文档;_serf把文档调入当前页框;_top去掉所有页框并用do
cument.html取代frameset文档4.E-mail链接E-mail链接在网页中经常被使用到，用户点击
该链接时，默认会自动启动电脑中的OutlookExpress，用户可以在弹出的窗口中书写电子邮件，并发送到目的地址。创建E-ma
il链接的具体步骤如下：在页面中选择需要插入E-mail链接的文本，如图3.35所示。3.1.3超链接图3.35选择
要插入E-mail链接的文本在“属性”栏中的“链接”文本框中输入“
mailto：”，再输入链接的E-mail地址maolin0609@sina.com，如图3.36所示。3.1.3超链接图3
.36输入E-mail地址注：单击“插入>电子邮件链接”命令菜单，也可以插
入E-mail链接，如图3-41所示。提示：“mailto：”、“@”和“.”这3个元素在电子邮件链接中是必不可少的
。有了他们，才能构成一个正确的电子邮件链接。保存文件并按F12键在浏览器中浏览，单击电子邮件链接将打开默认的电子邮件程序，“
收件人”文本框中会自动出现已设置的E-mail，如图3.38所示。3.1.3超链接图3.37“电子邮件链接”对
话框图3.38OutlookExpress5.锚记链接
当一个网页内容较多时，用户查找信息会浪费很多时间，在这种情况下，使用锚记链接不仅可以跳转到当前网页中的指定位置，还可以跳转到
其他网页中的指定位置。创建锚记链接首先需要命名锚记，即在文档中设置标记，这些标记通常放在文档的特定主题处或顶部，然后再“属性”面板
中设置指向这些锚记的超级链接来链接到文档的特定部分。在网页中插入锚记链接的具体操作步骤如下。（1）创建锚点
在创建锚链接之前，首先要在页面相应位置创建锚点，具体步骤如下：①将光标放在页面中要插入锚点的位置，即“办理商品房认购手续”
，如图3.39所示。3.1.3超链接3.1.3超链接图3.39插入锚点的位置②单击“插入
>命名锚记”菜单，弹出“命名锚记”对话框，在“锚记名称”文本框中输入“a1”，单击“确定”按钮，如图3.40所示。
图3.40“命名标记”对话框③完成锚点创建，此时，在指定位置插入了一个锚点，出现锚点标识符号，如图3
.41所示。④用上述方法分别在“签署正式商品房买卖合同”、“付款及领取收据或发票”、“银行按揭”、“办理入伙（现房）”、
“土地房屋权证办理”、“客户投诉”、“购房指南索引”和“购房指南索引”前插入锚点，并分别将锚点命名为“a2”、“a3”、“a4
”、“a5”、“a6”、“a7”、“a0”，如图3.42所示。3.1.3超链接图3.41插入锚点
图3.42插入多个锚点（2）建立锚点链接前面我们创建了8个锚点，下面来学习为文本建立锚
点链接，具体步骤如下：①选中文本“办理商品房认购手续”，在“属性”栏中的“链接”文本框中输入“#”符号，然后输入链接的锚记名称
。输入之前的锚记名称“#a1”，表示链接到名称为“a1”的锚点，如图3.43所示。3.1.3超链接图3.43建立锚链
接②用上述方法，分别将文本“签署正式商品房买卖合同”、“付款及领取收据或发票”、“银行按揭”、“办理入伙（现房）”、“土
地房屋权证办理”、“客户投诉”、“购房指南索引”链接到锚点“a2”、“a3”、“a4”、“a5”、“a6”、“a7”、“a0”
如图3.44所示。3.1.3超链接图3.44完成多个锚链接③完成锚点链接制作，保存文件，并在浏览器预览，单击某链接，相对
应的内容就会出现在页面顶部，如图3.45所示。3.1.3超链接图3.45锚链接效果锚记的代码命名锚记（做记号）name="a1"id="a1">链接到锚记北方民族6.其他特殊链接
在网页制作过程中，除了上面介绍的几种超级链接之外，还有FTP链接、下载链接、空链接及图像地图链接等，下面分别介绍这几种链接
。（1）FTP链接FTP链接所指向的目标地址是FTP服务器的地址，在在选中插入下载链接的文本或图像的“属性”栏中的
“链接”文本框中输入FTP服务器的地址即可，如图3.46所示。通常开放出来的FTP服务器都允许匿名登录，因此，单击FTP链接，即可
访问该FTP服务器中的文件。3.1.3超链接图3.46插入FTP链接地址（2）下载链接下载链接是指链接的目
标文件不是网页地址、图片，而是zip、rar、iso、mp3、doc等类型的文件，在选中插入下载链接的文本或图像的“属性”栏中的“
链接”文本框中输入文件的全称即可，如图3.47所示。单击下载链接，将会弹出一个对话框，用户可以打开或者下载该文件，如图3.48所示
。3.1.3超链接图3.47输入下载链接地址图3.48下载链接效果（3）空链接空链接也称为无地址链接，
它没有指定的链接对象，用于向页面上的对象或者文本附加行为。建立空链接的目的通常是激活页面上的对象或文本，使其可以应用行为。空链接中
的目标URL是用“#”来表示的，在页面中选择需要插入脚本链接的文本、图片或者其他对象，在“属性”栏中的“链接”文本框中输入“#”号
即可，如图3.49所示。3.1.3超链接图3.49输入空链接符号“#”（4）图像地图链接在Dreamwea
verCS5中，除了可以给文本添加超链接，还可以给图像添加超链接。为整张图像添加超链接和文本超链接类似。下面介绍在一张图像上创建
多个链接区域，这些区域可以是矩形、圆形或者多边形，这些区域就叫热点。图像热点工具位于“属性”面板的左下方，包括矩形热点工具、椭圆形
热点工具、多边形热点工具3中形式。日常所说的图像超级链接是指将一幅图像指向一个目标的链接，而使用图像地图技术形成的图像热点超级链接
是在一幅图像中划分出几个不同的区域并分别指向不同目标的链接。下面介绍图像地图的创建方法。3.1.3超链接①在编辑页面中插入
图像，如图3.50所示。3.1.3超链接图3.50插入图像②选中图像，在“属性”栏中单击“矩形热点工具”按钮，如图3.5
1所示。3.1.3超链接图3.51“圆形热点”工具③鼠标指针变成十字状，拖动鼠标，在中国地图上的“黑龙江”文本上绘制
一个长方形，如图3.52所示。图3.52创建热点④在“链接”文本框中输入要链接的页面地址，“目标”下拉列表选择打开页面的位置
，这里选择“_blank“，如图3.53所示。3.1.3超链接图3.53“设置热点属性⑤用同样的方法，在“新疆”、“内
蒙古”插入热点，可以是矩形、多边形的，然后分别为每个热点设定链接页面，如图3.54所示。图3.54创建其他的热点⑥要编辑
图像地图，可以利用“属性”面板中的（指针热点工具）。该工具可以对已经创建好的图像地图进行移动、调整大小或层与层之间的向上向
下向左向右移动等操作。还可以将还有地图的图像从一个文档复制到其他文档或者复制图像中的一个或几个地图，然后将其粘贴到其他图像上，这样
就将与该图像关联的地图也复制到新文档中。在“属性”面板中单击（指针热点工具）按钮，并单击图像中“内蒙古”处的热
点区域使其处于选中状态，然后按住鼠标左键不放并稍微移动来调整热点区域的位置。⑦保存文件，并按F12键在浏览器中浏览，当鼠标光标移
动到热点区域上时，鼠标光标变成手形，当单击鼠标时会打开一个新的窗口并在其中显示相应的内容。3.1.3超链接图像地图链接命名
地图map1"/>Usemap就是给图片命名为地图画地图范围，并创建链接
verCS5.ppt”alt=“11”/>
（分区域创建链接，又是可以创建几个区域）Shape代表画什么图形，coo
rds代表区域Href代表目标端点网页中的图片具有直观和美化的作用，是网页设计中必不可少的元素。它既是文字表达
的有力补充，又是网页美化装饰中最具渲染力的元素。通常用来添加图形界面（例如导航按钮）、具有视觉感染力的内容（例如Logo）或交互式
设计元素（例如鼠标经过图像或图像地图），使页面更美观，表达更直观，更好地吸引浏览者。下面将讲解如何在网页中插入图片，从而使网页丰富
多彩更显生动，进而激发出浏览者的兴趣。1.认识网页中的图像格式网页中图像的作用基本上可分为两种：一种是起装饰作用，
如背景图像；另一种是起传递信息的作用，它和文本的作用是一样的。目前，在网页中使用最为普遍且被各种浏览器广泛支持的图像格式主要是JP
EG格式和GIF格式，PNG格式也在逐步地被越来越多的浏览器所接收。3.1.4网页图像（1）JPEG格式JPE
G格式（JointPhotographicExpertsGroup，联合图像专家组文件格式，文件扩展名为“.jpg”）是目前
互联网中最受欢迎的图像格式，该格式最多可以支持1670万种颜色，因此照片、油画和一些细腻、讲究色彩浓淡的图像常采用JPEG格式。由
于JPEG支持很高的压缩率，因此其图像的下载速度非常快。在多数图像处理软件中（如Photoshop、Fireworks和Paint
shop等）都可以控制JPEG的文件大小，使其介于最低图像质量和最高图像质量之间。采用JPEG格式对图像进行压缩后，不能再打开图像
对它重新进行编辑、压缩，如果需要重新编辑或改变图像的大小，应打开最初的24位文件，编辑后再保存为JPEG格式。3.1.4网页图
像（2）GIF格式GIF格式（GraphicsInterchangeFormat，可交换图像格式，文件扩展名为
“.gif”）是由Compuserve公司提出的与设备无关的图像存储标准，也是在Web上使用最早、应用最广泛的图像格式，该格式只支
持256色以内的图像，它具有图像文件小、下载速度快、下载时隔行显示，支持透明色以及多个图像能组成动画的特点，是网页制作中首选的图像
格式。由于最多只支持256色，因此不适合有晕光、渐变色彩等颜色细腻的图像和照片。因此，它最适合显示色调不连续或具有大面积单一颜色的
图像，如导航条、按钮、图标、微标或其他具有统一色彩和色调的图像。图像格式的通用性好，几乎所有的浏览器都支持此图像格式，并且有许多免
费软件支持GIF图像格式的编辑。将一个文件处理并保存为GIF格式后，不能通过直接打开来改变图片的大小，如果确实需要改变图像的大小，
要重新打开最初的24位文件进行修改，然后再将其保存为GIF格式。3.1.4网页图像（3）PNG格式PNG格式（
PortableNetworkGraphics，便捷式网络图像，文件扩展名为“.png”）是专门为网络而准备的图像格式。该格式
图像的特点是使用新型的无损压缩方案，图像在压缩后不会有细节的损失。具有丰富的色彩，最多可以显示1670万种颜色。而且PNG格式也提
供一种隔行显示方案，在显示速度上比GIF和JPEG更快一些。同时PNG格式图像又和GIF格式图像一样，支持透明背景，可以创建带有透
明区域的图像。不过PNG格式图像还没有普及到所有的浏览器，IE4.0或更高版本和Netscape4.04或更高版本的浏览器都只
能部分支持PNG图像的显示，但在未来它有可能是一种非常受欢迎的图像格式。因此，只有在为特定的目标用户进行设计时，才使用PNG格式的
图像。3.1.4网页图像2.插入图像发布网站的目的就是要让更多的浏览者浏览设计的站点，网站设计者必须想办法去吸
引浏览者的注意，所以网页除了包含文字外，还要包含各种赏心悦目的图像。因此，对于网站设计者而言，掌握图像的使用技巧是非常必要的。
要在DreamweaverCS5文档中插入的图像必须位于当前站点文件夹内或远程站点文件夹内，否则图像不能正确显示，所以
在建立站点时，网站设计者常先创建一个名叫“images”的文件夹，并将需要的图像复制到其中。在网页中插入图像的具体操
作步骤如下。3.1.4网页图像（1）在文档窗口中，将插入点放置在要插入图像的位置，如图3.55所示。单击“插入”面板中“常用
”选项卡的“图像”按钮。3.1.4网页图像图3.55插入图像位置（2）在弹出的“选择图像源文件”对话框中，浏览并选中要插
入的图像“logo.jpg”，单击“确定”按钮，如图3.56所示。弹出“图像标签辅助功能属性”对话框。?“替换文本”文本框：可以
输入图像的名称、描述或者其他信息。?“详细说明”文本框：可以定义详细说明文件的位置。3.1.4网页图像图3.56选择图像
源文件提示：如果当前工作的文档未保存，则Dreamweaver会弹出提示窗口，生成一个对图像文件的file://引用
，如图3.57所示。将文档保存到站点中的任何位置后，Dreamweaver将该引用转换为文档相对路径。3.1.4网页图像图3
.57保存文档提示窗口如果图像文件不在网站的根文件夹中，而定义站点时又设置了“默认图像文件夹”选项，那么文件将自动
复制到该文件夹，而不会出现提示性的对话框。如果网站的分支非常多，则分支的图像文件会保存在相应的文件夹，而不会全部保存在一个图像文件
夹中，因此通常不设置“默认图像文件夹”。（3）单击“”按钮，图像插入到文档中。（4）在将图像插入Dreamweaver文档后
，Dreamweaver会自动在HTML源代码中生成对该图像文件的引用。生成代码如下：ogo.jpg"width="218"height="48"/>其中，“![]() ”是图像标签，属性“src”
表示图像文件的路径，“width”表示图像的宽度，“height”表示图像的高度。（5）最终插入效果如图3.58所示。3.1.
4网页图像提示：在网页制作中，为了确保文件引用的正确性，图像文件必须位于当前站点文件夹中，如果图像文件不在当前站点
文件夹，系统会提问是否要将此文件复制到当前站点文件夹，此时应回答“是”，否则当站点上传后会找不到该图像文件。3.1.4网页图像
图3.58插入图片效果3.设置图像属性插入图像后，可以根据需要设置图像属性，从而使图像更美观。设置图像属性，首
先要单击图像，此时图像四周会出现可编辑的缩放手柄，同时“属性”面板中也显示出关于图像的属性设置。如果此时“属性”面板隐藏，可以通过
选择菜单栏中的“窗口>属性”命令将其显示；如果“属性”面板没有全部展开，单击“属性”面板右下角的箭头即可，如图3.59所示。
下面介绍各选项的含义。3.1.4网页图像图3.59图像属性项目3常用网页元素的添加列表
的类型通常有标号列表、项目列表、目录列表、菜单列表、定义列表等，最常用的是项目列表和编号列表。项目列表和标号列表可以表示不同段落的
文本之间的关系，因此，在文本上设置项目列表或编号列表并进行适当的缩进，可以直观地表示文本间的逻辑关系。1.插入项目列表或编号列表
DreamweaverCS5提供了两种插入项目列表或编号列表的方法。为了对不同的文字设定不相同的颜色
，DreamweaverCS5提供了两种改变选中文本颜色的方法。3.1.2列表通过“项目列表/编号列表”按钮设置选中段落
文本，步骤如下。（1）在文档窗口中选中段落文本。（2）单击“属性”面板中的“项目列表”按钮或“编号列表”按钮
选择相应的列表。通过“列表”格式设置选中段落文本，步骤如下。（1）在文档窗口中选中段落文本。（2）选择“格式>列
表”命令，选择项目列表或编号列表，如图3-23所示。3.1.2列表2.设置项目列表或编号列表通过项目列表或编号列表按钮设置
项目列表或编号列表，步骤如下。（1）选择段落。（2）在“属性”面板中，单击“项目列表”按钮或“编号列表”按钮，为文本添加项目列
表或编号列表。通过列表设置项目列表或编号列表，步骤如下。（1）选择段落。（2）选择“格式>列表”命令，弹出其子菜单，如图
3.19所示，选择“项目列表”或“编号列表”命令。3.1.2列表通过“属性”面板设置嵌套列表，步骤如下。（1）选择段落。
（2）在“属性”面板中，单击“文本缩进”按钮或“文本凸出”按钮，让选中的文字变成下级列表或上级列表。设置了
嵌套列表后的段落效果如图3.20所示。3.1.2列表图3.19编号列表命令
图3.20段落效果3.修改项目列表或
编号列表（1）将插入点放在设置项目列表或编号列表的文本中。（2）通过以下几种方法启动“列表属性”对话框
。单击“属性”面板中的“列表项目”按钮。选择“格式>列表>属性”命令。
在对话框中，先选择“列表类型”选项，确认是要修改项目列表还是编号列表，如图3.21所示。然后在“样式”选项中选择相应的列表或编
号的样式，如图3.22所示，单击“确定”按钮完成设置。3.1.2列表图3.21编号属性
图3.22编号属性
上面介绍了如何设置列表以及如何设置设置嵌套列表和修改列表属性的方法。在设置嵌套列表时，子列表需要使用文本缩进命令才能实现。下
面认识一下列表的HTML标签。（1）编号列表的HTML标签是“…… ”，“……”表示列表的内容
，具体格式如下：- 列表内容1
- 列表内容2
……
3.
1.2列表（2）项目列表的HTML标签是“”，其格式与编号列表是一样的。列表是可以嵌套的，下面是一个编号
列表嵌套项目列表的HTML代码。- 一级标题1
- 二级标题1
- 二级标题2
- 二级标题3
一级标题2- 一级标题3
3.1.2列表超链接是包含在网页中，用于链接到
其他网页的元素。它把两个或两个以上的网页关联起来。WWW（万维网）就是通过大量网页的超链接而形成的。如果没有超链接，也就没有万维网
。此外，超链接除了可以把页面链接起来，还可以把页面中的内容也链接起来。因此，理解超级链接的概念和原理，对于制作网页非常重要。下面将
介绍在DreamweaverCS5中创建和设置超级链接的基本方法。1.认识超级链接在创建超级链接前，首先来介绍超
级链接的基本知识。3.1.3超链接（1）超级链接的概念超级链接（Hyperlink）简称超链接，就是由源端点指
向目标端点的一种跳转。目标端点可以是页面、图像、声音等任意网络资源。链接分为内部链接和外部链接，内部链接是指同一网站文件之间的链接
；外部链接指不同网站文件之间的链接。网页中的超级链接按照链接路径的不同，可以分为绝对路径、相对路径和基于根目录的路径。3.1.
3超链接（2）URL在Internet中，每个网页都有唯一的地址，通常称为URL（UniformResour
ceLocator,统一资源定位）。URL的书写格式为“协议：//主机名/路径/文件名”，例如：“http://www.baid
u.com/index.php”。而“http://www.baidu.com”省略了路径和文件名，但服务器会将首页文件回传给浏览
器。由此可以看出，URL主要用来指明通信协议和地址以便取得网络上的各种服务，它包括以下几个组成部分。通信协议：包括HTTP、
FTP、Telnet和Mailto等协议。主机名：指服务器在网络中的IP地址（如：“218.22.169.11”）或域名（如
：“www.baidu.com”）。所要访问文件的路径和文件名：主机名与路径及文件名之间以“/”分割。3.1.3超链接
（3）路径知识在超级链接中，路径通常有以下3种表示方法。①绝对路径完整地描述文件存储位置的路径就是
绝对路径，如：D:\www\images\top.jpg，在Internet中，绝对路径是指包括服务器协议和域名的完整URL（Un
iformResourceLocator，统一资源定位器）路径。绝对路径如http://www.baidu.com和ftp:/
/ftp.nwsuaf.edu.cn等。内部链接可以使用绝对路径，但是一旦将站点移动到其他服务器，则所有内部绝对路径
链接都将断开。绝对路径同链接的源端点无关。只要网站的地址不变，无论文件在站点中如何移动，都可以正常实现跳转。另外，如果希望链接其他
站点上的内容，就必须使用绝对路径。如图3.23所示。3.1.3超链接绝对路径也会出现在尚未保存的网页上，如果在没
有保存的网页上插入图像或添加链接，DreamweaverCS5会暂时使用绝对路径，如图3.24所示，网页保存后，Dreamwea
verCS5会自动将绝对路径转换为相对路径。从一个网站的网页链接到另一个网站的网页时，必须使用绝对路径，以保证当网
站的网址发生变化时，被引用的页面的链接还是有效的。3.1.3超链接图3.23绝对路径
图3.24暂时使用绝对路径
②相对路径对于大多数内部链接来说,相对路径是最适用的链接方式。在当前文档与所链接的文档处于同一文件夹内时，使用文档
相对路径。链接到其他文件夹中的文档,也可以使用相对路径，方法是利用文件夹层次结构，指定从当前文档到所链接文档的路径。如果链接到同一
目录下，则只需要输入要链接文档的名称。如果要链接到上一级目录中的文件，则先输入“../”，再输入目录名、文件名。要链接到下一级目录
中的文件，只需先输入目录名，然后加“/”，再输入文件名。如果链接的源端点不变，即站点的结构和文档的位置不变，那么可
以将整个网站移植到另一个地址的网站中，而不需要修改文档中的链接路径，链接不会出错。如果修改了站点的结构，或是移动了文档，即改变了链
接的源端点，则文档中的链接关系就会失效，因为相对路径是由文档间的相对位置而定的。在DreamweaverCS5的站点面板中移动文
档时，DreamweaverCS5会自动对文档中链接的相对路径进行更新，从而确保链接正确。3.1.3超链接③基于根目录的
路径站点根目录路径是指从站点的根文件夹到文档的路径。它同源端点的位置无关。基于根目录的路径以一个正斜线“/”开始，该
斜线表示站点根文件夹。如果经常在不同文件夹之间移动HTML文件，通常使用站点根目录路径指定链接。在移动含有根目录相对
链接的文档时，不需要更改这些链接；在移动该HTML文件后，其相关文件链接依然有效。但是，如果移动或重命名根目录相对链接所链接的文档
，即使文档彼此之间的相对路径没有改变，仍必须更新这些链接。以上这些路径都是网页的统一资源定位（URL），只不过后两种
路径将URL的通信协议和主机名省略掉了，他们必须有参照物，一种是以文档为参照物，另一种是以站点根目录为参照物。而第一种路径没有参照物，它是比较完整的路径，也是标准的URL。3.1.3超链接2.超级链接的分类超级链接通常由源端点和目标端点两部分组成。（1）根据源端点的不同，超级链接可分为文本超级链接、图像超级链接和表单超级链接。?文本超级链接以文本作为超级链接端点。?图像超级链接以图像作为超级链接端点。?表单超级链接比较特殊，填写完表单后，单击相应按钮会自动跳转到目标也。3.1.3超链接（2）根据目标端点的不同，超级链接可分为内部超级链接、外部超级链接、电子邮件超级链接和锚记超级链接?内部超级链接是使多个网页组成一个网站的一种链接形式，目标端点和源端点是同一网站内的网页文档。?外部超级链接指的是目标端点与源端点不在同一网站内，外部超级链接可以实现网站之间的跳转，从而将浏览范围扩大到整个网络。?电子邮件超级链接将会启动邮件客户端程序，可以写邮件并发送到链接的邮箱中。?利用锚记超级链接，在浏览网页时可以跳转到当前网页或其他网页中的某一指定位置。3.1.3超链接3.内部链接和外部链接（1）内部链接内部链接是与本地网页文件的链接，通常用于在本地站点中的文档间建立链接，下面我们就来学习如何创建内部链接，具体步骤如下：（1）在页面中选择要插入内部链接的文本，如图3.25所示。3.1.3超链接图3.25选择链接文本（2）在“属性”栏中单击“链接”文本框后面的“浏览文件”按钮，如图3.26所示。3.1.3超链接图3.26单击“浏览文件”按钮（3）在弹出的“选择文件”对话中，选择需要链接的文件wz.html，如图3.27所示。图3.27选择链接文件（3）这里选择“_blank”，如图3.28所示。3.1.3超链接图3.28设置属性（4）完成内部链接制作，插入内部链接后的文本下方出现下划线，并且字体颜色变成蓝色，表示链接创建成功，如图3.29所示。图3.29超级链接的效果 |
|
