教学材料《网页》-第二章

模块2Dreamweaver网页制作2.9层布局2.10CSS样式2.11行为2.12使用模板2.13库上一页2.1Dreamweaver概述Dreamweaver是编辑网页的软件，借助它能够以直观的方式制作网页。Dreamweaver提供了强大的网站管理功能，许多专业的网站设计人员都将Dreamweaver作为创建网站的首选。Dreamweaver,Flash(网页动画制作软件)和Fireworks(网页图像处理软件)构成了网页制作方面的3大利器，被称为网页三剑客。它们同为美国Adobe公司的产品。Dreamweaver提供了开放的编辑环境，能够与相关软件和编程语言协同工作，所以使用Dreamweaver可以完成各种复杂的网页编辑工作。返回下一页上一页2.1Dreamweaver概述2.1.1DreamweaverCS3的特点目前最新的Dreamweaver版本是DreamweaverCS3，它是Adobe公司在并购Macromedia之后推出的。与以前的版本相比，DreamweaverCS3具有以下特点。(1)适合于Ajax的Spry框架。使用适合于Ajax的Spry框架，以可视化方式设计、开发和部署动态用户界面。在减少页面刷新次数的同时，增强了交互性和可用性。(2)Spry数据。使用XML将RSS服务或数据库的数据集成到Web页中。集成的数据很容易进行排序和过滤。(3)Spry窗口组件。借助适合于Ajax的Spry框架的窗口组件，轻松地将常见界面组件(如列表、表格、选项卡、表单验证和可重复区域)添加到Web页中。返回下一页上一页2.1Dreamweaver概述(4)Spry效果。借助适合于Ajax的Spry效果，轻松地向页面元素添加视觉过渡，以扩大选取、收缩、渐隐、高光等。(5)可以使用AdobePhotoshop或Fireworks中的文件。可以将在AdobePhotoshopCS3或FireworksCS3中已完成的资源直接复制并粘贴到DreamweaverCS3中。(6)浏览器兼容性检查。借助全新的浏览器兼容性检查，进一步确保了跨浏览器和操作系统的一致体验;生成识别各种浏览器中与CSS相关的问题报告，而不需要启动浏览器。(7)CSSAdvisor网站。借助CSSAdvisor网站(提供解决方案和见解的一个在线社区)，可以查找浏览器特定CSS问题的快速解决方案。(8)CSS布局。借助CSS布局，将CSS轻松合并到项目中。在每个模板中都有大量的注释解释布局，有助于初级和中级设计人员快速掌握。也可以为项目自定义每个模板。返回下一页上一页2.1Dreamweaver概述(9)CSS管理。轻松移动CSS代码:从行中到标题，从标题到外部表，从文档到文档，或在外部表之间。可以比较容易地清除较旧页面中的CSS。(10)AdobeDeviceCentralCS3。使用AdobeDeviceCentral(现在已集成到整个Adobecreativesuite3中)设计、预览和测试移动设备内容。2.1.2Dreamweaver对主流技术的支持1.支持模拟服务器环境支持如IIS、Apache和ColdFusion等一些主流的服务器环境，满足不同的服务器环境开发要求。2.支持ASP,PHP和Java等主流技术支持ASP,PHP和Java等主流技术，可以在Dreamweaver中直接使用这些技术开发相关动态网页。返回下一页上一页2.1Dreamweaver概述3.支持数据库在Dreamweaver中可以直接连接到数据库。正确设置服务器环境后，通过Dreamweaver可以直接连接到数据库中进行动态网页的制作。4.支持多数的网页媒体Dreamweaver可以完美支持常见的网页多媒体格式，如图片、Flash影片、MP3音乐等都可以通过Dreamweaver直接添加，并能够进行即时测试。5.网页发布系统Dreamweaver支持多种上传文件到服务器的方式，例如最常用的FTP上传文件方式。可以直接在Dreamweaver中选择和设置上传文件到服务器的方式，在Dreamweaver中完成所有的网页制作和上传发布的操作。返回上一页2.2Dreamweaver的工作界面熟悉Dreamweaver的工作界面是深人学习使用该软件制作网页的基础。本节先整体介绍Dreamweaver的工作界面，然后重点介绍工具栏、文档窗口、对象面板以及浮动面板等重要界面元素。2.2.1Dreamweaver界面启动DreamweaverCS3并新建一个页面时，其界面如图2-1所示。1.菜单栏菜单栏提供了程序功能的选项命令，可以通过菜单栏中的命令完成某项特定操作。返回下一页2.2Dreamweaver的工作界面2.插入栏插入栏中包含了用于创建各种不同类型网页对象的按钮，例如插入图像、表格、AP元素(层)、动画等。相应功能也可以通过“插入记录”菜单实现。要显示或隐藏插入栏，应选择“窗口”∣“插入”命令。3.文档工具栏文档工具栏包含一些按钮，它们提供各种“文档”窗口视图(如“设计”视图和“代码”视图)的选项、各种查看选项和一些常用操作(如在浏览器中预览)。4.文档窗口文档窗口用来显示、创建和编辑当前文档。在这里用户可以通过菜单命令、插入栏、属性检查器以及面板组等工具来制作网页，文档显示结果与在浏览器中的显示结果基本相同。返回下一页上一页2.2Dreamweaver的工作界面当文档窗口有标题栏时(也就是说文档窗口不是以最大化方式显示)，标题栏中会显示文件的路径和文件名。当文档窗口在工作区中处于最大化状态时，它没有标题栏。在这种情况下，文件的路径和文件名显示在主工作区窗口的标题栏中。此时，如果有多个文件同时打开，文档窗口顶部会显示选项卡，上面显示了所有已打开文档的文件名。若要切换到某个文档，单击相应选项卡即可。不论是否在最大化方式下显示，如果对文档做了更改但尚未保存，则Dreamweaver会在文件名后显示一个星号(在标题栏或者选项卡)。返回下一页上一页2.2Dreamweaver的工作界面5.状态栏状态栏中包括标签选择器、选取工具、手形工具、缩放工具、设置缩放比率、窗口大小、文档大小和估计的下载时间等工具。6.属性检查器属性检查器也叫属性面板，其中显示的是当前被选取对象的各种属性，用户可以随时进行修改。设置对象属性时，只要在相应属性选项中输入数值或者进行选择即可。如果对象属性没有完全显示，可单击属性面板左侧的，按钮使其显示所有属性。用户对属性进行的修改多数会立即在文档窗口中应用，但有些属性在修改完之后可能需要在属性编辑文本框之外的地方单击一下，或者按回车键确认后才能应用。返回下一页上一页2.2Dreamweaver的工作界面7.面板组Dreamweaver面板提供了重要功能的快捷访问方式。例如，使用“CSS样式”面板可以方便快捷地进行CSS样式的创建管理等工作。面板组是组合在一个标题下面的相关面板的集合。若要展开一个面板组，可单击组名称或组名称左侧的展开箭头;若要将面板组从当前停靠位置移开，可拖动该面板组的标题条左边缘的手柄。如果需要使用的面板不在工作区中，可以选择“窗口”菜单中的相应命令将其显示。如果想隐藏所有的面板(包括插入栏和属性检查器)，以获得更大的工作区域，可以按F4快捷键(对应于“窗口”∣"隐藏面板”命令)。返回下一页上一页2.2Dreamweaver的工作界面如果工作区中的面板摆放凌乱，想恢复到初始的工作区状态，可以选择“窗口”∣“工作区布局;∣+编码器”或“设计器”命令。“编码器”布局适用于以HTML方式编辑网页，而“设计器”布局适用于以所见即所得的方式编辑网页。如果想将当前状态保存为一种工作区布局，以便以后能够快速恢复到该状态，可以选择“窗口”∣“工作区布局”∣“保存当前”命令。保存了工作区之后，该工作区选项将出现在“窗口”∣“工作区布局”菜单中，以后选择该选项即可恢复。8.文件面板文件面板用于管理文件和文件夹，是最常用的面板之一。文件面板既可以用于管理Dreamweaver站点，也可以用于管理远程服务器上的站点。文件面板还可用于访问本地磁盘上的全部文件，这与windows资源管理器很类似。返回下一页上一页2.2Dreamweaver的工作界面2.2.2插入栏如果将插入栏从原来的停靠位置移开，可以看到其显示如图2-2所示。插入栏包含用于创建和插入对象的按钮。当鼠标指针移动到按钮上时，会出现一个工具提示显示该按钮的名称。这些按钮被组织到若干类别中，可以单击插入栏顶部的选项卡进行切换。启动Dreamweaver时，系统会打开上次使用的类别。返回下一页上一页2.2Dreamweaver的工作界面某些类别具有带弹出菜单的按钮。从弹出菜单中选择一个选项时，该选项将成为按钮的默认操作。例如，如果从“图像”按钮的弹出菜单中选择“图像占位符”选项，那么在下次单击“图像”按钮时，Dreamweaver就会插入一个图像占位符。每次从弹出菜单中选择一个新选项时，该按钮的默认操作都会改变。插入栏一般按以下7个类别进行组织。(1)常用:用于创建和插入最常用的对象，例如图像和表格。(2)布局:用于插入表格、div、标签、框架和Spry构件等。还可以在此处选择表格的两种视图—标准(默认)表格和扩展表格。(3)表单:用于创建表单和插入表单元素(包括Spry验证构件)。返回下一页上一页2.2Dreamweaver的工作界面(4)数据:用于插入Spry数据对象和其他动态元素，例如记录集、重复区域以及插入记录表单和更新记录表单。此功能用于制作动态网页。(5)Spry:包含用于构建Spry页面的按钮，包括Spry数据对象和构件。Spry技术是综合应用HTML,CSS,JavaScript和XML的一种高级技术，适用于专业或高级的非专业网站设计人员。(6)文本:插入各种文本格式和列表格式的标签，如b、em、p、hl和ul.(7)收藏夹:用于将插入栏中最常用的按钮组织到此处。在插入栏任意类别的按钮上右击，选择“自定义收藏夹”命令，可以将自己常用的插入栏按钮组织到收藏夹中。返回下一页上一页2.2Dreamweaver的工作界面2.2.3工具栏Dreamweaver中包括文档工具栏、标准工具栏和样式呈现工具栏，在代码视图中还包括一个编码工具栏。在插入栏或任意一个工具栏上右击，可以从弹出的快捷菜单中选择显示或隐藏某种工具栏(包括插入栏)。编码工具栏选项只有在代码或者拆分视图时才出现。1.文档工具栏文档工具栏如图2-3所示。以下是各选项的说明:(1)显示代码视图。只在文档窗口中显示代码视图。Dreamweaver代码视图实际是一个非常优秀的HTML编辑器，用户可以利用代码提示、自动完成等功能方便地完成HTML代码的编辑，如图2-4所示。返回下一页上一页2.2Dreamweaver的工作界面(2)显示代码视图和设计视图。将文档窗口拆分为代码视图和设计视图。当选择了这种组合视图时，“视图选项”菜单中的“在顶部查看设计视图”选项变为可用。这种视图适用于综合使用HTML代码和所见即所得方式进行网页编辑。(3)显示设计视图。只在文档窗口中显示设计视图。如果处理的是CSS,JavaScript或XML这种基于代码的文件类型，则不能在“设计”视图中查看文件，此时“设计”和“拆分”按钮将会变暗，表示无法使用。设计视图适用于以所见即所得方式编辑网页。选择“窗口”∣“代码检查器”命令可以在一个单独的窗口中查看HTML代码，如图2-5所示。(4)网页标题。用于设置文档标题。文档标题将显示在浏览器的标题栏中。(5)文件管理。显示“文件管理”菜单，实现本地和远程服务器的文件管理功能。返回下一页上一页2.2Dreamweaver的工作界面(6)在浏览器中预览/调试。用于在浏览器中预览或调试网页。单击该按钮，从菜单中选择一个浏览器即可。如果在菜单中选择“编辑浏览器列表”命令，则将打开如图2-6所示的“首选参数”对话框，在其中的“在浏览器中预览”选项区域中可以设置浏览器预览选项。(7)刷新设计视图。如果在代码视图中对网页文档进行了编辑，单击此按钮可以刷新文档的设计视图。(8)视图选项。根据当前设计的是视图还是代码视图，此菜单中的选项不同。如果是拆分视图，则显示所有选项，如图2-7所示。这些选项用于控制文档窗口中的一些辅助信息的显示，例如设计视图中的标尺和网格、代码视图中的行数和自动缩进等。返回下一页上一页2.2Dreamweaver的工作界面(9)可视化助理。可视化助理是在设计视图制作网页时为方便用户操作而显示的一些辅助信息，如图2-8所示。例如，显示表格边框(如果表格边框设置为0，则仍然用虚线显示，以便用户操作)或AP元素轮廓线等。(10)验证标记。用于验证当前文档、本地站点或站点中选定的文件。验证是指按照文档所指定的规范(例如XHTML1.0Transitional、HTML4.0Strict等)对网页中的HTML代码进行验证，看是否符合相应规范。验证的结果将显示在“结果”面板的“验证”选项卡中，如图2-9所示。此项功能对于用手工编写HTML代码方式制作网页非常有用，因为确保网页符合相应规范是一个优秀网页的基本条件。如果使用设计视图自动生成的HTML代码，验证一般会轻松通过。但如果在代码视图手工修改了部分代码，那么使用验证功能还是很有必要的。返回下一页上一页2.2Dreamweaver的工作界面(11)检查浏览器兼容性。用于检查网页中的CSS是否对于各种浏览器均兼容。由于CSS技术在不同浏览器中的支持程度不同，因此本功能对于确保网页中的CSS能在不同浏览器中正确显示非常重要。默认情况下，本功能将对下列浏览器进行检查:Firefoxl.5,InternetExplorer(Windows)6.0和7.0、InternetExplorer(Macintosh)5.2、NetscapeNavigator8.O,Opera8.0和9.0以及Safari2.0。如果要更改检查选项，可以选择此菜单中的“设置”命令进行修改。同样，检查结果会在“结果”面板的“浏览器兼容性检查”选项卡(一般位于“验证”选项卡右边)中显示。2.标准工具栏标准工具栏包含一些按钮，可执行“文件”和“编辑”菜单中的常用操作，例如“新建”、“打开”、“保存”、“全部保存”、“剪切”、“复制”、“粘贴”、“撤销”和“重做”等，如图2-10所示。返回下一页上一页2.2Dreamweaver的工作界面3.样式呈现工具栏如果在制作网页时使用了依赖于媒体的样式表，那么就可以用样式呈现工具栏中的按钮查看页面在不同媒体类型中的呈现方式。此功能对于面向多种媒体(如电视、手机等)的设计十分有用。样式呈现工具栏中还包含一个允许启用或禁用CSS样式的按钮。4.编码工具栏编码工具栏包含可用于执行多种标准编码操作的按钮，例如折叠和展开所选代码、高亮显示无效代码、应用和删除注释、缩进代码、插入最近使用过的代码片断等。编码工具栏仅在代码视图(包括拆分视图中的代码视图)中才是可见的，它垂直显示在文档窗口的左侧。返回下一页上一页2.2Dreamweaver的工作界面2.2.4状态栏状态栏位于文档窗口底部，如图2-11所示。1.标签选择器状态栏左边是标签选择器，其中显示环绕当前选定内容的标签的层次结构。单击该层次结构中的标签就可以选择该标签及其全部内容。例如，单击<body>可以选择整个文档(因为在HTML中<body>标签是包含所有正文内容的标签)。标签选择器适用于在网页中精确选择特定部分，当然前提是掌握HTML语言。若要在标签选择器中设置某个标签的class或ID属性，可右击该标签，然后从弹出的快捷菜单中选择一个类或ID。返回下一页上一页2.2Dreamweaver的工作界面2.选取工具、手形工具和缩放工具默认状态下，选取工具是处于选中状态的。也就是说，此时可以用鼠标选取网页中的内容。如果选择手形工具，则可以在文档中拖动以查看文档。此时不能选择网页中的内容进行编辑。如果选择缩放工具，鼠标指针变为放大镜形状(其中有一个加号)，在文档窗口中单击可以放大显示。如果按住Alt键，鼠标指针变为其中显示减号的放大镜形状，单击文档窗口则可以缩小显示。选择“设置缩放比例”按钮，则可以在下拉列表中选择网页的显示比例。返回下一页上一页2.2Dreamweaver的工作界面3.窗口大小当文档窗口中的网页不是以最大化方式显示时，单击状态栏中的“窗口大小”按钮，可以将文档窗口的大小设为预设值或自定义值。例如，如果将窗口大小设置为“760x420(800x600,最大值)”，这样就能看出正在制作的网页在800x600分辨率下显示的效果。如果要自定义窗口大小，选择“编辑大小”命令，打开如图2-12所示的“首选参数”对话框，在其中的“状态栏”选项区域可以进行设置。返回下一页上一页2.2Dreamweaver的工作界面4.预计文件大小与下载时间在状态栏最右边显示的是当前正在编辑的文件的预计大小与下载时间，此信息有助于网页设计者控制文件大小。预计大小是Dreamweaver根据网页中的所有内容(包括所有相关文件，如图像和其他媒体文件)计算出来的，而下载时间是根据当前设置的Internet连接速度计算的(实际的下载时间取决于具体的Internet连接)。如果要设置连接速度，可选择“编辑”∣“首选参数”命令，然后选择“状态栏”选项，参见图2-12。当然也可以直接单击“窗口大小”按钮，然后选择“编辑大小”命令。默认的连接速度是56Kb/s，如果能明确知道目标用户的连接速度(例如网站用于企业内部网)，则可以将速度设置得高一些。返回下一页上一页2.2Dreamweaver的工作界面2.2.5站点管理器网页保存于站点中，设置页面前应先创建站点。用Dreamweaver创建站点的方法是在本地磁盘上创建并编辑网页，然后将编辑好的页面保存在本地磁盘的一个文件夹内，此文件夹就定义为站点，最后将此站点上传到远程web服务器中供用户访问。站点的创建及管理都是通过站点面板来进行的。1.创建站点返回下一页上一页2.2Dreamweaver的工作界面选择“站点”、“新建站点”命令，弹出“网页设计的站点定义为”对话框，在此对话框中可进行站点的创建。创建一个站点就是对该站点进行定义，站点定义的完整内容分为以下10个部分:“本地信息”、“远程信息”、“测试服务器”、“遮盖”、“设计备注”、“站点地图布局”、“文件视图列”、Contribute,“模板”和spry，如图2-13所示，其中“本地信息”、“远程信息”、“站点地图布局”需要根据具体情况来设置。这里涉及两个重要的概念:本地站点和远程站点。本地站点就是为了设计站点而在本地计算机上建立好的文件规划，包括分类文件夹、页面文件及素材等;远程站点是指本地站点建成并测试后，上传到服务器中的空间的站点规划。本地站点和远程站点具有完全相同的结构。返回下一页上一页2.2Dreamweaver的工作界面2.管理站点完成了本地站点规划设计后，就可以将创建或收集的素材分别放进对应的文件夹中了。选择“站点”∣“站点管理”命令，在弹出的“管理站点”对话框中实现站点的管理功能，如图2-14所示。站点的管理包括:新建、编辑、复制、删除、导入和导出操作。3.站点文件管理建立站点后，主要就是进行站点文件的管理工作，Dreamweaver提供了专门的文件管理窗口，方便地对本地站点和远程站点的文件进行管理。选择“窗口”∣“文件”命令来实现站点文件的管理，如图2-15所示。可通过菜单就可以实现文件和站点管理的全部功能，特别是本地站点设计完成后，可通过此文件窗口链接远程服务器，完成对站点文件的测试、上传和下载等工作。返回下一页上一页2.2Dreamweaver的工作界面HTML知识—网页结构<HTML><HEAD><TITLE>初学网页制作</TITLE><Meta></HEAD><BODY>BODY之间则为网页的主要内容。</BODY></HTML>返回下一页上一页2.2Dreamweaver的工作界面一份完整的网页通常包含两个部分:页面头(HEAD)和文件体(BODY)。也就是上面所示的<HEAD></HEAD>以及<BODY></BODY>。在<HEAD></HEAD>中，有另一组标签<TITLE></TITLE>。在<TITLE></TITLE>中间的文字会出现在浏览器窗口的最上面，是网页的名字。HTML标签不区分大小写。返回上一页2.3网页中的文本文字是网页发布信息所用的主要形式，一个网站的主题、内容等都需要通过文字来表达。但是没有排版点缀的纯文字网页，会显得单调呆板，因此网页文字一定要注意排版，排版包括文字的样式、大小、颜色以及内容的层次样式等。2.3.1文本的操作文本操作包括文本的插入、特殊符号的插入以及日期的插入等。下面介绍具体的操作方法。1.插入文本在DreamweaverCS3中插入文本有两种常见的方法:一种是直接在文档窗口中输入文本;另一种是粘贴其他编辑器中生成的文本。返回下一页2.3网页中的文本1)直接在文档窗口中输入文本将光标定位到文档窗口中要插入文本的位置，然后直接输入文本，如图2-16所示。在输入文字时，如果需要分段换行则需按Enter键。如果要输入多个连续的空格，则需要选择“首选参数”对话框中“常规”选项卡中的“允许多个连续的空格”复选框，或者将输入法设为全角状态，才能输入多个连续的空格。2)粘贴其他编辑器中生成的文本首先在其他编辑器(如Word,记事本)中复制文本，然后将光标移动到要插入文本的位置，选择“编辑"∣“粘贴”命令，如图2-17所示，完成文本的插入。返回下一页上一页2.3网页中的文本2.插入特殊字符制作网页时，有时需要输入一些键盘上没有的特殊字符，如并列符号、注册商标等，插入特殊字符可按如下步骤操作。(1)在文档窗口中，将光标定位在需要插入特殊字符的位置。(2)选择“插入记录”∣HTML∣“特殊字符”命令，在其级联菜单中选择合适的字符命令，如图2-18所示;或将“插入”栏切换至“文本”面板，在面板中选择“字符”

下拉菜单中的字符命令，如图2-19所示，即可在光标处插入字符。(3)如果在该下拉菜单中没有找到需要的字符，则可选择“其他字符”命令，打开“插入其他字符”对话框，如图2-20所示，选择需要的特殊字符，然后单击“确定”按钮。返回下一页上一页2.3网页中的文本3.插入日期在DreamweaverCS3中可以插入日期，在保存文档时，日期还可以自动更新，具体操作步骤如下。(1)将光标定位到要插入日期的位置。(2)选择“插入记录”∣“日期”命令，打开“插入日期”对话框，如图2-21所示，从中选择日期格式。(3)单击“确定”按钮后，将在网页上显示插入日期的效果，如图2-22所示。4.插入水平线水平线的作用是分隔文本。选择“插入记录”∣HTML∣“水平线”命令，就可以在Dreamweaver的设计视图中插入一条水平线，把页面上的不同板块分隔。选中“水平线”，打开“属性”面板，如图2-23所示，可以设置水平线的宽度、高度、类型、对齐方式以及是否有阴影。返回下一页上一页2.3网页中的文本在“属性”面板中只能设置黑色的水平线，如果要改变水平线的颜色，需要在代码视图中对水平线的代码进行修改，而且水平线的颜色效果只有在浏览器中才能显示。HTML知识—水平线水平线的HTML标记符为<hr>，它包括了以下属性:(1)Size用来设置水平线的粗细程度。(2)width用来设置水平线的长度。(3)noshade用来使水平线以实线显示，即不需要阴影。(4)solo:用来设置水平线的颜色。(5)align用来设置水平线的对齐方式。例如，将水平线的显示颜色设置成红色。要完成上述功能要求，需要在代码视图中找到水平线标记符<hr>，在其中添加color属性:<hrcolor=red>.返回下一页上一页2.3网页中的文本5.设置文本属性在Dreamweaver中，可以通过直接输入的方式添加文本，也可以从其他文字处理软件中复制文本。这里讲解设置文本的字体、字号和颜色等属性的方法。1)设置字体设置文本字体的方法如下:如图2-24所示，选择文本(如果不选择文本，则会对输入点以后输入的文本应用此设置)，在文本属性面板的字体栏选择目标字体。返回下一页上一页2.3网页中的文本字体列表:每个列表含有多种字体，排在行首的为显示网页时浏览器的首选字体，如果浏览者的电脑中没有安装这种字体，则会使用列表中排在第二位的字体，以此类推。如果找不到对应字体，就会以浏览器的默认字体显示。编辑字体列表:如向字体列表中增加字体及字体组合。如果字体列表中没有需要的字体或字体组合，可以按下列方法来增加一种字体或字体组合:1)选择“文本”∣“字体”▕“编辑字体列表”命令，打开图2-25所示的编辑字体列表对话框。(2)选择要添加的字体，单击“添加字体”按钮。(3)重复步骤(2)的操作可增加一个字体组合，单击“确定”按钮，关闭对话框。注:为使网页的字体被浏览者的电脑所支持，可将少量的特殊文字做成图片使用。返回下一页上一页2.3网页中的文本2)设置字号设置字号的方法如下:选择文本(如果不选择文本，则会对输入点以后输入的文本应用此设置)，如图2-26所示。单击属性面板中“大小”栏的下拉按钮，在弹出的列表中选择目标字号。·无:取消设置后会按默认字号显示。“9至36;8个级别字号。可以单击“大小”栏的内部，然后直接输入数字设置文本的字号大小。·极小至极大:提供web页最常用的字号大小。·字号单位:提供了几种设置字号大小的度量单位。一般字号大小的度量单位以点数(pt)来衡量，一点约等于0.25毫米。返回下一页上一页2.3网页中的文本如图2-27所示，以数字设置字号大小时，右侧的字号单位被激活，单击该下拉按钮会弹出字号单位选择列表。3)设置文本颜色设置文字颜色的方法如下。选择文本(如果不选择文本，则会对输入点以后输入的文本应用此设置)，单击属性面板中的颜色按钮，打开图2-28所示的颜色样本，在该样本中选择所需的颜色。如果知道颜色的RGB值，也可直接在颜色按钮右侧的文本框内输入目标色彩值，如:#OOCCCC.对于颜色样本中没有的颜色，可以按下列方法自定义所需的颜色。1)选择“文本”∣“颜色”命令，打开图2-29所示的“颜色”对话框。返回下一页上一页2.3网页中的文本(2)单击目标颜色，设置所需的色阶。(3)单击“确定”按钮，关闭对话框，所选颜色即应用到当前设置。注:Dreamweaver提供的颜色样本中的颜色为Web安全色(如图2-28所示)。当计算机运行在256色的模式下时，IE和Netscape两大浏览器能显示的只有216色，故将这216色称为Web安全色。为了提高网页的兼容性，建议选用Dreamweaver颜色样本中的颜色6.设置字符样式在文字的属性面板中只有粗体和斜体两种字符样式，要设置更多的样式，可选择“文本”∣“样式”命令，从“样式”的级联菜单中选择目标样式，如图2-30所示。返回下一页上一页2.3网页中的文本各个样式允许任意地组合，如可将“样式”子菜单中的“斜体”和“下划线”同时勾选。注:有的样式会在不同的浏览器中显示不同的格式，如“强调”样式在InternetExplorer中显示为抖体，而在NetscapeNavigator中显示为粗体。7.定义段落格式定义段落格式用以将文本定义为普通的段落格式、标题格式或预格式化段落，这里以一个实例说明:(1)输入一段文字。(2)单击工具栏中文档面板的拆分按钮，同时打开代码和设计视图。(3)选择一段文字，单击属性面板中“格式”框右侧的下拉按钮，从列表中选择“段落”。返回下一页上一页2.3网页中的文本注:也可以单击插入面板的“段落”按钮，添加段落标识。经过上述操作，设计窗口中的文字格式没有发生任何变化，只是在代码视窗里可以发现这段文字两端添加了<p>与</p>标记如图2-31所示。·无:取消定义的段落格式。·段落:定义为普通段落，自动在文本两端添加段落标记<p>和</p>。·标题:将文本定义为相应级别的标题。如选择“标题3”则自动在文本两端添加标题标记<h3>和</h3>。·预先格式化的:将文本两端添加预先格式化的标记<Pre>和</Pre>，可预先对标记内的文本进行格式化，浏览器显示网页时也将按文本原格式显示。利用预先格式化的特性可以非常方便地连续输入多个空格或制表符。返回下一页上一页2.3网页中的文本注:使用文本预格式化有一个弊端，预格式化后的文本不会随浏览窗口的变化而自动换行，但可以随意输入多个空格。8.段落对齐如图2-32所示，段落的对齐有4种方式，它们分别为左对齐、居中对齐、右对齐、两端对齐，具体的操作方法如下:先输入一段文本，然后将光标置于文本中的任意位置，单击文字属性面板中相应的段落对齐方式按钮，效果如图2-33所示。9.段落缩进段落的缩进有两种方式，即缩进、凸出。具体的操作方法如下:先输入一段文本，然后将光标置于文本中的任意位置，单击文字属性面板中的文本凸出按钮或文本缩进按钮，如图2-34所示。返回下一页上一页2.3网页中的文本2.3.2设置列表格式列表是非常实用的文本排版格式，它常被用来格式化网页中包含逻辑关系的文本信息。在Dreamweaver中，可以使用属性面板上的列表格式按钮方便地将文字设置为列表格式。网页中常用的列表格式分为项目列表、编号列表和嵌套列表。1.项目列表项目列表也称无序列表或强调列表，它是一种在文本段落前显示有特殊项目符号的缩排列表。以下用“杜甫《望春》”为例进行说明。返回下一页上一页2.3网页中的文本(1)在设计窗口中，将光标定位到第三行，可以看到属性检查器中的“项目列表’，按钮处于按下状态，表示当前内容是一个项目列表。如果要取消项目列表，可以在选中相应段落后，再次单击“项目列表’，按钮。(2)单击属性检查器右下角的按钮将其扩展，单击其中的“列表项目”按钮，打开如图2-35所示的“列表属性”对话框。(3)在“样式”列表中选择“圆形”，然后单击“确定”按钮。注意该对话框中的“列表项目”框中的选项是设置项目列表中某个具体项的格式的，但由于同一个项目列表通常要求显示一致，因此一般不使用。(4)效果如图2-36所示。返回下一页上一页2.3网页中的文本项目列表中的项目符号还可以是其他样式，例如可以用一个小图标作为项目符号，但这需要使用CSS技术，具体请参见本书第4章。2.编号列表编号列表也称有序列表，它是一种在文本段落前显示有编号的缩排列表。(1)选中“杜甫《春望》”下的诗句，也可以只选中部分，但要确保每段都有内容选中。(2)在属性检查器中单击“编号列表”按钮，则将文字转换为了编号列表。此时Dreamweaver会自动取消原来设置的居中对齐格式，单击属性检查器上的“居中对齐”按钮各列表对齐。返回下一页上一页2.3网页中的文本(3)在列表中单击，然后单击属性检查器中的“列表项目”按钮，打开如图2-37所示的“列表属性”对话框。在“样式”下拉列表框中选择“小写罗马字母”选项，然后单击“确定”按钮。该对话框中的“开始计数”选项用于设置编号从几开始计，此选项一般不常用。与项目列表类似，编号列表中的“列表项目”选项一般也不常用。(4)效果如图2-38所示。3.嵌套列表嵌套列表是指包含多个层次的列表，可以是项目列表的嵌套，也可以是编号列表的嵌套，还可以是混合嵌套。以下继续用“杜甫《春望》”为例进行说明。返回下一页上一页2.3网页中的文本(1)将光标定位到后面，按回车键，此时仍然处于项目列表状态，输入“[注解:]”。(2)按回车键，输入“国破:指国都长安被叛军占领。”。(3)用同样方式分别输入“感时句:因感叹时事，见到花也会流泪。”“浑:简直。”“不胜簪:因头发短少，连答子也插不上。”(4)选中从“国破:指国都长安被叛军占领。”到“不胜簪:因头发短少，连簪子也插不上。”的段落，单击属性检查器中的“文本缩进”按钮

