网页设计第二章.ppt

网页设计与制作教程网页设计与制作教程第二章第二章第二章第二章 Dreamweaver基础基础Dreamweaver是由Macromedia公司推出的一款在网页制作方面大众化的软件，它具有可视化编辑界面，用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页。本章先初步介绍网络的基础知识，然后详细介绍网页及其制作的有关概念和网站建设的入门知识。本章介绍一下Dreamweaver CS3软件的工作界面、新功能和基本应用，使读者初步掌握Dreamweaver CS3的基本功能，为后面制作更复杂的网页打下基础。2.1 Dreamweaver基本操作基本操作工作环境 菜单 工具栏 工具箱 面板等 2.1.1 Dreamweaver的工作环境 1.安装 Dreamweaver 2.Dreamweaver的工作区选择工作区工作区布局组成工作区布局说明 菜单栏 插入栏文档工具栏 工作区布局说明工作区域窗口设计 代码 代码和设计 状态栏 工作区布局说明“属性”面板 页面属性 工作区布局说明面板组“文件”面板“编码”工具栏 工作区布局说明“样式呈现”工具栏“CSS 样式”面板 自定义工作环境 显示/隐藏面板和工具栏 自定义工具栏 自由组合面板 调整文档窗口大小 切换视图 代码视图 设计视图 拆分视图 2.1.2 Dreamweaver的简单操作的简单操作Dreamweaver 主窗口主窗口 2.1.2 Dreamweaver的简单操作的简单操作Dreamweaver文件类型创建新网页创建空白页 新建文档新建文档”对话框对话框 2.1.3 Dreamweaver的视图模式的视图模式代码视图 创建空白页“空白页空白页”类别类别 创建新网页创建空模板 创建基于现有模板的页面创建基于Dreamweaver示例文件的页面 创建其它类型的页面 设置默认文档类型和编码 设置新HTML文档的默认文件扩展名 打开并编辑现有文档 2.1.3 Dreamweaver的视图模式的视图模式代码视图设计视图 拆分视图 2.1.4 网页中添加内容与超级网页中添加内容与超级链接链接网页中添加内容插入标题文字设置背景颜色 插入一幅画 使用插入菜单 插入一幅画 使用插入栏 使用面板组“资源”面板 网页中添加内容输入欢迎文字 保存页面 预览网页 超级链接 页面之间的超级连接 在网页中选中要做超级链接的文字或者图片在属性面板中选中黄色“浏览文件”文件夹图标 单击后，在弹出的对话框里选中相应的网页文件就完成了单击后，在弹出的对话框里选中相应的网页文件就完成了 页面之间的超级连接按F12预览网页。在浏览器里光标移到超级链接的地方就会变成手型。提示：也可以手工在属性面板中链接提示：也可以手工在属性面板中链接 输入框中输入地址。给图片加上超级链输入框中输入地址。给图片加上超级链接的方法和文字完全相同。接的方法和文字完全相同。2.1.5 网页设计结果测试网页设计结果测试具体测试工作 确保页面在目标浏览器中能够如预期的那样工作 在不同的浏览器和平台上预览页面 检查站点是否有断开的链接，并修复断开链接 监测页面的文件大小以及下载这些页面所占用的时间 运行一些站点报告来测试并解决整个站点的问题 验证代码，以定位标签或语法错误 在站点发布后，对其进行更新和维护 使用讨论论坛 运行报告以测试站点 选择“站点”菜单项“报告”命令 运行报告以测试站点报告将出现在“结果”面板组的“站点报告”面板中 若要仅为站点运行辅助功能报告，可以选择“文件”“检查页”“检查辅助功能”。运行报告以测试站点从“报告在”弹出菜单中选择要报告的内容，并设置要运行的任意一种报告类型（工作流程或HTML）如果选择了工作流程报告，则单击“报告设置”。否则，跳过这一步。确定取出者 设计备注 保存最近修改的情况信息 使用和保存报告 使用报告:运行报告可参阅前面的步骤。在“站点报告”面板中，执行以下任一操作来查看报告：单击要按其排序的列标题以对结果进行排序；可以按文件名、行号或说明进行排序，还可以运行若干不同的报告并让不同的报告保持打开状态；保存报告:单击“保存报告”保存该报告。在保存报告时，可以将其导入到现有模板文件中。然后将该文件导入到数据库或电子表格中并进行打印，或者使用该文件在Web站点上显示报告。2.2网页中添加文本网页中添加文本Dreamweaver允许通过以下方式向网页中添加文本：直接将文本键入页面，从其它文档复制和粘贴文本，或从其它应用程序拖放文本。还可以从其它文档类型导入文本或链接至其它文档类型，这些文档类型包括ASCII文本文件、RTF 文件和Microsoft Office文档。2.2.1Dreamweaver中添加文本中添加文本从其它应用程序中复制文本切换到 Dreamweaver，将插入点定位在“文档”窗口的“设计”视图中 选择“编辑”“粘贴”或“编辑”“选择性粘贴”。选择“编辑”“选择性粘贴”后，可以选择若干粘贴格式设置选项 粘贴选项粘贴选项快快 捷捷 键键粘贴粘贴Ctrl+VCtrl+V(Windows)(Windows)选择性粘贴选择性粘贴Ctrl+Shift+VCtrl+Shift+V(Windows)(Windows)注：当使用注：当使用“粘贴粘贴”命令从其它应用程序粘贴文本时，可以将粘贴首选参数设置为默认选项。按命令从其它应用程序粘贴文本时，可以将粘贴首选参数设置为默认选项。按Control+V将在将在“代码代码”视图中始终仅粘贴无格式设置的文本。视图中始终仅粘贴无格式设置的文本。2.2.2文本格式设置文本格式设置使用文本属性检查器可以设置当前所选文本的格式。设置文本格式时，Dreamweaver将跟踪为每个文本元素指定格式设置属性，并使用命名约定为每个元素指定一个标签:Style1、Style2.如果为两个或更多文本元素指定相同的格式属性，Dreamweaver将使用相同的标题标记这些元素，减少了不必要的样式名称。Dreamweaver应用到一段给定文本正文的标签,稍后即可使用“样式”弹出式菜单进行应用 样式2.2.3 文本相关常用html标记 常用html标记基本结构及格式标记文件格式 文件的开头与结尾主题 放在文件的开头文头区段 描述文件的信息内文区段 放此文件的内容标题?=16，改变标题字的大小。标题对齐字加大字变小基本结构及格式标记粗体字斜体字底线字上标字下标字文字对中基本字体大小 取值范围从1到7，默认值为3。改变字体大小(?=17)字体颜色 RGB色码指定字型?=宋体，楷体等。超链接 网址链接设定锚点?以容易记为原则链接到锚点 同一份文件 锚点不同文件显示图形图形位置分别为上、下、中、左、右的位置图形取代文字 无法显示图形时用图形尺寸?以像素为单位连结图形边线?以像素为单位图形四周留白?以像素为单位区段划分 段落断行横线横线厚度?以像素为单位横线长度?以像素为单位横线长度?与页宽相比较实横线 无立体效果背景颜色 背景图案 图形文件格式为gif和jpg背景颜色 RGB色码背景文字颜色 RGB色码未链结点颜色 RGB色码已链结点颜色 RGB色码正在链结点颜色body alink=#rrggbb RGB色码链接(Link)基本语法 链接一个页面格式：.例：这是一个链接的例子点一下带下划线的文字!跳转到页面的另外一个地方格式：.例：跳转到下一个链接点下一个链接点 链接(Link)基本语法开一个新的(浏览器)窗口(Target Window)格式：.例：开一个新窗口!链接(Link)基本语法Formatting（格式排版）Creates a new paragraph 创建一个新的段落 Aligns a paragraph to the left,right,or center.将段落按左、中、右对齐。Inserts a line break（插入一个回车换行符）Indents text from both sides 从两边缩进文本 Creates a definition list 创建一个定义列表 Precedes each definition term 放在每个定义术语词之前Formatting Precedes each definition 放在每个定义之前 Creates a numbered list 创建一个标有数字的列表 Precedes each list item,and adds a number.放在每个数字列表项之前，并加上一个数字。Creates a bulleted list 创建一个标有圆点的列表 Precedes each list item,and adds the bullet放在每个圆点列表项之前，并加上一个圆点。A generic tag used to format large blocks of HTML,also used for stylesheets.一个用来排版大块HTML段落的标签，也用于格式化表。2.3 网页中添加图像网页中添加图像了将网页做的赏心悦目，增加吸引力，Dreamweaver在网页中用图象加以点缀。将图像插入文档时，HTML源代码中会生成对该图像文件的引用。为了确保此引用的正确性，该图像文件必须位于当前站点中。如果图像文件不在当前站点中，Dreamweaver会询问是否要将此文件复制到当前站点中。还可以动态插入图像，动态图像指那些经常变化的图像。例如，广告横幅旋转系统需要在请求页面时从可用横幅列表中随机选择一个横幅，然后动态显示所选横幅的图像。2.3.1 网页中添加各种图像（jpg，gif，png）图像素材的采集图像素材的采集则主要通过以下几种方式获得。最常用的是利用扫描仪或数码相机从外部采集图像数据；另外对于普通的照片、图象资料可以用扫描仪扫描到电脑里，再经过Photoshop等图象处理软件处理。插入图片 在新建的空白网页上选中插入点 点击菜单栏中的“插入记录”“图像”，或者点击插入工具栏中常用项里的“插入图像”图标，然后会弹出“选择图像源文件”对话框 插入图片 在“选择图像源文件”对话框中选择要插入的图片，选中图片后会在下面“文件名”处显示文件的名称，并在右侧出现图片预览、图像尺寸和图片容量 选好图片后点击确定，随后弹出一个对话框 插入图片按确定后，随后弹出一个名为按确定后，随后弹出一个名为“图片标签辅助功能属性图片标签辅助功能属性”对话框对话框 插入图片这里有两个需要添加的内容，“替换文本”就是图片的alt属性，可以输入图片的名字或者简短介绍。详细说明是图片的longsec属性，一般使用不到，可以不填；最后点击确定，一张图片就插入到网页中了。给图片加上链接在输入框中直接输入图片路径和文件名，本地路径、网络路径都可以。点击边上的“指向文件”图标（小靶心图标）按住左键不放，这时会看到有一根线连着它，拖着它到软件右侧的“文件面板”处，选择要插入的图片，松开鼠标，这时图片就会正确显示在页面中。点击输入框边上的“文件夹图标”，会弹出一个文件选择框，这种方法和上面所讲的插入图片方法是一样的，只要选择要插入的图片就可以了。2.3.2 图像格式设置图像格式设置GIF:GIF文件最多使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其它具有统一色彩和色调的图像。JPEG（联合图像专家组）：JPEG文件格式是用于摄影或连续色调图像的较好格式，这是因为JPEG文件可以包含数百万种颜色 PNG（可移植网络图形）：文件格式是一种替代GIF格式的无专利权限制的格式，它包括对索引色、灰度、真彩色图像以及alpha通道透明度的支持。PNG是Adobe Fireworks固有的文件格式 2.3.3 图像标记及其属性图像标记及其属性图像标记 将新建一个空白文档保存在与图片同一文件夹中。单击“文档”工具栏中的拆分视图按钮在代码视图中，在与之间插入一段代码：这时设计视图中会出现图片 图像标记 在代码视图中，在图像标记中插入hspace=50 vspace=50，这时设计视图中的图片会向右和向下各移动50像素 图像标记 接着在图像标记中插入border=4，这时设计视图中的图片会出现4像素的边框 图像标记继续在图像标记中插入align=right，将border=4与hspace=50 vspace=50删除，这时在设计视图中，图片靠近右边 图像标记在图像标记中更改width和height的数值，就会将图片放大。下面是将width和height的数值各增加100像素效果 图像属性图像属性检查器允许设置图像的属性。如果并未看到所有的图像属性，请单击位于右下角的展开箭头 图像属性设置 选择“窗口”“属性”以查看所选图像的属性检查器 在缩略图下面的文本框中，输入名称，以便在使用Dreamweaver行为（例如“交换图像”）或脚本撰写语言（例如 JavaScript 或 VBScript）时可以引用该图像 设置图像的任一选项 宽和高 源文件 链接 目标 2.3.4 使用使用Dreamweaver制作网制作网络相册络相册把事先准备好副大小同样的相片用photoshop等图形制作工具加工一下，以增加相片的可欣赏性。插入Flash元素 2.3.4 使用使用Dreamweaver制作网制作网络相册络相册Flash元素参数设置 保存文件，完成操作。2.4 网页中添加多媒体网页中添加多媒体通常所说的“媒体”（Media）包括其中的两点含义。一是指信息的物理载体（即存储和传递信息的实体），如书本、挂图、磁盘、光盘、磁带以及相关的播放设备等；另一层含义是指信息的表现形式（或者说传播形式），如文字、声音、图像、动画等。多媒体计算机中所说的媒体，是指后者而言，即计算机不仅能处理文字、数值之类的信息，而且还能处理声音、图形、视频等各种不同形式的信息。2.4.1 网页中添加视频媒体网页中添加视频媒体视频素材的准备 网页中添加视频媒体 将插入点放在“文档”窗口中希望插入对象的位置 完成“选择文件”或“插入 Flash”对话框，然后单击“确定”设置辅助功能属性。选择相应的功能属性设置参数 单击“确定”插入媒体对象 2.4.2 网页中添加音频媒体网页中添加音频媒体音频文件格式.midi.midi 或或 .mid.mid（Musical Musical Instrument Digital Instrument Digital InterfaceInterface，乐器数，乐器数字接口）字接口）此格式用于器乐。许多浏览器都支持此格式用于器乐。许多浏览器都支持 MIDI MIDI 文件，并且不需要插件。尽管文件，并且不需要插件。尽管 MIDI MIDI 文件的声音品文件的声音品质非常好，但也可能因访问者的声卡而异。很小的质非常好，但也可能因访问者的声卡而异。很小的 MIDI MIDI 文件就可以提供较长时间的文件就可以提供较长时间的声音剪辑。声音剪辑。MIDI MIDI 文件不能进行录制，并且必须使用特殊的硬件和软件在计算机上合成。文件不能进行录制，并且必须使用特殊的硬件和软件在计算机上合成。.wav.wav（波形扩展）（波形扩展）这些文件具有良好的声音品质，许多浏览器都支持此类格式文件并且不需要插件。可以从这些文件具有良好的声音品质，许多浏览器都支持此类格式文件并且不需要插件。可以从CDCD、磁带、麦克风等录制自己的磁带、麦克风等录制自己的WAV WAV 文件。但是，其较大的文件大小严格限制了可以在网文件。但是，其较大的文件大小严格限制了可以在网页上使用的声音剪辑的长度。页上使用的声音剪辑的长度。.aifaif（Audio Interchange Audio Interchange File FormatFile Format，音频，音频交换文件格式，或交换文件格式，或 AIFFAIFF）AIFF AIFF 格式与格式与 WAV WAV 格式类似，也具有较好的声音品质，大多数浏览器都可以播放它并且不需要格式类似，也具有较好的声音品质，大多数浏览器都可以播放它并且不需要插件；也可以从插件；也可以从 CDCD、磁带、麦克风等录制、磁带、麦克风等录制 AIFF AIFF 文件。但是，其较大的文件大小严格文件。但是，其较大的文件大小严格限制了可以在网页上使用的声音剪辑的长度。限制了可以在网页上使用的声音剪辑的长度。.mp3.mp3（Motion Picture Motion Picture Experts Group Experts Group Audio LayerAudio Layer 3 3，运，运动图像专家组音频第动图像专家组音频第 3 3 层，或称为层，或称为 MPEG MPEG 音频第音频第 3 3 层）层）一种压缩格式，它可使声音文件明显缩小。其声音品质非常好：如果正确录制和压缩一种压缩格式，它可使声音文件明显缩小。其声音品质非常好：如果正确录制和压缩 mp3 mp3 文文件，其音质甚至可以和件，其音质甚至可以和 CD CD 相媲美。相媲美。mp3 mp3 技术可以对文件进行技术可以对文件进行“流式处理流式处理”，以便访，以便访问者不必等待整个文件下载完成即可收听该文件。但是，其文件大小要大于问者不必等待整个文件下载完成即可收听该文件。但是，其文件大小要大于 Real Real Audio Audio 文件，因此通过典型的拨号（电话线）调制解调器连接下载整首歌曲可能仍要文件，因此通过典型的拨号（电话线）调制解调器连接下载整首歌曲可能仍要花较长的时间。若要播放花较长的时间。若要播放 mp3 mp3 文件，访问者必须下载并安装辅助应用程序或插件，例文件，访问者必须下载并安装辅助应用程序或插件，例如如 QuickTimeQuickTime、Windows Media Player Windows Media Player 或或 RealPlayerRealPlayer。.rara、.ram.ram、.rpm.rpm 或或 Real Real AudioAudio此格式具有非常高的压缩度，文件大小要小于此格式具有非常高的压缩度，文件大小要小于 mp3mp3。全部歌曲文件可以在合理的时间范围内下。全部歌曲文件可以在合理的时间范围内下载。因为可以在普通的载。因为可以在普通的 Web Web 服务器上对这些文件进行服务器上对这些文件进行“流式处理流式处理”，所以访问者在文，所以访问者在文件完全下载完之前就可听到声音。访问者必须下载并安装件完全下载完之前就可听到声音。访问者必须下载并安装 RealPlayer RealPlayer 辅助应用程序辅助应用程序或插件才可以播放这种文件。或插件才可以播放这种文件。.qt.qt、.qtmqtm、.movmov 或或 QuickTimeQuickTime此格式是由此格式是由 Apple Computer Apple Computer 开发的音频和视频格式。开发的音频和视频格式。Apple Macintosh Apple Macintosh 操作系统中包含了操作系统中包含了 QuickTimeQuickTime，并且大多数使用音频、视频或动画的，并且大多数使用音频、视频或动画的 Macintosh Macintosh 应用程序都使用应用程序都使用 QuickTimeQuickTime。PC PC 也可播放也可播放 QuickTime QuickTime 格式的文件，但是需要特殊的格式的文件，但是需要特殊的 QuickTime QuickTime 驱动驱动程序。程序。QuickTime QuickTime 支持大多数编码格式，如支持大多数编码格式，如 CinepakCinepak、JPEG JPEG 和和 MPEGMPEG。2.4.2 网页中添加音频媒体网页中添加音频媒体声音素材的准备链接到音频文件嵌入声音文件实例：介绍如何实现在网页上随机播放背景音乐。1.打开 Dreamweaver软件新建文件，并保存页面 2.选择好“标签”页 实现播放背景音乐3.点击“行为”面板中图标，选择级联菜单的“建议不在使用”实现播放背景音乐实现播放背景音乐4.点击下“播放声音”选项，进入“播放声音”对话框 5.在“播放音乐”对话框中，通过“浏览”选择插入要播放的音乐文件后，再按“确定”认可。6.重复执行、的操作 4 次，这样就添加了 4 种音乐，使得程序可以随机在这四种音乐中挑选其中一首来播放 7.保存文件，完成操作 2.4.3 网页中添加动画网页中添加动画动画素材的准备Flash动画在网页中应用广泛，是目前最流行的二维动画技术。用它制作的SWF动画文件，可以嵌入到HTML文件里，也可以单独成页 插入Flash动画实例 将光标放置在表格任意单元格中，单击常用快捷栏中的媒体按钮，然后在弹出的列表中选择Flash 插入Flash动画实例 弹出“选择文件”对话框，选择swf文件夹中的main.swf文件 单击“确定”按钮后，插入的Flash动画并不会在文档窗口中显示内容，而是以一个带有字母F的灰色框来表示 插入Flash动画实例 在文档窗口单击这个Flash文件，就可以在属性面板中设置它的属性了 为了使页面的背景在Flash下能够衬托出来，可以使Flash的背景变为透明。单击属性面板中的“参数”按钮，打开“参数”对话框，设置参数为wmode，值为transparent 插入Flash动画实例 保存文件，完成操作 Dreamweaver设置设置Flash动画参数动画参数 2.4.4 媒体播放控制媒体播放控制使用行为控制媒体 使用行为控制 Shockwave 或 Flash的播放、停止、后退或转到 Shockwave 影片或 Flash SWF 文件中的某一帧 使用行为播放声音,例如，只要用户将鼠标指针移到链接上，就可以播放声音效果 使用行为检查插件.可以检查站点访问者是否安装了必需的插件，然后根据他们是否有正确的插件来将他们引导到不同的 URL。2.4.4 媒体播放控制媒体播放控制使用参数控制媒体对象输入参数的名称和值 在“文档”窗口中选择可具有参数的对象 右键单击该对象，然后从上下文菜单中选择“参数”单击加号(+)按钮并在相应的列中输入参数名和参数值 删除参数选择一个参数并按减号()按钮 重新安排参数顺序选择某个参数，然后使用向上箭头和向下箭头按钮 2.4.5 多媒体标记介绍多媒体标记介绍 功能：是用以插入背景音乐，但只适用於IE。例：参参 数数功功 能能srcsrc=your.myour.midid 用来设定用来设定 midi midi 档案及路径，可以是相对或绝对。档案及路径，可以是相对或绝对。autostartautostart=t=truerue确定是否在音乐档传完之後，就自动播放音乐。是确定是否在音乐档传完之後，就自动播放音乐。是为为truetrue，否为，否为falsefalse，falsefalse为默认值。为默认值。loop=infiniloop=infinitete确定是否自动反覆播放。确定是否自动反覆播放。LOOP=2 LOOP=2 表示重复两次，表示重复两次，Infinite Infinite 表示重复多次。表示重复多次。2.4.5 多媒体标记介绍多媒体标记介绍功能：是用以插入各种多媒体，格式可以是Midi、Wav、AIFF、AU等，Netscape及新版的IE都支援。例：参参 数数功功 能能srcsrc=your.midyour.mid 设定设定 midi midi 档案及路径，可以是相对或绝对。档案及路径，可以是相对或绝对。autostartautostart=true=true确定是否在音乐档传完之後，就自动播放音乐。确定是否在音乐档传完之後，就自动播放音乐。true true 是，是，false false 否否 (内定值内定值)。loop=trueloop=true确定是否自动反覆播放。确定是否自动反覆播放。LOOP=2 LOOP=2 表示重复两次，表示重复两次，true true 是，是，false false 否。否。HIDDEN=trueHIDDEN=true确定是否完全隐藏控制画面，确定是否完全隐藏控制画面，true true 为是，为是，no no 为否为否 (内定内定)。STARTTIME=STARTTIME=分分:秒秒 设定歌曲开始播放的时间。如设定歌曲开始播放的时间。如 STARTTIME=00:30 STARTTIME=00:30 表示从第表示从第3030秒处开始播放。秒处开始播放。VOLUME=0-100VOLUME=0-100设定量的大小，数值是设定量的大小，数值是0 0到到100100之间。内定则为使用者系统本身之设定。之间。内定则为使用者系统本身之设定。WIDTH=WIDTH=整数整数 和和 HIGH=HIGH=整数整数 设定控制画面的宽度和高度。设定控制画面的宽度和高度。(若若 HIDDEN=no)HIDDEN=no)ALIGN=centerALIGN=center设定控制画面和旁边文字的对齐方式，其值可以是设定控制画面和旁边文字的对齐方式，其值可以是 toptop、bottombottom、centercenter、baselinebaseline、leftleft、rightright、texttoptexttop、middlemiddle、absmiddleabsmiddle、absbottomabsbottom。CONTROLS=CONTROLS=smallconsolesmallconsole 设定控制画面的外貌。预设值是设定控制画面的外貌。预设值是 consoleconsole。2.4.5 多媒体标记介绍多媒体标记介绍CONTROLS预设值 参参 数数功功 能能consoleconsole一般正常的面板一般正常的面板smallconsolesmallconsole较小的面板较小的面板playbuttonplaybutton只显示播放按钮只显示播放按钮pausecuttonpausecutton只显示暂停按钮只显示暂停按钮stopbuttonstopbutton只显示停止按钮只显示停止按钮volumelevervolumelever只显示音量调整钮只显示音量调整钮2.5 超级链接应用超级链接应用各种链接的功能 导航链接：实现站点内文档的链接 锚链接：使用锚链接到文档中的指定位置空链接：是一个无指向的链接 创建JavaScript脚本链接 创建电子邮件链接 链接到站点中的文档或者其它站点 给链接增加提示，给链接增加快捷键 各种链接的实现方法 实例:创建导航链接 用指向文件图标链接文档：选中图像，将“属性”检查器的“链接”域右边的“指向文件”图标拖动到站点窗口的文档中。这种方法方便快捷，推荐使用。示例中指向一个文件夹，如果发布到网上后，自动会打开这个文件夹下的默认首页文件index.htm 创建导航链接 使用属性检查器：选中示例中的图像，也可以是文字，点击属性面板中的“浏览文件”图标 选中一个文件。会出现一个文件相对于“文档”，“站点根目录的选择”创建导航链接文档相对路径是最适合用于本地链接的路径类型，适合绝大多数Web站点，推荐使用 根相对路径：如果在一个使用多台服务器的大型Web站点或一台服务器上有多个站点的情况下工作，可能需要使用这种类型的路径 创建导航链接绝对路径：完整的URL，称作绝对路径 从打开文档的选取中创建链接：选中文字，按Shift键，拖动出现“指向文件”图标，把“指向文件”图标拖向目标文件，就会建立链接 创建导航链接选择被链接文档要打开的位置：若要使被链接文档不出现在当前窗口或框架中，从属性面板的“目标”弹出式菜单选取一个选项“目标目标”弹出式菜单选项弹出式菜单选项 创建导航链接选选 项项作作 用用_blank在新的未命名的浏览器窗口中加载链接文档。在新的未命名的浏览器窗口中加载链接文档。_parent在父框架页或包含该链接的框架窗口中加载链接文档。如果包含链接的框架不是嵌套的，则链接文档将在父框架页或包含该链接的框架窗口中加载链接文档。如果包含链接的框架不是嵌套的，则链接文档将加载到整个浏览器窗口中。加载到整个浏览器窗口中。_self将链接文档加载到与链接相同的框架或窗口中，该目标是默认值，所以通常您不需要指定它。将链接文档加载到与链接相同的框架或窗口中，该目标是默认值，所以通常您不需要指定它。_top将在整个浏览器窗口中加载链接文件，同时移除所有框架。一个网站中，第一级链接或者导航链接选择将在整个浏览器窗口中加载链接文件，同时移除所有框架。一个网站中，第一级链接或者导航链接选择_self，第二级链接和友情链接选择，第二级链接和友情链接选择_blank。属性面板属性面板“目标目标”弹出式菜单选取项弹出式菜单选取项创建效果创建效果 使用锚链接选中文本 在目标文档中插入锚标记 命名 拖动“指向文件”图标到文本 命名锚命名锚记效果记效果 使用空链接 在文档窗口中，选中要设置链接的文本、图像或其他对象 在属性面板的链接框中，只输入一个“#”号 如果单击这种地址为一个“#”的链接，无论当前你处于文档的什么地方，都会自动跳转到文档的开头位置。很多人非常讨厌这种情况，因此出现很多插件可以用“#”来代替“#”，单击这样的链接的时候，会保持当前页面的浏览位置。还可以在属性面板的链接框中输入javascript:;创建空链接 创建javascript脚本链接 在文档窗口中选取文本，图象或对象 在“属性”检查器的“链接”栏中键入javascript:，其后紧接JavaScript代码或函数调用。例如在链接栏中键入javascript:alert(哈哈你上当了)创建一个链接，点击链接后就会出现一个警告框 建电子邮件链接 选取需要创建链接的文本或者图像，点击常用面板中的“电子邮件链接”工具，输入邮件地址。选取需要创建链接的文本或者图像，在属性面板中的链接栏输入mailto:邮件地址 创建跳转菜单 首先将插入点放在要插入链接的位置 点击表单面板中的跳转工具。在插入跳转菜单对话框中，点添加项添加新链接 创建跳转菜单在浏览器中发布 在属性面板中选择类型为“列表”高度为3 创建跳转菜单在浏览器中发布 点击属性面板中的列表值，可以修改列表值 给链接增加提示 给链接增加快捷键。首先将插入点放在要插入链接的位置。点击常用面板上的超级链接工 设置链接参数 给链接增加提示标题是指当指向链接会出现提示 访问键是指按键盘上的快捷键会选中链接。例如在实例中按访问键是指按键盘上的快捷键会选中链接。例如在实例中按Alt+D键会选键会选中中5D多媒体多媒体 2.5.1 链接到各种对象文档位置和路径 绝对路径 文档相对路径 站点根目录相对路径 链接文件和文档 使用属性检查器链接到文档例:做一个完整的网站新建页面插入图片 给图片加上链接给图片加上链接例:做一个完整的网站使用指向文件图标链接文档 在“文档”窗口的“设计”视图中选择文本或图像 创建链接 使用站点地图链接文档使用站点地图和指向文件图标链接文档在站点地图中链接文档 使用超链接命令添加链接链接到文档中的特定位置 创建命名锚记 链接到命名锚记 使用指向文件方法链接到命名锚记 例:做一个完整的网站创建电子邮件链接 创建空链接和脚本链接 在站点地图中管理链接 更改链接 删除链接 打开链接源 在整个站点范围内更改链接在Dreamweaver中测试链接 在不定义站点的情况下连接到 FTP 服务器 2.5.2 图像热区设置图像热区设置关于图像地图 图像地图指已被分为多个区域（称为热点）的图像；当用户单击某个热点时，会发生某种动作 插入客户端图像地图修改图像地图热点选择图像地图中的多个热点 移动热点 调整热点大小 图像热区设置举例 对下面的中国地图加一些链接后，鼠标移动到省份的热区，就会显示提示，如果有预先设置的网站，点击会进入对方的网站 图像热区设置举例图像热区设置首先插入图片。单击图片，用展开的属性面板上的绘图工具在画面上绘制热区 属性面板改换为热点面板如图：链接输入框：填入相应的链接。替代框：填入提示文字说明。目标框：不作选择则默认在新浏览器窗口打开图像热区设置举例保存页面，按F12预览，用鼠标在设置的热区检验效果 超级链接属性面板中的目标选项 目标目标”即目标区，也就是超级链接指向的页面出现在什即目标区，也就是超级链接指向的页面出现在什么目标区域。默认的情况下域中总有四个选项么目标区域。默认的情况下域中总有四个选项 参参 数数作作 用用_blank_blank单击链接以后，指向页面出现在新窗口中。单击链接以后，指向页面出现在新窗口中。_parent_parent用指向页面替换他外面所在的框架结构。用指向页面替换他外面所在的框架结构。_self_self将连接页面显示在当前框架中。将连接页面显示在当前框架中。_top_top跳出所有框架，页面直接出现在浏览器中。跳出所有框架，页面直接出现在浏览器中。2.5.3 链接标记及其属性在设置存储 Web 站点文档的 Dreamweaver 站点和创建 HTML 页之后，需要创建文档到文档的连接 站点地图直观地说明文件是如何链接在一起的 链接的创建与管理有几种不同的方法 创建一些指向尚未建立的页面或文件的链接 创建所有的文件和页面，然后再添加相应的链接 管理链接的方法是创建占位符页面 2.5.4跳转菜单（可选）菜单选择提示（如菜单项的类别说明），或一些指导信息（例如“选择其中一项”）。必需）所链接的菜单项的列表：当用户选择某个选项时，链接的文档或文件打开（可选）“转到”按钮 插入跳转菜单 打开一个文档，然后将插入点放在“文档”窗口中 选择“插入”“表单”“跳转菜单 完成“插入跳转菜单”对话框，然后单击“确定”。下面列出部分选项 加号和减号按钮 箭头按钮 文本 选择时，转到 URL 打开 URL 菜单之后插入前往按钮 更改 URL 后选择第一个项目 编辑跳转菜单项 如果属性检查器尚未打开，请打开属性检查器 在“文档”窗口的“设计”视图中，单击跳转菜单对象以选择它 在属性检查器中，单击“列表值”按钮 使用“列表值”对话框更改菜单项，再单击“确定”2.5.5导航条 导航条是由一个图像或一组图像组成，这些图像的显示内容随用户动作而变化。导航条通常为在站点上的页面和文件之间移动提供一条简捷的途径 导航条导航条元素有四种状态一般 滑过 按下 按下时鼠标经过 插入导航条 选择“插入”“图像对象”“导航条 完成“插入导航条”对话框，然后单击“确定”。下面列出部分选项 导航条加号和减号按钮元素名称 一般、经过、按下和按下时鼠标经过 替换文本 按下时，前往的 URL 预先载入图像 页面载入时就显示鼠标按下图像 插入 使用表格 修改导航条操作过程如下修改导航条在活动页面中选择导航条。选择“修改”“导航条”。在“导航条元件”列表中，选择要编辑的项目。根据需要进行更改，然后单击“确定”2.5.6查找断开的、外部的和孤立的链接 检查当前文档中的链接 将此文件保存在本地 Dreamweaver 站点中的某个位置 选择“文件”“检查页”“链接”在“链接检查器”面板中，从“显示”弹出菜单中选择“外部链接”以查看其它报告 若要保存此报告，请单击“链接检查器”面板中的“保存报告”按钮 检查本地站点某一部分中的链接在“文件”面板中，从“当前站点”弹出菜单中选择一个站点 在“本地”视图中，选择要检查的文件或文件夹 查找断开的、外部的和孤立的链接右键单击(Windows)或者按住 Control 单击(Macintosh)一个选定的文件，然后从上下文菜单中选择“检查链接”“选定的文件/文件夹”在“链接检查器”面板中，从“显示”弹出菜单中选择“外部链接”以查看其它报告 若要保存报告，请单击“链接检查器”面板中的“保存报告”按钮 检查整个站点中的链接“文件”面板中，从“当前站点”弹出菜单中选择一个站点 选择“站点”“检查站点范围的链接 在“链接检查器”面板中，从“显示”弹出菜单中选择“外部链接”或“孤立的文件”，可查看其它报告 若要保存报告，请单击“链接检查器”面板中的“保存报告”按钮。2.5.7修复断开的链接 在链接检查器面板中修复链接运行链接检查报告 在“链接检查器