，这时自动将选中段落转换为嵌套的编号列表，如图2-39所示。如果要取消嵌套，则可以在选中嵌套列表的所有项目时单击属性检查器中的“文本凸出”按钮

。返回下一页上一页2.3网页中的文本(5)选中从“国破:指国都长安被叛军占领。”到“将进酒”的段落，单击“编号列表”按钮

，则转换为混合嵌套列表，如图2-40所示。当然，对于嵌套列表也可以更改列表项目的符号或编号样式，请读者自行尝试。2.3.3文本移动当网页中要突出重要文字时，经常会让重要的文本动起来，以引起浏览者的关注。移动文本，最简单有效的方法是运用HTML的移动文本标记<marquee>，方法如下。(1)选定要移动的文本。(2)单击“插入”工具栏中“常用”工具栏的标签选择器按钮，弹出“标签选择器”对话框。返回下一页上一页2.3网页中的文本(3)在“标签选择器”对话框左侧的列表框中展开“标记语言标签”∣“HTML标签”，单击“页元素”，在右侧的列表框中选择marquee，如图2-41所示。单击“插入”按钮，就可以在光标处插入<marquee>标记了。(4)把光标定位在要移动的文本内部，打开标签检查器面板，打开“属性”选项卡，展开“未分类”，就可以进行移动文本的属性设置了，如图2-42所示。文本移动的属性设置如下:(1)文本从右向左移动(默认移动方式)。标签检查器面板中不做任何设置，代码视图中的代码为:<marquee>文本从右向左移动</marquee>返回下一页上一页2.3网页中的文本(2)文本从左向右移动。……标签检查器面板中设置属性，direction为right，代码视图中的代码:<marqueedirection="right">文本从左向右移动</marquee>说明:文本移动方向由属性，direction决定，滚动的方向属性值的含义分别是:up=向上,down=向下，left=向左，right=向右。(3)文本移动面积设定在标签检查器面板中，设置属性，direction为up,width为200,Neigh[为200，代码视图中的代码为:<marqueedirection="up"width="200"height="200">文本从下向上移动</marquee>说明:文本移动面积由属性height和width决定，单位为像素。返回下一页上一页2.3网页中的文本(4)文本移动面积背景颜色设定和文本颜色设定。在标签检查器面板中设置属性bgcolor为red,属性style为color;#e6e8fa，代码视图中的代码为:<marqueedirection=“up”bgcolor=“red"style=“color:#c6c8fa"width=“200”height="200">文本从下向上移动</marquee>说明:文本移动面积的背景颜色由bgcolor属性决定，取值为6位十六进制数或颜色值(black,red,blue,gray,while,green,yellow等)，文本的格式由属性style决定。返回下一页上一页2.3网页中的文本(5)文本移动速度设定。在标签检查器面板中设置属性scrollmount为5,属性scrolldelav为5，代码视图中的代码为:<marqueedirection=“up"bgcolor=“red"style=“color:#c6c8fa"width=“200”height="200"scrollmount="5"scrolldelay="5">文本从下向上移动</marquee>说明:文本移动速度由属性scrollmount和scrolldelav决定，也就是移动的速度，数值越大，移动越快。返回下一页上一页2.3网页中的文本(6)移动文本对齐方式设定。在标签检查器面板中设置属性algin为top，代码视图中的代码为:<marqueealign=“top”direction=“up”bgcolor=“red”style=“color:#e6e8fa"width="200"height="200"scrollmount="5"scrolldelav="5">文本从下向上移动</marquee>说明:移动文本对齐方式由align属性决定，align可分别取值为:absboUom=绝对底部对齐、absmiddle=绝对居中对齐、baseline=与上级元素的基线对齐、bottom=底部对齐、left=左对齐、middle=居中对齐、right=右对齐、texttop=文本上方对齐、top=顶端对齐。返回下一页上一页2.3网页中的文本(7)文本移动模式设定。在标签检查器面板中设置属性behavior为slide，代码视图中的代码为:<marqueebehavior=“slide"bgcolor=“red”width=“200”height="200”style=“color:#e6e8fa">文本从下向上移动</marquee>说明:文本移动模式由behavior属性决定，behavior可分别取值为:scroll=向左移动，slide=运动一次，alternate=来回运动。(8)文本移动控制设定。在标签检查器面板中设置相应属性，代码视图中的代码为:返回下一页上一页2.3网页中的文本<marqueeonmouseover=“this.stop();”onmouseout=“this.Start();”bgcolor=“red”width="200“height="200"style="color;#e6e8fa">鼠标移到文本上时停止，移开时继续移动</marquee>说明:文本移动的控制可以通过添加行为和事件决定，this.slop)表示停止移动.this.Start()表示继续移动，onmouseover和onmouseoul代表鼠标的行为，用户还可以自行设定更多的行为，例如，onclick等。返回下一页上一页2.3网页中的文本"HTML知识—marquee标记marquee标记中常用的属性如下。·width和Neighl:定义对象移动区域的宽度和高度，可以用像素值和百分比来表示。"align:指定移动对象和周围对象对齐的方式。·behavior:定义移动对象行为发生的触发点。"bgcolor:定义移动区域的背景。"direction:定义移动方向。"hspace和、vspace:定义移动对象四周水平和竖直方向上的间隙。"loop:定义移动对象的重复次数。·scrollmount:定义移动对象步长的像素数。·scrolldelay:指定两次移动间的延时时间(单位:ms).返回下一页上一页2.4在网页中插入图像Web中通常使用的图像格式有GIF,JPEG和PNG.GIF以减少显示颜色数目而不降低图像品质的方式来压缩文件的大小，最多为256色，支持透明背景。GIF还支持动画格式。JPG又称JPEG，是一种有损压缩，图像的细节将被忽略，以缩小图像的大小，在一定的压缩率下，肉眼是很难分辨出区别的。JPG可显示的颜色数目高达16亿7千多万色。PNG文件可保留所有的原始层、矢量、颜色和效果信息，并且保持可以编辑的状态。它包括对索引色、灰度、真彩色图像以及Alpha通道透明的支持。返回下一页上一页2.4在网页中插入图像2.4.1插入图像插入图像的方法如下:(1)在文档中单击设置插入点。(2)打开“插入”工具栏中的“常用”选项卡，单击“图像”下拉按钮，从列表框中选择“图像”命令，如图2-43所示。(3)在打开的“选择图像源文件”对话框中选择图像文件。(4)单击“确定”按钮，将打开“图像标签辅助功能属性”对话框，该对话框用于设置图像标签功能选项，如图2-44所示。(5)单击“确定”按钮。插入图片后的效果如图2-45所示。返回下一页上一页2.4在网页中插入图像2.4.2设置图像的属性选择文档中的图像，“属性”面板将显示图片的名称和大小等信息，如图2-46所示，可根据需要对图像进行设置，其中各选项的作用如下。·宽和高:设置图像的宽度和高度，单位为像素。·源文件:输入图像的源文件路径。可以绝对路径，也可以是相对路径。·链接:输入图像的内部和外部链接，可以是指向一个文件，或一个网页。·替换:输入图像的说明文字。当鼠标停留于图片上或者图像不能正常显示时，在其相应区域将显示说明文字。返回下一页上一页2.4在网页中插入图像类:选择应用已经定义好的CSS样式。地图:创建图像热点地图，包括矩形热点工具、椭圆形热点工具、多边形热点工具。垂直边距和水平边距:设置图像在垂直和水平方向上的空白间距，单位默认为像素。目标:设置链接文件显示的目标位置。低解析度源:指定在主图像被载入之前打开的低分辨率图像来源。边框:设置图像的边框宽度，单位为像素，如图2-47所示为将边框设置为3的效果对齐:默认的对齐方式下，文字沿着图片的底边排列，如选择“右对齐”选项的效果，图片会位于文本的右边，文字从左侧环绕图像。返回下一页上一页2.4在网页中插入图像2.4.3编辑图像选择页面中的图像后，可以利用“属性”面板中的图像编辑工具，对图像进行编辑，如图2-48所示，其中各按钮的作用如下。·编辑:单击该按钮，打开Photoshop软件图像对进行编辑。前提是已装有Photoshop软件。·优化:单击该按钮，对图像进行优化。·裁剪:单击该按钮，图像上会出现如图2-49所示的虚线区域，用鼠标拖动该虚线区域四周的角点，可以切割图像，如图2-50所示。返回下一页上一页2.4在网页中插入图像·重新取样:图像经过放大或缩小后，该按钮由灰色不可用状态变为可用状态，单击该按钮，可重新读取图片文件的信息。·亮度和对比度:可以对当前图像的亮度和对比度进行调整。单击该按钮，打开“亮度/对比度”对话框，如图2-51所示，根据需要调整“亮度”或“对比度”即可。·锐化:可以改变图像的清晰度，单击该按钮，打开“锐化”对话框，如图2-52所示，调整“锐化”前后的效果对比如图2-53所示。返回下一页上一页2.4在网页中插入图像2.4.4设置背景图像在网页中，可以把图像设置为网页的背景，让页面更加美观。设置背景图像的方法如下。(1)新建网页文档。(2)单击“属性”面板中的“页面属性”按钮，打开“页面属性”对话框。(3)单击“背景图像”文本框右边的“浏览”按钮，打开“选择图像源文件”对话框，从中选择需要的图像文件。(4)单击“确定”按钮，返回到“页面属性”对话框，如图2-54所示，此时“背景图像”文本框中会显示所选图像的路径。(5)在“重复”下拉列表框中，可选择图像在网页中的平铺方式，如图2-55所示。其中各选项的功能如下。返回下一页上一页2.4在网页中插入图像·不重复:选择该选项，将仅显示背景图像一次。·重复:选择该选项，横向和纵向重复平铺图像。·横向重复:选择该选项，可横向平铺图像。·纵向重复:选择该选项，可纵向平铺图像。(6)单击“确定”按钮，效果如图2-56所示。2.4.5鼠标经过图像在网页中，当鼠标移动到某一图像上时，该图像变成了另一幅图像;当鼠标移开时，又立即恢复成原来的图像，这就是所谓的“鼠标经过图像”。返回下一页上一页2.4在网页中插入图像插入鼠标经过图像的方法如下:(1)新建网页文档。(2)选择“插入记录”∣“图像对象”∣鼠标经过图像”命令，打开“插入鼠标经过图像”对话框，如图2-57所示。(3)单击“原始图像”文本框后面的“浏览”按钮，从打开的“原始图像”对话框中选择一幅图像，作为原始图像，然后单击“确定”按钮。(4)单击“鼠标经过图像”文本框后面的“浏览”按钮，从打开的“鼠标经过图像”对话框中选择一幅图像，作为鼠标经过时显示的图像。(5)单击“确定”按钮，返回“插入鼠标经过图像”对话框。再单击“确定”按钮，在文档中插入鼠标经过图像。(6)按ctrl+S组合键保存文档，按F12键就可以预览网页效果。返回下一页上一页2.5插入多媒体网页中可以插入的多媒体文件包括声音、影片、音频文件、视频文件、Flash对象、JavaApplet对象和ActiveX控件等。需要注意的是，网页上之所以能够播放音乐、影片等多媒体文件，并不是依赖浏览器本身的播放功能，而是取决于浏览器所安装的播放器插件。浏览者只有安装了多媒体对应的播放器插件，才能够正常播放多媒体文件。2.5.1插入音频在网页中可以插入mp3、rm、mid等格式的音频文件。在网页中加人音频文件的操作步骤如下:(1)将光标定位到要插入音乐文件的位置。(2)在“常用”工具栏中选择媒体—插件按钮

。返回下一页上一页2.5插入多媒体(3)在弹出的“选择文件”对话框的“查找范围”下拉列表框中选择文件所在的磁盘与文件夹，在列表中选择文件名，如图2-58所示，然后单击“确定”按钮。(4)回到Dreamweaver窗口，光标位置会出现图标。如果要添加的音乐是背景音乐，继续下面的步骤。(5)在“属性”面板中选择“参数”按钮，出现“参数”对话框后，在“参数”文本框中输入hidden，并在“值”文本框中输入true;在“参数”文本框中输入autostart，并在“值”文本框中输入true;在“参数”文本框中输入loop，并在“值”文本框中输入infinite;如图2-59所示，然后单击“确定”按钮。返回下一页上一页2.5插入多媒体2.5.2插入Flash动画有些网站打开后，会出现一段动画，这是在制作网页时，插入Flash动画文件所产生的效果。插入Flash动画文件的步骤如下:(1)将光标定位到要插入Flash文件的位置。(2)在“常用”工具栏中选择媒体:Flash按钮。(3)在弹出的“选择文件”对话框的“查找范围”下拉列表框中选择文件所在的磁盘与文件夹，在列表中选择文件名，如图2-60所示，然后单击“确定”按钮。返回下一页上一页2.5插入多媒体(4)回到Dreamweaver窗口，光标位置就会出现插入的动画文件的图标。通常在插入动画文件后，动画背景可能会与网页背景不同，这时可以利用参数设置将动画背景透明化。将Flash背景透明化的操作步骤如下:(1)选择动画文件，然后在属性面板上单击“参数”按钮。(2)出现“参数”对话框后，在“参数”文本框中输入wmode，并在“值”文本框中输入transparent，如图2-61所示，然后单击“确定”按钮。这样动画背景就会变得透明，能够融入到网页背景中了。返回下一页上一页2.5插入多媒体2.5.3添加背景音乐由于背景音乐并不是一种标准的网页属性，所以需要通过修改源代码的方式为网页添加背景音乐。(1)使用文件面板打开网站的首页index.htm，切换到代码视图。(2)在代码“<title>唐诗三百首</title>”之前添加以下代码:<bgsoundsrc=“media/bgsound.mid”loop=“1”>，如图2-62所示。bgsound标记符的基本属性是src，用于指定背景音乐的源文件，此处因为是当前文件夹下media文件夹中的文件，因此表示为media/bgsound.mid。另外一个常用属性是loop，用于指定背景音乐重复的次数;如果不指定该属性，则背景音乐无限循环。返回下一页上一页2.5插入多媒体(3)按F12键，在浏览器窗口中预览背景音乐效果。2.5.4链接声音与视频链接文件是将声音与视频添加到网页的一种简单而有效的方法。这种集成声音文件与视频文件的方法可以使访问者能够选择他们是否要收听或收看该文件，并且使文件可用于最广范围的观众，因为某些浏览器可能不支持嵌入的声音文件。(1)在页面诗同段落最后另起一段，输入文字“音频下载(128KB);。在提供下载链接时包含文件大小的数据可以为浏览者提供需要的信息，从而方便其决定是否下载。(2)选择输入的文字，在属性检查器中单击“链接”文本框后的“浏览文件”按钮，选择站点中media文件夹中的131.mp3音频文件，如图2-63所示。返回下一页上一页2.5插入多媒体(3)按Ctrl+S快捷键保存文档，按F12键，在浏览器窗口单击链接到声音文件的超链接，系统自动打开相应的媒体播放器播放链接的声音文件。网页上传到服务器后，在客户端浏览网页时单击该链接将获得下载效果。2.5.5嵌入声音与视频如果确定访问者安装有能播放相应格式文件的插件(例如RealMedia或QuickTime插件)，那么可以通过嵌入的方式将声音或视频直接插入到页面中，从而获得更多对媒体的控制(例如，可选择是否播放和设置音量)。(1)在段落“音频下载(128KB)”后，按回车键另起一段，输入文字“音频:”。(2)单击插入栏“常用”类别中的“媒体:插件”按钮。返回下一页上一页2.5插入多媒体(3)打开“选择文件”对话框，如图2-64所示。在“查找范围”框内选择131.mp3文件，然后单击“确定”按钮。(4)此时网页文档中有了一个占位图形。选择该图形，在属性检查器中的“宽”框内设置数值为100，在“高”框内设置数值为14，确定播放器在网页中的显示大小。(5)为了控制嵌入音频的默认播放状态，切换到“代码视图”或“拆分视图”，在<embed>标记符中输入autostart="false"，如图2-65所示。通过这样的设置，可以确保网页在加载时不播放嵌入的音频，把是否播放的选择留给浏览者。(6)按ctrl+S快捷键保存文档，按F12键在浏览器中预览效果。返回下一页上一页2.6设置超链接2.6.1超级链接路径创建超级链接时必须了解链接与被链接的路径。在一个网站中，路径通常有3种表示方式:绝对路径、根目录相对路径、文档目录相对路径。1.绝对路径绝对路径是被链接文档的完整URL，包括使用的传输协议，对于网页而言，通常是http;//。例如,http;//www.sina.com/index即是一个绝对路径。绝对路径包含的地址是精确地址，因此不需要考虑源文件的位置。如果目标文件被移动，则链接无效。创建外部链接时(即从一个网站的网页链接到其他网站的网页)，必须使用绝对路径。返回下一页上一页2.6设置超链接2.根目录相对路径根目录相对路径是指从站点文件夹到被链接文档经过的路径。站点上所有公开的文件都存放在站点的根目录下。根目录相对路径以斜杠“/”开头，表示站点文件夹。例如/web/index.htm是指站点文件夹下的Web子文件夹中的一个文件(index.htm)的根目录相对路径。使用根目录相对路径时，即使移动包含根目录相对链接的文档，链接也不会发生错误。返回下一页上一页2.6设置超链接3.文档目录相对路径文档目录相对路径对于大多数Web站点的本地链接来说，是最适用的路径。在当前文档与所链接的文档处于同一文件夹内，而且可能保持这种状态的情况下，文档相对路径非常有用。文档相对路径还可用来链接其他文件夹中的文档，方法是利用文件夹层次结构，指定从当前文档到所链接的文档的路径。使用文档相对路径可省去当前文档和被链接的文档在绝对URL中相同的部分，只保留不同部分。返回下一页上一页2.6设置超链接2.6.2网站内部链接一个网站通常会包含多个网页，各个网页之间可以通过内部链接使彼此之间产生联系。在DreamweaverCS3中，可以为文本或图片创建内部链接。设置内部链接的具体步骤如下。(1)选定要建立链接的文本或图像。(2)打开“属性”面板，单击“链接”文本框右侧的文件夹图标。打开“选择文件”对话框，如图2-64所示。或者在“链接”文本框中直接输入要链接内容的路径。(3)选择一个需要链接的文件，单击“确定”按钮，这时便建立了链接。默认链接的文字以蓝色显示，还带有下划线。返回下一页上一页2.6设置超链接2.6.3网站外部链接网站的外部链接是相对于内部链接而言的，指用户将自己制作的网页与Internet建立链接，这就需要知道要链接网站的网址。例如，要将页面中的文字与网易网站的主页建立超级链接，具体的操作方法与内部链接没有本质的区别，只需选中页面文字，在“属性”面板的“链接”文本框中输入http;//www.163.com即可。2.6.4创建电子邮件链接电子邮件链接的设置方法与其他链接的设置方法基本相同。唯一的区别是电子邮件链接并不是移动到特定的站点或网页文档，而是直接调用可发送邮件的程序。创建电子邮件链接的操作步骤如下。

返回下一页上一页2.6设置超链接(1)将光标定位到需要插入邮件地址的位置。(2)选择“插入记录”∣“电子邮件链接”命令，打开“电子邮件链接”对话框，如图2-66所示。(3)在“文本”文本框中输入邮件链接要显示在页面上的文本;在E-mail文本框中输入要链接的邮箱地址，如图2-67所示。(4)单击“确定”按钮，邮件链接就加到了当前文档中。2.6.5创建空链接如果制作网页只是为了测试一下页面，只要文本、图片等对象被加上了超级链接(而不一定必须设置具体的链接)时，就需要创建空链接。创建空链接的操作步骤如下。(1)选中需要创建空链接的文本，如图2-68所示。返回下一页上一页2.6设置超链接(2)在“属性”面板上的“链接”文本框中输入“#”号，如图2-69所示，就为“烽火”这两个字创建了空链接。按照同样的方法为其他文本创建空链接。按F12键浏览，将光标指向链接对象，光标会变成小手的形状。这好像是创建了超级链接的状态，其实它并不链接到任何网页及对象上。2.6.6创建锚记链接如果浏览一个内容很长的网页，需要上下拖动滚动条来查看网页的内容时，就会比较麻烦，使用命名锚记可以解决此问题。命名锚记使用户可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将浏览者带到指定位置。创建到命名锚记的链接过程分为两步:首先创建命名锚记，然后创建到该命名锚记的链接。返回下一页上一页2.6设置超链接1)创建命名锚记创建命名锚记的操作步骤如下。(1)将光标定位到要创建命名锚记的位置，如页面顶部。选择“插入记录”∣“命名锚记”命令，打开“命名锚记”对话框，如图2-70所示。(2)在“锚记名称”文本框中，输入锚的名称。(3)设置完成后，单击“确定”按钮。(4)这时可以在文档窗口中看到锚标记，如图2-71所示。如果在文档窗口中看不到锚标记，选择“查看”∣“可视化助理”∣“不可见元素”命令，使之可见。锚标记在文档中的位置还可以通过拖动鼠标来改变。锚标记的名称也可以在“属性”面板中进行更改。返回下一页上一页2.6设置超链接2)链接到命名锚记链接到命名锚记的操作步骤如下。(1)在网页文档中选择要建立链接的文本或图像，这里选择文档底部的文本，如图2-72所示。(2)打开“属性”面板，在“链接”文本框中输入锚记名称及其相应前缀。如果目标锚位于当前文档，则在“链接”文本框中先输入“#”号再输入链接的锚名称。如果目标锚位于其他文档中，则先输入该文档的URL地址和名称，再输入“#”号，最后输入链接的锚名称。此处目标锚位于当前文档中，在“链接”文本框中输入“#111"，如图2-73所示。(3)按F12键进行浏览，单击链接的文字即可回到页面顶部。返回下一页上一页2.6设置超链接HTML知识—插入的多媒体<object>标记不仅可以用来在页面中插入ActiveX控件，还可以插入其他的OLE对象，如图像、文档、动画、小程序等。语法格式如下。<OBJECTACCESSKEY=keyALIGN=ABSBOTTOM∣ABSMIDDLE∣BASELINE∣BOTTOM∣LEFT∣MIDDLE∣RIGHT∣TEXTTOP∣TOPCLASS=classnameCLASSID=id’对象位置的URLCODE=url返回下一页上一页2.6设置超链接CODEBASE=urlCODETYPE=media-typeDATA=urlDATAFT.D=colnameDATASRC=#IDHEIGHT=n对象的高度ID=valueLANG=languageLANGUAGE=JAVASCRIPT∣JSCRIPT∣VBSCRIPT∣VBSNAME=nameSTYLE=CSSl一propertiesTABINDEX=n返回下一页上一页2.6设置超链接TITLE=textTYPE=MIME一typeWIDTH=n对象的宽度event=script说明:在HTML文挡中插入一个对象，需要结束标记。<param>标记语法格式:<PARAMDATAFLD=colnameDATAFORMATAS=HTML∣TEXTDATASRC=#IDNAME=name参数的名字VALUE=value指定参数的值返回下一页上一页2.6设置超链接说明:给对象设置参数。对APPLET,EMBHD,OBJKCT有效。没有结束标志。用<object>标记在页面中插入ActiveX控件或其他对象之后，有时候需要向该对象或者控件传递参数，这就要使用<param>标记。<embed>标记语法格式如下。<EMBEDALIGN=ABSBOTTOM∣ABSMIDDLE∣BASELINE∣BOTTOM∣LEFT∣MIDDLE∣RIGHT∣TEXTTOP∣TOPALT=textCODE=filenameCODEBASE=urlHEIGHT=n返回下一页上一页2.6设置超链接HSPACE=nID=valueNAME=nameSRC=urlTITLE=textVSPACE=nWIDTH=n>返回下一页上一页2.6设置超链接"HTML知识超链接<a>标记语法格式如下。<AACCESSKEY=key’指定该元素的热键HREF=url’href属性中的统一资源定位符(url)是被指向的目标NAME=name’定义一个锚点TARGET=windows_name∣_blank∣_parent∣_self∣_top打开窗口>返回下一页上一页2.7表格布局网页中的表格除了具备传统的表格存放和规划数据的功能外，还可以用来定位网页元素，即可用于网页元素的排版。在网页设计中，表格以简洁明了的方式将网页设计的各种元素有序地组织在一起，使整个网页井井有条。2.7.1创建表格创建表格的方法如下:(1)新建一个HTML文档。(2)切换“插入”面板到“常用”选项卡。(3)单击插入面板的“