第5章 Dreamweaver与网络课件 Dreamweaver CS4此章节均为Dreamweaver CS4的学习以便于教学及自学者运用第5章 Dreamweaver与网络课件 5.1 5.1 概述概述 5.2 Dreamweaver CS45.2 Dreamweaver CS4的任务界面的任务界面 5.3 5.3 建立教学站点建立教学站点 5.4 5.4 编辑教学网页编辑教学网页 5.5 5.5 网页的规划方法网页的规划方法 5.6 5.6 表单表单5.7 5.7 教学站点的发布教学站点的发布第5章 Dreamweaver与网络课件 多媒体CAI课件的特点是集文本、图形图像、声音、动画及数字电影于一体，可谓声光电并存、声情画并茂。正由于如此，课件的体积往往很大，这与网络传输是相互矛盾的。由于网络传输速度的“瓶颈严重制约了大体积的“信息文件的传播与发送。所以，网络课件的制造原那么应该区别于其它方式的课件，以短小精悍为最高原那么；其次，由于网络课件的运用对象具有不可预知性，因此要求网络课件在言语上必需更规范、更准确，同时必需具有更好的引导性和交互性。 5.1 概概 述述第5章 Dreamweaver与网络课件 结实掌握了网络课件的制造原那么以后，接下来就是选择网络课件的制造工具了。目前可以用于制造网络课件的工具很多，几乎一切的网页制造软件都可以用于制造网络课件，例如FrontPage、Dreamweaver等，本章主要引见Dreamweaver CS4的运用技术。制造网络课件本质上就是建立教学站点，Dreamweaver CS4是目前最流行的一款所见即所得的网站开发与网页制造软件，在制造网络课件方面具有独到的优势。它是一款所见即所得的网页编辑工具，具有功能强大、界面简约、简单适用等特点，是最好的网页制造软件，也是制造网络课件的首选软件。 第5章 Dreamweaver与网络课件 Dreamweaver CS4提供了多种任务界面，以适宜不同的任务人员。第一次安装该软件并启动后，出现的任务界面如图51所示，该任务界面称为“设计器界面。对于老用户而言，假设不顺应这种任务界面，可以经过界面切换菜单进展切换，选择适宜本人的界面方式。本章将以“经典界面方式引见Dreamweaver CS4在网络课件中的运用，如图52所示。5.2 Dreamweaver CS4的任务界面的任务界面 第5章 Dreamweaver与网络课件 图51 “设计器界面第5章 Dreamweaver与网络课件 图52 “经典界面第5章 Dreamweaver与网络课件 由上图可以看出，Dreamweaver CS4的任务界面主要由菜单栏、【插入】工具栏、【文档】工具栏、编辑窗口、形状栏、【属性】面板和各种面板组构成，下面简单引见各主要组成部分。 第5章 Dreamweaver与网络课件 5.2.1 【插入】工具栏【插入】工具栏Dreamweaver CS4的【插入】工具栏中包含了的【插入】工具栏中包含了8个标签，分别为：常用、规划、表单、数据、个标签，分别为：常用、规划、表单、数据、Spry、InContext Editing、文本、收藏夹，如图、文本、收藏夹，如图5-3所示。所示。单击【插入】工具栏中的不同标签可以进展切单击【插入】工具栏中的不同标签可以进展切换，每一个标签中包括了假设干的插入对象按钮。换，每一个标签中包括了假设干的插入对象按钮。单击【插入】工具栏中的对象按钮或者将按钮拖曳单击【插入】工具栏中的对象按钮或者将按钮拖曳到编辑窗口内，即可将相应的对象添加到网页文件到编辑窗口内，即可将相应的对象添加到网页文件中，并可在网页中编辑添加的对象。中，并可在网页中编辑添加的对象。第5章 Dreamweaver与网络课件 图53 【插入】工具栏 第5章 Dreamweaver与网络课件 5.2.2 【文档】工具栏【文档】工具栏【文档】工具栏中包含了代码视图、拆分视图、【文档】工具栏中包含了代码视图、拆分视图、设计视图、实时视图、实时代码、文档标题、文件设计视图、实时视图、实时代码、文档标题、文件管理、阅读器预览、可视化选项等按钮，如图管理、阅读器预览、可视化选项等按钮，如图5-4所所示。示。第5章 Dreamweaver与网络课件 图54 【文档】工具栏第5章 Dreamweaver与网络课件 【文档】工具栏中的前三个按钮用于切换视图方式。单击按钮可以进入代码视图，这是一个用于编写和编辑HTML、JavaScript、效力器言语代码(如ASP或ColdFusion标志言语)以及其他类型代码的手工编码环境。单击按钮可以进入代码视图与设计视图，在该视图中，窗口被分成上、下两部分，顶部窗口用于编写HTML代码，底部窗口用于可视化编辑网页。单击按钮可以进入设计视图，这是一个用于可视化页面规划、可视化编辑和快速运用程序开发的设计环境。在该视图中，Dreamweaver中显示的文档处于可视化编辑形状，页面效果类似于在阅读器中查看页面时看到的内容。第5章 Dreamweaver与网络课件 5.2.3 形状栏形状栏在在Dreamweaver CS4形状栏中可以显示当前光形状栏中可以显示当前光标所在位置的标所在位置的HTML标志，经过此标志可以确定所标志，经过此标志可以确定所编辑的网页内容。形状栏上还可以显示当前网页的编辑的网页内容。形状栏上还可以显示当前网页的编辑窗口大小、当前网页文件的大小与网页的传输编辑窗口大小、当前网页文件的大小与网页的传输速度，如图速度，如图5-5所示。所示。另外，另外，Dreamweaver CS4的形状栏上新增了视的形状栏上新增了视图控制工具，其中选取工具用于选择页面中的操作图控制工具，其中选取工具用于选择页面中的操作对象；手形工具用于平移视图；缩放工具对象；手形工具用于平移视图；缩放工具用于放大或减少视图显示；而设置缩放比率选项框用于放大或减少视图显示；而设置缩放比率选项框可以经过确切的数值控制视图的缩放。可以经过确切的数值控制视图的缩放。第5章 Dreamweaver与网络课件 图55 形状栏第5章 Dreamweaver与网络课件 5.2.4 【属性】面板【属性】面板【属性】面板用于显示或修正当前所选对象的【属性】面板用于显示或修正当前所选对象的属性。在页面中选择不同的对象时，【属性】面板属性。在页面中选择不同的对象时，【属性】面板中将显示出不同对象的属性。例如选择了文字，在中将显示出不同对象的属性。例如选择了文字，在【属性】面板中显示的是文字的属性；假设选择了【属性】面板中显示的是文字的属性；假设选择了图像，那么【属性】面板中将显示图像的属性。另图像，那么【属性】面板中将显示图像的属性。另外，还可以直接在【属性】面板中修正所选对象的外，还可以直接在【属性】面板中修正所选对象的属性，修正后的效果可以在编辑窗口中反映出来。属性，修正后的效果可以在编辑窗口中反映出来。如图如图5-6所示为选择表格时的【属性】面板。所示为选择表格时的【属性】面板。 在【属性】面板的右下角单击三角形的切换按在【属性】面板的右下角单击三角形的切换按钮，可以将【属性】面板切换为常用属性或全部属钮，可以将【属性】面板切换为常用属性或全部属性方式，如图性方式，如图5-7所示。所示。第5章 Dreamweaver与网络课件 图56 【属性】面板 第5章 Dreamweaver与网络课件 图57 切换后的【属性】面板 第5章 Dreamweaver与网络课件 5.2.5 面板组面板组面板组是指组合在一同的面板集合，它为我们面板组是指组合在一同的面板集合，它为我们编辑网页提供了既直观又快速的操作方法，是设计编辑网页提供了既直观又快速的操作方法，是设计制造网页时不可短少的工具。制造网页时不可短少的工具。单击【窗口】菜单下的相应命令，可以翻开或单击【窗口】菜单下的相应命令，可以翻开或封锁面板。当我们翻开一个面板时，与其成组的面封锁面板。当我们翻开一个面板时，与其成组的面板会同时出现，如图板会同时出现，如图5-8所示。所示。 第5章 Dreamweaver与网络课件 图58 打开的面板组第5章 Dreamweaver与网络课件 单击面板组中的标签，可以在不同的面板之间切换。另外，将光标指向面板标签，按住鼠标左键向外拖动，可以把该面板从面板组中分别出来；分别出来的面板组还可以再放回去，只需拖动面板标签到面板组中即可。第5章 Dreamweaver与网络课件 5.3.1 规划站点规划站点规划站点是建立站点的前期预备任务，主要包规划站点是建立站点的前期预备任务，主要包括规划站点主题、规划站点构造、设计网页版面、括规划站点主题、规划站点构造、设计网页版面、搜集站点素材等。例如，要建立一个教学网站，该搜集站点素材等。例如，要建立一个教学网站，该网站主要引见语文、历史、地理等学科的教学内容。网站主要引见语文、历史、地理等学科的教学内容。我们首先要思索站点的效力对象，确定主题内容，我们首先要思索站点的效力对象，确定主题内容，同样是引见语文、历史、地理等学科的站点，我们同样是引见语文、历史、地理等学科的站点，我们是偏重课外辅导，还是偏重考试指南？这就是主题是偏重课外辅导，还是偏重考试指南？这就是主题问题，只需确定了主题，才干有的放矢地进展任务。问题，只需确定了主题，才干有的放矢地进展任务。 5.3 建立教学站点建立教学站点第5章 Dreamweaver与网络课件 确定了站点主题以后，需求进展站点构造的规划，同一个网站要引见三个学科的内容，如何组织才干脉络明晰，这是动手制造站点之前必需做好的一项任务。当确定了站点主题、组织构造以后，接下来的任务就是设计网页版面，网页作为一种视觉言语，应非常注重其版式的设计，其中主要包括颜色、构图两大方面的内容，这完全取决于制造者的综合程度，包括审美才干、设计才干、文字才干等多方面的素质。第5章 Dreamweaver与网络课件 以上三项任务完成以后，接下来需求搜集与整理站点素材，这是一项费时费力的任务，需求精心组织与筹备。例如，为了使教学站点具有生动性、吸引性，到达生动简约、便于教学的目的，要求每一部分都要有内容文字、相关图像，甚至还要有动画、声音等装饰。因此在前期的预备任务中，搜集素材的任务量最大。第5章 Dreamweaver与网络课件 预备好素材后，需求确定站点在本地计算机上的存放位置。通常情况下，首先根据站点构造在本地计算机上建立一个站点文件夹，如在C盘根目录下建立一个文件夹作为站点文件夹，命名为“教学站点，用于存放站点的一切文件。其次，为了更好地管理站点内容，便于以后的站点更新与维护任务，需求在站点文件夹下分别建立用于存放站点文件和素材的子文件夹，如用于存放图像、动画、运用程序、插件等的文件夹，文件夹的命名最好与所存放的内容相关，以便查找。第5章 Dreamweaver与网络课件 5.3.2 创建站点的根本构造创建站点的根本构造创建站点的根本构造，是指确定站点的整体构创建站点的根本构造，是指确定站点的整体构造和网页之间的构造关系。创建站点的根本构造时造和网页之间的构造关系。创建站点的根本构造时首先要建立空白的站点，其次是添加网页文首先要建立空白的站点，其次是添加网页文件与站点文件夹。件与站点文件夹。1创建站点创建站点Dreamweaver CS4提供了两种创建站点的方法：提供了两种创建站点的方法：一是在启动一是在启动Dreamweaver时经过欢迎画面创建；二时经过欢迎画面创建；二是在是在Dreamweaver任务环境下，单击菜单栏中的【任务环境下，单击菜单栏中的【站点】站点】【新建站点】命令。这两种创建站点的方法【新建站点】命令。这两种创建站点的方法都是经过导游完成的，非常直观。都是经过导游完成的，非常直观。例例5-1建立建立kejian站点。站点。1) 启动启动Dreamweaver CS4，那么弹出欢迎画面，那么弹出欢迎画面，如图如图5-9所示。所示。第5章 Dreamweaver与网络课件 图59 欢迎画面 第5章 Dreamweaver与网络课件 2) 单击【Dreamweaver站点】选项，那么弹出【的站点定义为】对话框，在该对话框中有两个标签，其中【根本】标签就是站点定义导游，第一个对话框如图510所示，这里有两个选项，第一个选项要求输入站点称号，以便在Dreamweaver中标识该站点，这里输入“kejian。第二个选项要求输入站点的http地址，假设还没有域名，可以暂时不填。第5章 Dreamweaver与网络课件 图510 第一个导游对话框第5章 Dreamweaver与网络课件 3) 单击按钮，进入站点定义导游的第二个对话框，如图511所示。该对话框讯问用户能否要运用效力器技术，选择【否，我不想运用效力器技术】选项，表示该站点是一个静态站点，没有动态页。第5章 Dreamweaver与网络课件 图511 第二个导游对话框第5章 Dreamweaver与网络课件 4) 单击按钮，进入站点定义导游的第三个对话框，如图512所示。该对话框讯问用户如何运用文件，这里选择第一个选项，然后在下面的文本框中指定一个文件夹，Dreamweaver将在其中存储站点文件。5) 单击按钮，进入站点定义导游的第四个对话框，如图513所示。该对话框讯问用户如何衔接到远程效力器，这里从下拉列表中选择“无。第5章 Dreamweaver与网络课件 图512 第三个导游对话框第5章 Dreamweaver与网络课件 图513 第四个导游对话框第5章 Dreamweaver与网络课件 6) 单击按钮，进入站点定义导游的第五个对话框，其中显示了用户的设置概要，如图514所示。7) 单击按钮，那么经过导游建立了一个本地教学站点。第5章 Dreamweaver与网络课件 图514 第五个导游对话框第5章 Dreamweaver与网络课件 建立了本地站点以后，新建的站点将显示在【文件】面板中。单击菜单栏中的【窗口】【文件】命令，或者按下F8键，可以翻开【文件】面板。该面板中显示了本地站点的称号以及本地站点的文件夹等选项，如图515所示。如今我们曾经创建了一个教学站点，不过，目前为止这个站点还是空的，没有实践内容，因此必需向站点中添加相关的内容。第5章 Dreamweaver与网络课件 图515 【文件】面板第5章 Dreamweaver与网络课件 2添加网页文件与站点文件夹新建的站点是空白的，其中没有任何内容。根据站点的规划，需求向其中添加网页文件或站点文件夹。网页文件即上网时阅读的HTML文件；站点文件夹那么用于管理站点内容，由于站点中会有很多文件，为了有效地管理文件，可以将它们分门别类地存放在文件夹中，如图像文件夹可以专门用于存放图像、动画等。第5章 Dreamweaver与网络课件 在站点中添加网页文件与文件夹的方法根本一致，操作步骤如下：1) 在【文件】面板中单击鼠标右键，那么弹出一个快捷菜单。2) 选择快捷菜单中的【新建文件】命令，那么新建了一个网页文件，如图516所示。第5章 Dreamweaver与网络课件 图516 新建的网页文件第5章 Dreamweaver与网络课件 3) 在光标位置处输入网页的称号，然后按下Enter键确认，那么完成了网页文件的添加。4) 同样的方法，假设在弹出的快捷菜单中选择【新建文件夹】命令，那么可以在站点中添加一个文件夹。第5章 Dreamweaver与网络课件 例例5-2为kejian站点添加内容。站点添加内容。1) 在【文件】面板中的在【文件】面板中的“kejian文件文件夹上上单击鼠鼠标右右键，那么，那么弹出一个快捷菜出一个快捷菜单。2) 选择快捷菜快捷菜单中的【新建文件中的【新建文件夹】命令，那么在】命令，那么在“kejian文件文件夹下新建了一个文件下新建了一个文件夹。3) 在光在光标位置位置处输入文件入文件夹的称号，如的称号，如“Images，按，按下下Enter键确确认。4) 根据根据“kejian站点的要求，用同站点的要求，用同样的方法再新建三的方法再新建三个文件个文件夹，分，分别命名命名为“Chinese、“English和和“Geography，用于存放关于，用于存放关于语文、英文、英语和地理等方面的和地理等方面的内容，如内容，如图5-17所示。所示。第5章 Dreamweaver与网络课件 图517 新建的文件夹 第5章 Dreamweaver与网络课件 5) 在“kejian文件夹上单击鼠标右键，从弹出的快捷菜单中选择【新建文件】命令，那么添加了一个网页文件。6) 在光标位置处输入网页文件的称号，如“index.html，按下Enter键确认，如图518所示。7) 用同样的方法，分别在新建的文件夹上单击鼠标右键，选择快捷菜单中的【新建文件】命令，那么可以在该文件夹中建立新的网页文件。如图519所示为在每个文件夹中建立的网页“Chinese.html、“English.html和“Geography.html。 第5章 Dreamweaver与网络课件 图518 新建的网页文件 第5章 Dreamweaver与网络课件 图519 新建的网页 第5章 Dreamweaver与网络课件 5.4.1 文本的编辑文本的编辑文本在网页中具有举足轻重的位置。文本内容文本在网页中具有举足轻重的位置。文本内容充实，可以吸引众多的阅读者；文本编辑处置得当，充实，可以吸引众多的阅读者；文本编辑处置得当，可以使阅读者在获得信息的同时感到赏心顺眼，这可以使阅读者在获得信息的同时感到赏心顺眼，这对于提高站点的阅读次数极为重要。向网页中输入对于提高站点的阅读次数极为重要。向网页中输入文本以后，可以进展文本的格式、对齐方式等的设文本以后，可以进展文本的格式、对齐方式等的设置。输入文本的方法如下：置。输入文本的方法如下：5.4 编辑教学网页编辑教学网页第5章 Dreamweaver与网络课件 在编辑窗口中输入所需的文本。如需换行分段，可以按下Enter键；如需换行但不分段，可以按住Shift键的同时按下Enter键。 对于大量的文本，可以运用“复制/粘贴的方法将其它文件中的文本复制到当前网页中。在网页中输入文本以后，可以根据需求设置文本属性。选择要编辑的文本，此时的【属性】面板如图520所示，在这里可以设置文本的各种格式。第5章 Dreamweaver与网络课件 图520 【属性】面板第5章 Dreamweaver与网络课件 【格式】：选择其中的选项，可以对所选文本运用系统预设的格式。 【ID】：用于为所选内容分配一个ID号。 【类】：显示当前运用于文本的类款式，假设没有对所选内容运用过任何款式，那么显示“无。 单击按钮和按钮，可以将所选文本加粗和倾斜。 单击或按钮，可以为光标所在的段落或所选择的段落添加无序或有序工程列表。第5章 Dreamweaver与网络课件 单击或按钮，可以使光标所在的段落向右或向左缩进。 【链接】：用于为所选的文本建立超链接。可以在其后面的文本框中输入要链接文档的途径称号，也可以单击右侧的图标，在弹出的对话框中选择链接的文档，或者按住图标指向要链接的文档建立超链接。 【标题】：用于设置超链接的文本提示。第5章 Dreamweaver与网络课件 【目的】：用于选择链接文档在窗口中的翻开方式。选择“_blank选项，表示将在新的阅读器窗口中翻开链接的文档；选择“_parent选项，表示将在当前文档的父级框架或包含该链接的框架窗口中翻开链接文档；选择“_self选项，表示将在当前文档所在的窗口中翻开链接的文档；选择“_top选项，表示将在整个阅读器窗口中翻开链接的文档。Dreamweaver CS4将CSS属性面板与HTML属性面板集成在一同，在【属性】面板中单击按钮，可以切换到CSS属性面板，如图521所示。第5章 Dreamweaver与网络课件 图521 切换到CSS属性面板 第5章 Dreamweaver与网络课件 【目的规那么】：用于显示页面中所选文本运用的规那么，也可以经过该选项创建新的CSS规那么、新的内联款式等。 单击按钮，那么翻开【CSS规那么定义】对话框，用于设置CSS的各项属性；假设从【目的规那么】列表中选择“新CSS规那么选项，并单击按钮，那么可以新建CSS规那么。第5章 Dreamweaver与网络课件 单击 按钮，可以翻开【CSS款式】面板。 【字体】：用于选择所需的字体。假设字体列表中没有所需的字体，可以选择列表中的【编辑字体列表】选项，这时将翻开【编辑字体列表】对话框，如图522所示。在对话框的【可用字体】列表框中选择所需的字体后单击按钮，将其添加到【字体列表】中，单击按钮，那么该字体将出如今【属性】面板的字体列表中。第5章 Dreamweaver与网络课件 图522 【编辑字体列表】对话框第5章 Dreamweaver与网络课件 【大小】：用于设置文本的字号大小。 单击文本颜色块，在弹出的颜色列表中可以选择文本的颜色。 单击按钮和按钮，可以将所选文本加粗和倾斜。 分别单击按钮，可以使光标所在的段落或所选择的段落实现左对齐、居中对齐、右对齐和两端对齐。第5章 Dreamweaver与网络课件 在Dreamweaver的编辑窗口中输入文本之后，系统将自动生成与其对应的HTML代码。值得留意的是，输入文本时按下空格键并不能挪动文字，这是由于在HTML代码中不能输入多个空格。要处理这个问题，可以在【属性】面板的【格式】下拉列表中选择“预先格式化的命令，然后再按下空格键。 第5章 Dreamweaver与网络课件 例53制造一个纯文字网页。1) 在【文件】面板中双击“Chinese.html网页文件，翻开该网页进展编辑。2) 在【属性】面板中单击按钮，在弹出的【页面属性】对话框中切换到【外观(HTML)】分类，如图523所示。第5章 Dreamweaver与网络课件 图523 【页面属性】对话框(1)第5章 Dreamweaver与网络课件 3) 单击【背景图像】文本框右侧的按钮，选择一幅图片作为网页背景，然后切换到【标题/编码】分类，在【标题】文本框中输入“唐诗欣赏作为网页的标题栏文字，如图524所示。4) 单击对话框中的按钮，完成页面属性的设置，那么为网页设置了标题栏文字与背景图像，如图525所示。第5章 Dreamweaver与网络课件 图524 【页面属性】对话框(2) 第5章 Dreamweaver与网络课件 图525 设置网页背景图像第5章 Dreamweaver与网络课件 5) 在编辑窗口中输入文字“唐诗欣赏并将其选中。6) 在【属性】面板的【格式】列表中选择“标题2选项，设置网页的标题。然后切换到CSS属性面板，单击居中对齐按钮，设置文字居中对齐，结果如图526所示。7) 将光标定位在标题文字后面，在【插入】工具栏的【常用】标签中单击按钮，在页面中插入一条程度线，如图527所示。第5章 Dreamweaver与网络课件 图526 设置网页标题格式第5章 Dreamweaver与网络课件 图527 插入的程度线 第5章 Dreamweaver与网络课件 8) 将光标定位在程度线的后面，按下Enter键，产生一个新段落，在新的段落中输入如图528所示的文本内容。9) 在【属性】面板中切换到CSS属性面板，设置文字的相关格式，也可以建立CSS规那么格式化文本。第5章 Dreamweaver与网络课件 图528 输入的文本内容第5章 Dreamweaver与网络课件 5.4.2 在网页中运用图像在网页中运用图像在网页中除了文本以外，运用最广泛的就是图在网页中除了文本以外，运用最广泛的就是图像了，运用图像不但可以美化网页，还可以作为超像了，运用图像不但可以美化网页，还可以作为超链接的源端点，可谓一举两得。在链接的源端点，可谓一举两得。在Dreamweaver中，中，既可以运用动态图像，也可以运用静态图像，但无既可以运用动态图像，也可以运用静态图像，但无论运用哪种图像，首先要思索文件的大小，例如，论运用哪种图像，首先要思索文件的大小，例如，运用静态图像时最好运用运用静态图像时最好运用GIF、JPG或或PNG格式的格式的图像，由于这些图像的体积相对较小。图像，由于这些图像的体积相对较小。 第5章 Dreamweaver与网络课件 1插入图像在网页中插入图像时有两种情况：一种情况是图像曾经规划在站点中；另一种情况是图像位于站点之外。假设在建站前期没有将图像规划在站点之内，插入图像时将弹出一个提示框，如图529所示，提示用户将图像复制到站点中。插入图像的操作比较简单，只需单击菜单栏中的【插入】【图像】命令，或者在【插入】工具栏的【常用】标签中单击按钮即可。第5章 Dreamweaver与网络课件 图529 提示框第5章 Dreamweaver与网络课件 例54在网页中插入图像。1) 在【文件】面板中双击要编辑的网页文件将其翻开，将光标定位在要插入图像的位置处。2) 在【插入】工具栏中选择【常用】标签，单击其中的按钮，在弹出的【选择图像源文件】对话框中选择要插入的图像文件，这里选择一幅站点之外的图像，如图530所示。 第5章 Dreamweaver与网络课件 图530 【选择图像源文件】对话框第5章 Dreamweaver与网络课件 3) 单击按钮，将弹出一个系统提示框，如图531所示。提示所选的图像文件不在站点中，发布时能够会出现错误。讯问用户能否将所选文件复制到站点文件夹中。4) 单击按钮，在弹出的【复制文件为】对话框中将所选图像文件保管在当前站点中。第5章 Dreamweaver与网络课件 图531 提示框第5章 Dreamweaver与网络课件 5) 单击按钮，那么弹出【图像标签辅助功能属性】对话框，用于输入图像的交换文本，如图532所示。6) 单击按钮，那么将所选图像插入到网页中，如图533所示。 第5章 Dreamweaver与网络课件 图532 【图像标签辅助功能属性】对话框第5章 Dreamweaver与网络课件 图533 插入的图像第5章 Dreamweaver与网络课件 2设置图像属性插入到网页中的图像可以经过【属性】面板设置其属性，如改动图像的大小、建立超链接、设置对齐方式等。要设置图像的属性，首先要选择网页中的图像，这时【属性】面板将显示图像的属性，如图534所示。 第5章 Dreamweaver与网络课件 图534 【属性】面板第5章 Dreamweaver与网络课件 【图像】：用于显示图像文件的大小。在其下方的【ID】文本框中可以为图像文件命名，该称号可以用于脚本的调用。 【宽】和【高】：用于显示或修正图像的宽度和高度，单位为像素。 【源文件】：用于显示该图像文件的URL地址。 【链接】：用于为图像建立超链接。 【交换】：用于输入图像的阐明性文字。阅读网页时，当光标指向图像上时将出现该文字。第5章 Dreamweaver与网络课件 【编辑】：这里提供了编辑图像的功能，既可以在源程序中编辑图像，也可以在图像阅读器中优化图像。 【垂直边距】：用于设置图像与其周围对象在垂直方向的空白间隔。 【程度边距】：用于设置图像与其周围对象在程度方向的空白间隔。 【目的】：用于设置翻开目的文档的目的窗口，该选项只需在图像建立了超链接时才可用。 第5章 Dreamweaver与网络课件 【原始】：用于显示图像被载入之前预先载入的低质量图像的URL地址，以便缩短用户的等待时间。 【边框】：在其后面的文本框中输入数值，可以为图像添加相应宽度的边框。取值为0时图像没有边框。另外，其右侧的按钮可以对图像裁剪、重新取样、调整亮度/对比度、锐化等。 【对齐】：用于设置图像与其周围对象之间的对齐方式。 第5章 Dreamweaver与网络课件 3为图像建立超链接在Dreamweaver CS4中，用户可以为图像建立超链接，阅读网页时单击图像可以翻开链接的目的文档。为整个图像建立链接的方法比较简单，只需选择要建立超链接的图像，在【属性】面板的【链接】文本框中输入要链接的目的文档的URL地址，或者利用和图标选择要链接的目的文档即可。例55为图像建立链接。1) 在【文件】面板中双击“index.html网页文件将其翻开，然后插入三幅图像，作为导航按钮，如图535所示。 第5章 Dreamweaver与网络课件 图535 插入的图像第5章 Dreamweaver与网络课件 2) 选择“语文天地图像，在【属性】面板中单击【链接】右侧的按钮，在弹出的【选择文件】对话框中选择本站点内的“Chinese.html文件，如图536所示。3) 单击按钮，那么为“语文天地图像建立了链接。4) 选择“英语之家图像，在【属性】面板中按住【链接】右侧的按钮，将其拖动到【文件】面板中的“English.html文件上，那么为图像建立了链接，如图537所示。 第5章 Dreamweaver与网络课件 图536 【选择文件】对话框第5章 Dreamweaver与网络课件 图537 为图像建立链接 第5章 Dreamweaver与网络课件 5) 选择“地理知识图像，在【属性】面板中的【链接】文本框中输入“Geography/ Geography.html，那么为该图像建立了链接。在上面的实例中，我们列出了三种创建链接的方法。任务的时候，哪一种方法方便就运用哪一种方法。另外，实例中建立的链接都是站点内部的链接，假设要建立站点与站点之间的链接，可以直接输入网址，如163。第5章 Dreamweaver与网络课件 除此之外，在Dreamweaver中也可以为图像的某一部分建立超链接，阅读网页时单击该部分图像可以翻开链接的目的文档。假设要为图像的某一部分建立超链接，需求先在图像上建立热点，然后再为热点建立超链接。详细操作步骤如下：1) 选择网页中要建立热点超链接的图像。2) 在【属性】面板中选择建立热点的工具，在图像上建立热点，如图538所示。第5章 Dreamweaver与网络课件 图538 建立的热区第5章 Dreamweaver与网络课件 选择工具后在图像上拖曳鼠标，可以建立矩形热点。按住Shift键的同时拖曳鼠标，可以建立正方形热点。 选择工具后在图像上拖曳鼠标，可以建立圆形热点。 选择工具后在图像上挪动并单击鼠标，可以建立多边形热点。 选择工具，可以选择并挪动建立的热点。第5章 Dreamweaver与网络课件 3) 运用工具选择建立的热点，在【属性】面板中为其建立超链接，如图539所示。在【链接】文本框中输入要链接的目的文档的URL地址。 在【目的】下拉列表中选择翻开链接文档的目的窗口。 在【交换】文本框中输入热点的阐明性文字。 4插入鼠标经过图像所谓鼠标经过图像，是指阅读网页时当光标指向图像上时该图像将被其它图像替代，从而产生动态效果。下面以实例的方式引见如何在网页中插入鼠标经过图像。第5章 Dreamweaver与网络课件 图539 【属性】面板第5章 Dreamweaver与网络课件 例56制造动态按钮。1) 在【文件】面板中双击要编辑的网页将其翻开。2) 在网页中要插入鼠标经过图像的位置处定位光标。3) 在【插入】工具栏中选择【常用】标签，单击右侧的小箭头，在翻开的菜单中选择【鼠标经过图像】命令，那么弹出【插入鼠标经过图像】对话框，如图540所示。 第5章 Dreamweaver与网络课件 图540 【插入鼠标经过图像】对话框第5章 Dreamweaver与网络课件 4) 在对话框中选择原始图像和鼠标经过图像，并可为鼠标经过图像建立超链接。【图像称号】：用于输入图像称号。【原始图像】：用于选择原始显示的图像。【鼠标经过图像】：用于选择替代原始图像的图像。【交换文本】：用于输入鼠标经过图像时的替代文本。【按下时，前往的URL】：用于为鼠标经过图像建立超链接。5) 单击按钮，即可插入鼠标经过图像，如图541所示为鼠标经过图像的阅读效果。 第5章 Dreamweaver与网络课件 图541 鼠标经过图像的阅读效果第5章 Dreamweaver与网络课件 5创建导航条创建导航条在网页中，导航条的作用不可忽视，运用它可以在站点在网页中，导航条的作用不可忽视，运用它可以在站点的网页之间自在跳转。正如它的称号一样，导航条为阅读者的网页之间自在跳转。正如它的称号一样，导航条为阅读者提供了导航作用。制造导航条之前，必需先制造每一个导航提供了导航作用。制造导航条之前，必需先制造每一个导航按钮的四种形状，预备好了四种形状的图片以后，就可以向按钮的四种形状，预备好了四种形状的图片以后，就可以向网页中插入导航条了。网页中插入导航条了。第5章 Dreamweaver与网络课件 在网页中创建导航条的根本操作步骤如下：1) 在网页中要创建导航条的位置处定位光标。2) 在【插入】工具栏中选择【常用】标签，单击其中的、按钮，在翻开的菜单中选择【导航条】命令，那么弹出【插入导航条】对话框，如图542所示。第5章 Dreamweaver与网络课件 图542 【插入导航条】对话框第5章 Dreamweaver与网络课件 3)在对话框中进展选项设置。【导航条元件】：用于显示一切的导航元件。单击其上方的按钮或按钮，可以添加或减少列表中的导航元件。单击其右上角的按钮或按钮，可以调整导航元件的陈列顺序。 【工程称号】：用于输入导航元件的称号，所输入的称号将在上面的【导航条元件】中显示出来。第5章 Dreamweaver与网络课件 【形状图像】：用于输入普通形状下要显示的图像的途径和文件名。 【鼠标经过图像】：用于输入鼠标经过时要显示的图像的途径和文件名。 【按以下图像】：用于输入按下鼠标时要显示的图像的途径和文件名。 【按下时鼠标经过图像】：用于输入单击普通形状图像后将光标移过时所显示的图像的途径和文件名。第5章 Dreamweaver与网络课件 【交换文本】：用于输入鼠标经过图像时的替代文本。 【按下时，前往的URL】：用于输入单击图像时要链接的目的文档的URL地址。在其后面的下拉列表中可以选择显示目的文档的窗口。 【选项】：用于设置图像的载入方式。 【插入】：用于选择要插入的导航条的方式，可以选择“程度或“垂直方式。4) 单击按钮，即可创建导航条，如图543所示。 第5章 Dreamweaver与网络课件 图543 创建的导航条第5章 Dreamweaver与网络课件 5.4.3 插入插入Flash动画动画 在网页中运用在网页中运用Flash动画，可以使页面的内容丰动画，可以使页面的内容丰富多彩，引人入胜，使网页加强活力与感染力。插富多彩，引人入胜，使网页加强活力与感染力。插入入Flash动画的操作步骤如下：动画的操作步骤如下：1) 在网页中要插入在网页中要插入Flash动画的位置处定位光标。动画的位置处定位光标。第5章 Dreamweaver与网络课件 2) 在【插入】工具栏中选择【常用】标签，单击其中的按钮，在翻开的菜单中选择【SWF】命令，那么弹出【选择文件】对话框。3) 在对话框中选择要插入的Flash动画。4) 单击按钮，将位于站点文件夹之外的动画复制到站点文件夹中后，那么在网页中插入了Flash动画，如图544所示。第5章 Dreamweaver与网络课件 图544 插入Flash动画第5章 Dreamweaver与网络课件 5) 在【属性】面板中设置Flash动画的属性。【宽】和【高】：用于设置Flash动画对象的宽度和高度，单位为像素。 【文件】：用于设置Flash动画对象的文件途径。 【源文件】：用于指定源文档(FLA文件)的途径。 【背景颜色】：用于设置Flash动画的背景颜色。 【循环】：选择该复选框，可以在阅读器中循环播放Flash动画。 第5章 Dreamweaver与网络课件 【自动播放】：选择该复选框，那么翻开阅读器后可以自动播放Flash动画。 【垂直边距】：用于设置Flash动画对象与周围元素上下边境的间隔。 【程度边距】：用于设置Flash动画对象与周围元素左右边境的间隔。 【质量】：用于设置Flash动画对象的播放质量。质量越高，动画的下载速度就越慢；质量越低，动画的下载速度就越快。 【比例】：用于设置Flash动画播放时的缩放比例。第5章 Dreamweaver与网络课件 【对齐】：设置Flash动画对象与周围元素的对齐方式，其与图像的对齐方式一样。 【Wmode(窗口方式)】：为SWF文件设置窗口方式的参数，以防止与DHTML元素冲突，默许值是不透明。 单击按钮，可以翻开默许的Flash动画编辑软件更新“.fla文件。 单击按钮，可以在编辑的页面中播放Flash动画。 单击按钮，那么弹出【参数】对话框，在该对话框中可以输入传送给影片的附加参数。第5章 Dreamweaver与网络课件 5.5.1 运用表格运用表格在在Dreamweaver CS4中，表格除了可以使大量中，表格除了可以使大量的信息资料有组织地陈列起来以便管理外，还可以的信息资料有组织地陈列起来以便管理外，还可以用于网页规划，即将网页中的元素放到表格的单元用于网页规划，即将网页中的元素放到表格的单元格中进展网页排版，因此它是控制页面整体规划的格中进展网页排版，因此它是控制页面整体规划的重要工具。重要工具。5.5 网页的规划方法网页的规划方法第5章 Dreamweaver与网络课件 1插入表格在网页中插入表格的操作步骤如下：1) 在网页中要插入表格的位置处定位光标。2) 在【插入】工具栏中选择【常用】标签，单击其中的按钮，那么弹出【表格】对话框，如图545所示。第5章 Dreamweaver与网络课件 图545 【表格】对话框 第5章 Dreamweaver与网络课件 3) 在对话框中进展选项设置。【行数】和【列】：用于设置插入表格的行数和列数。 【表格宽度】：用于设置表格的宽度，选择“像素为单位时，表格的宽度为固定像素的宽度；选择“百分比为单位时，表格的宽度与阅读器窗口的宽度将坚持一样的百分比。 【边框粗细】：用于设置表格的边框宽度。第5章 Dreamweaver与网络课件 【单元格边距】：用于设置表格中单元格内的元素间隔单元格边框的间隔。 【单元格间距】：用于设置表格中单元格之间的间距。 【标题】：用于设置表头的位置，分别为无、左、顶部、两者。 辅助功能中的【标题】：用于设置表格标题，该标题在表格的外侧。 【摘要】：用于描画表格的相关信息。4) 单击按钮，即可在网页中插入表格，如图546所示。 第5章 Dreamweaver与网络课件 图546 插入的表格 第5章 Dreamweaver与网络课件 在网页中插入表格后，可以向单元格中直接输入文本或插入其它的对象，如图像、动画等，还可以向表格中插入嵌套表格。当然，用户也可以从外部导入其它软件编辑的表格，如Excel电子表格等。第5章 Dreamweaver与网络课件 2表格的编辑操作插入到网页中的表格、单元格可以进展各种编辑操作，如选择、拆分与合并、复制、删除等。选择表格、单元格的操作方法如下：将光标指向表格边框，单击鼠标，可以选择整个表格。另外，单击形状栏上的标志，也可以选择整个表格。 将光标指向表格的上边框，当光标变为外形时单击鼠标，可以选择一列单元格。按住鼠标左键左右拖曳，可以选择延续的多列单元格。第5章 Dreamweaver与网络课件 将光标指向表格的左边框，当光标变为外形时单击鼠标，可以选择一行单元格。按住鼠标左键上下拖曳，可以选择延续的多行单元格。另外，单击形状栏上的标志，可以选择光标所在的一行单元格。 将光标定位在一个单元格中，按住Shift键的同时单击另外一个单元格，可以选择二者之间的延续单元格。按住 Ctrl键的同时单击其它单元格，可以选择多个不延续的单元格。另外，单击标签，可以选择光标所在的单元格。 第5章 Dreamweaver与网络课件 合并单元格的操作步骤如下：1) 选择表格中要合并的多个相邻的单元格。2) 单击【属性】面板中的按钮，即可将所选单元格合并为一个单元格，原单元格中的内容将组合为一组存放在合并后的单元格中。如图547所示为合并前后的效果对比。 第5章 Dreamweaver与网络课件 图547 合并前后的单元格对比第5章 Dreamweaver与网络课件 拆分单元格的操作与合并单元格操作正好相反，它是将一个单元格拆分为几个延续的单元格，其根本的操作步骤如下：1) 将光标定位在要拆分的单元格中。2) 单击【属性】面板中的按钮，那么弹出【拆分单元格】对话框，如图548所示。第5章 Dreamweaver与网络课件 图548 【拆分单元格】对话框 第5章 Dreamweaver与网络课件 3) 在对话框中选择要将单元格拆分成的行或列，并设置相应的行数或列数。4) 单击按钮，即可拆分单元格，原单元格中的内容将保管在拆分后的左上角单元格中。如图549所示为拆分前后的效果对比。插入或删除行或列的操作步骤如下：1) 选择表格的行、列或单元格后，单击鼠标右键，那么弹出如图550所示的快捷菜单。第5章 Dreamweaver与网络课件 图549 拆分前后的单元格对比第5章 Dreamweaver与网络课件 图550 快捷菜单第5章 Dreamweaver与网络课件 2) 选择【表格】子菜单中的相应命令，可以插入或删除行或列。选择【插入行】命令，可以在所选单元格的上方插入一行单元格。 选择【插入列】命令，可以在所选单元格的左侧插入一列单元格。 选择【插入行或列】命令，那么弹出【插入行或列】对话框，如图551所示。在对话框中进展选项设置，即可插入多行或多列单元格。 第5章 Dreamweaver与网络课件 图551 【插入行或列】对话框第5章 Dreamweaver与网络课件 选择【删除行】命令，可以删除所选的一行单元格。 选择【删除列】命令，可以删除所选的一列单元格。 第5章 Dreamweaver与网络课件 3设置表格的属性假设插入到网页中的表格不能满足网页设计的需求，可以经过设置表格的属性进展调整。选择要设置属性的表格区域(可以是整个表格、一行或一列或一个单元格)后，在【属性】面板中设置其相应的属性。下面我们以选择整个表格为例，讲解表格的属性设置。选择了表格后的【属性】面板如图552所示。第5章 Dreamweaver与网络课件 图552 【属性】面板第5章 Dreamweaver与网络课件 【表格】：用于设置表格的称号。 【行】和【列】：用于设置表格的行数和列数。 【宽】：用于设置表格的宽度，单位为“百分比或“像素。 【填充】：用于设置单元格中的内容与边框之间的间隔。 【间距】：用于设置单元格之间的间隔。 【对齐】：用于设置表格在网页中的对齐方式，可以选择“默许、“左对齐、“居中对齐或“右对齐等方式。第5章 Dreamweaver与网络课件 【边框】：用于设置表格外边框的宽度。 【类】：用于设置表格的CSS款式。 单击按钮，可以取消单元格的宽度设置，使其宽度随单元格的内容自动缩放。 单击按钮，可以取消单元格的高度设置，使其高度随单元格的内容自动调整。 单击按钮，可以将表格宽度转换为像素。 单击按钮，可以将表格宽度转换为百分比。第5章 Dreamweaver与网络课件 5.5.2 运用框架运用框架框架主要用于将网页分割为多个框架主要用于将网页分割为多个HTML页面进页面进展显示。例如，一个网页由三个框架组成，左侧的展显示。例如，一个网页由三个框架组成，左侧的框架可以显示一个滚动菜单；顶部的框架可以显示框架可以显示一个滚动菜单；顶部的框架可以显示站点的徽标和横幅广告等；而右侧的框架那么用于站点的徽标和横幅广告等；而右侧的框架那么用于显示网页的主要内容。每一个框架都是一个独立的显示网页的主要内容。每一个框架都是一个独立的HTML页面，它们经过框架集组合在一同。页面，它们经过框架集组合在一同。所谓框架集所谓框架集(也称为框架组也称为框架组)就是一个定义了页就是一个定义了页面构造和属性的面构造和属性的HTML页面，包括框架数目、框架页面，包括框架数目、框架的大小、在框架中加载页面的来源及其他可定义的的大小、在框架中加载页面的来源及其他可定义的属性。框架集在阅读器中不显示，它只是用于存储属性。框架集在阅读器中不显示，它只是用于存储框架的一个容器。如图框架的一个容器。如图5-53所示就是用框架定义的所示就是用框架定义的Photoshop CS的协助页面。的协助页面。 第5章 Dreamweaver与网络课件 图553 Photoshop CS的协助页面第5章 Dreamweaver与网络课件 1建立框架建立框架的根本操作步骤如下：1) 在【插入】工具栏中选择【规划】标签，单击其中的按钮，那么弹出一个菜单，如图554所示。第5章 Dreamweaver与网络课件 图554 【框架】菜单第5章 Dreamweaver与网络课件 2) 在弹出的菜单中单击所需的框架格式，即可将该框架运用到页面中，框架之间以边框间隔。3) 在框架中单击鼠标，可以插入文本、图像、表格等内容，如图555所示为运用框架建立的网页。 假设运用系统预设的框架不能满足网页设计的要求，用户还可以自定义框架，即重新设计框架的构造，根本的操作步骤如下：1) 单击菜单栏中的【插入】【HTML】【框架】命令，那么弹出【框架】命令子菜单，如图556所示。第5章 Dreamweaver与网络课件 图555 运用框架建立的网页第5章 Dreamweaver与网络课件 图556 【框架】命令子菜单第5章 Dreamweaver与网络课件 2) 在子菜单中选择所需的命令，即可在框架边框中插入相应的框架。另外，按住Alt键的同时将光标指向框架边框，当光标变为双箭头时按住鼠标左键拖曳，也可以建立框架。第5章 Dreamweaver与网络课件 2编辑框架在网页中插入框架之后，还可以进展编辑操作，如选择框架、修正框架、删除框架、拆分框架等。编辑框架的根本操作如下： 单击网页中的框架边框，可以选择框架集。 在网页中按住Alt键单击框架，可以选择该框架，被选择的框架在页面中以虚线边框表示。 在【框架】面板中单击框架缩略图，可以选择相应的框架。 第5章 Dreamweaver与网络课件 图557 【框架】面板第5章 Dreamweaver与网络课件 将光标指向框架内边框，当光标变为双向箭头时，按住鼠标左键拖曳，可以挪动框架边框的位置，从而改动框架的外形。假设按住鼠标左键向框架外拖曳，那么可以删除该框架。 将光标定位在框架中，单击菜单栏中的【修正】【框架集】命令，从弹出的子菜单中选择所需的命令，可以拆分该框架，如图558所示。第5章 Dreamweaver与网络课件 图558 【框架集】子菜单 第5章 Dreamweaver与网络课件 3设置框架集和框架的属性选择了网页中的框架集或框架后，可以在【属性】面板中设置它们的属性，如图559所示为框架集的【属性】面板。【边框】：用于设置所选框架集边框能否在阅读器窗口中显示。选择“是选项时将以三维立体效果显示框架集边框；选择“否选项时将不显示框架集边框；选择“默许选项时，将由阅读器决议能否显示框架集边框。大多数阅读器的默许设置为“是，即显示框架集边框。第5章 Dreamweaver与网络课件 图559 【属性】面板(1)第5章 Dreamweaver与网络课件 【边框宽度】：用于设置所选框架集的边框宽度，单位为像素。 【边框颜色】：用于设置所选框架集的边框颜色。 【行列选定范围】：该区域位于【属性】面板右侧，其中深灰色部分为当前所选框架。在该区域中单击鼠标，可以选择相应的框架。 【值】：在文本框中输入数值，可以指定所选框架的尺寸。 【单位】：用于设置所选框架的尺寸单位，可以选择“像素、“百分比或“相对。如图560所示为选择了框架后的【属性】面板。第5章 Dreamweaver与网络课件 图560 【属性】面板(2)第5章 Dreamweaver与网络课件 【框架称号】：用于定义所选框架的称号，该称号用于创建超链接。 【源文件】：用于输入或显示将在该框架中显示的网页的URL地址，也可以利用和图标选择网页。 【滚动】：用于设置能否在框架中显示滚动条。选择“是选项时将在框架中显示滚动条；选择“否选项时，那么不显示滚动条；选择“自动选项时将根据需求决议能否显示滚动条，当网页内容超出框架范围时将显示滚动条，不超出范围时将不显示滚动条；选择“默许选项时，将运用阅读器的默许设置，多数阅读器的默许设置为“自动。第5章 Dreamweaver与网络课件 选择【不能调整大小】复选框时，阅读者在阅读页面时不能经过拖曳框架边框改动框架大小。 【边框】：用于设置能否显示框架的边框。选择“是选项时，将显示框架的边框；选择“否选项时，将隐藏框架的边框；选择“默许选项时，将显示默许的框架边框。 【边框颜色】：用于设置框架边框的颜色。该颜色将覆盖框架集的边框颜色。 【边境宽度】：用于设置框架中的内容距框架左右边境之间的空白宽度。 【边境高度】：用于设置框架中的内容距框架上下边境之间的空白宽度。第5章 Dreamweaver与网络课件 4保管框架 在预览网页之前，需求先保管框架和框架集文件。假设一个网页中有四个框架，那么保管框架时将产生五个HTML文件，其中每个框架都会产生一个HTML 文件，框架集将单独产生另一个HTML文件。保管框架的操作步骤如下：1) 单击菜单栏中的【文件】【保管全部】命令，将弹出【另存为】对话框，如图561所示。第5章 Dreamweaver与网络课件 图561 【另存为】对话框第5章 Dreamweaver与网络课件 2) 在对话框中选择保管HTML文件的位置和文件的保管类型。3) 为HTML文件命名。该对话框中默许的称号为“Untitled Frameset5.html，提示用户如今保管的是框架集文件。4) 单击按钮，将弹出另一个【另存为】对话框。该对话框中默许的称号为“Untitled5，提示用户如今保管的是所选框架文件。5) 继续单击按钮，在弹出的【另存为】对话框中分别为框架文件命名，可以保管其它的框架文件。 第5章 Dreamweaver与网络课件 5运用超链接运用超链接在在Dreamweaver CS4中可以运用超链接控制框架内容的中可以运用超链接控制框架内容的显示，而这一操作的关键在于正确指定显示网页的目的窗口显示，而这一操作的关键在于正确指定显示网页的目的窗口或框架。例如，假设将导航条放在左侧框架中，要使与其链或框架。例如，假设将导航条放在左侧框架中，要使与其链接的网页内容显示在主框架中，就必需为导航条中的链接指接的网页内容显示在主框架中，就必需为导航条中的链接指定目的框架为主框架，这样，当用户单击左侧框架中的导航定目的框架为主框架，这样，当用户单击左侧框架中的导航条时，与其链接的网页内容将在主框架中显示。条时，与其链接的网页内容将在主框架中显示。第5章 Dreamweaver与网络课件 运用超链接的操作步骤如下：1) 选择框架中要建立超链接的文本或其它对象。2) 在【属性】面板的【链接】文本框中输入要链接的网页的URL地址，也可以利用和图标选择网页文件。3) 在【属性】面板的【目的】选项中选择用于显示链接网页的目的窗口或框架。第5章 Dreamweaver与网络课件 3) 在【属性】面板的【目的】选项中选择用于显示链接网页的目的窗口或框架。选择“_blank选项，表示在新的阅读器窗口中翻开链接的网页。 选择“_parent选项，表示在当前框架的父级框架中翻开链接网页。 选择“_self选项，表示在当前框架中翻开链接的网页。第5章 Dreamweaver与网络课件 选择“_top选项，表示在当前网页的最顶层框架集中翻开链接的网页。 选择“mainFrame选项，表示在主框架中翻开链接的网页。 选择“leftFrame选项，表示在左框架中翻开链接的网页。 选择“topFrame选项，表示在上面的框架中翻开链接的网页。第5章 Dreamweaver与网络课件 5.5.3 运用运用CSS+DIVCSS是层叠款式表的简称，它是一组格式设置是层叠款式表的简称，它是一组格式设置规那么，用于控制网页内容的外观。运用规那么，用于控制网页内容的外观。运用CSS可以可以非常灵敏地控制页面的外观，可以控制许多文本属非常灵敏地控制页面的外观，可以控制许多文本属性，如字体、大小、粗体、下划线、文本阴影等，性，如字体、大小、粗体、下划线、文本阴影等，还可以确保在多个阅读器中以更加一致的方式处置还可以确保在多个阅读器中以更加一致的方式处置页面外观。除此之外，页面外观。除此之外，CSS还可以控制网页中块级还可以控制网页中块级别元素的格式与定位，这将涉及到别元素的格式与定位，这将涉及到DIV标签。标签。DIV标签是用来定义网页内容中的逻辑区域的标签，运标签是用来定义网页内容中的逻辑区域的标签，运用用DIV标签可以将内容居中、创建列效果、创建不标签可以将内容居中、创建列效果、创建不同的颜色区域等，另外还可以绝对定位，这时的同的颜色区域等，另外还可以绝对定位，这时的DIV标签视为标签视为AP元素。元素。AP Div元素与以前版本中的元素与以前版本中的图层有一定的类似性，可以用于绝对定位网页元素。图层有一定的类似性，可以用于绝对定位网页元素。第5章 Dreamweaver与网络课件 1插入AP DivAP元素通常是绝对定位的Div标签，它是分配有绝对位置的HTML网页元素，在Dreamweaver CS4中可以轻松地创建AP Div。在网页中插入AP Div的操作比较简单，只需在【插入】工具栏的【规划】标签中单击按钮，然后按住鼠标左键(此光阴标变为“+外形)在编辑窗口中拖曳即可。另外，假设按住按钮将其拖曳到编辑窗口中，或者单击菜单栏中的【插入】【规划对象】【AP Div】命令，那么可以在编辑窗口中插入固定大小的AP元素。第5章 Dreamweaver与网络课件 在创建的AP Div中定位光标，即可向其中添加网页元素，如图片、动画、文本、表格等内容。默许情况下，Dreamweaver 中不显示AP Div锚点。假设读者希望创建AP Div后可以看到其锚点，可以单击菜单栏中的【编辑】【首选参数】命令，在弹出的【首选参数】对话框的【分类】列表中单击“不可见元素选项，选择其中的【AP元素的锚点】复选框即可，如图562所示。第5章 Dreamweaver与网络课件 图562 【首选参数】对话框第5章 Dreamweaver与网络课件 2操作AP Div在编辑窗口中创建了多个AP Div后，只需新创建的AP Div处于激活形状：其左上角有一个控制柄，同时边框呈蓝色高亮显示，如图563所示，而未被激活的AP Div边框为灰色。 假设要对其它的AP Div进展操作，必需先激活它或使其处于选择形状：单击AP Div内的任何位置，可以激活它；单击AP Div的边框或锚点，可以选择AP Div元素，被选择的AP Div边框上含有八个控制点，如图564所示。第5章 Dreamweaver与网络课件 图563 激活形状的AP Div第5章 Dreamweaver与网络课件 图564 被选择的AP Div第5章 Dreamweaver与网络课件 激活或选择AP Div后，可以对其进展如下操作： 激活AP Div后，可以对其中的内容进展编辑操作。 选择AP Div后，按住控制柄拖曳鼠标，可以挪动AP Div的位置。另外，利用键盘上的方向键也可以挪动它：每按一次方向键，可以使其向相应的方向挪动一个像素；假设按住Shift键的同时按方向键，每次可以挪动一个网格单位。 第5章 Dreamweaver与网络课件 选择AP Div后，按住边框上的控制点拖曳鼠标，可以调整其大小。按住Ctrl键的同时每按一次方向键，可以向相应的方向调整一个像素；假设按住Ctrl+Shift键的同时按方向键，那么每次可以调整一个网格单位。在Dreamweaver CS4中，假设要对AP Div实现准确定位，需求先在编辑窗口中显示网格，然后挪动AP Div中的对象，使其对齐网格。单击菜单栏中的【查看】【网格设置】命令，可以显示或编辑网格，如图565所示。 第5章 Dreamweaver与网络课件 图565 【网格设置】子菜单第5章 Dreamweaver与网络课件 选择【显示网格】命令，可以在编辑窗口中显示网格。 选择【靠齐到网格】命令，可以使要挪动的AP Div自动吸附到网格线上。 选择【网格设置】命令，可以翻开【网格设置】对话框，如图566所示。在该对话框中可以设置网格线的颜色、网格线的间隔大小以及网格线的显示方式等选项。 第5章 Dreamweaver与网络课件 图566 【网格设置】对话框第5章 Dreamweaver与网络课件 3设置设置AP Div的属性的属性在编辑窗口中选择了在编辑窗口中选择了AP Div以后，可以在【属性】面板以后，可以在【属性】面板中设置其相关属性，如图中设置其相关属性，如图5-67所示。所示。 第5章 Dreamweaver与网络课件 图567 【属性】面板第5章 Dreamweaver与网络课件 【CSSP元素】：用于为选定的AP元素指定一个ID，便于程序调用。 【左】：用于定义AP元素左边框距窗口左边的间隔。假设嵌套，那么指距父AP元素左边框的间隔。 【上】：用于定义AP元素上边框距编辑窗口顶边的间隔。假设嵌套，那么指距父AP元素上边框的间隔。 【宽】和【高】：用于设置AP元素的宽度和高度。 【Z轴】：用于设置AP元素在Z轴上的叠放顺序。第5章 Dreamweaver与网络课件 【可见性】：用于设置AP元素的显示或隐藏形状。选择“inherit(承继)选项，当前AP元素运用父AP元素的可见性属性；选择“visible(可见)选项，那么无论父AP元素能否可见，当前AP元素都可见；选择“hidden(隐藏)选项，那么无论父AP元素能否可见，该AP元素都隐藏；选择“default(默许)选项，那么运用阅读器的默许设置。 【背景图像】：用于为AP元素选择一个背景图像。 【背景颜色】：用于为AP元素选择一种背景颜色。 第5章 Dreamweaver与网络课件 【溢出】：用于设置AP 元素的内容溢出时的处置方式。选择“visible(可见溢出)选项时，当AP元素中的内容超出了范围，将自动向右下方扩展，使溢出的部分也可以在页面中显示；选择“hidden(隐藏溢出)选项时，那么不改动AP元素的大小，并隐藏溢出部分；选择“scroll(滚动溢出)选项时，将坚持AP元素的大小不变，但出现程度和垂直滚动条；选择“auto(自动溢出)选项时，可以根据AP元素的内容能否溢出自动显示滚动条。当内容溢出时，将显示滚动条，反之那么不显示。 【剪辑】：用于设置AP元素的可见区域。 第5章 Dreamweaver与网络课件 4【AP元素】面板元素】面板利用系统提供的【利用系统提供的【AP元素】面板，可以对元素】面板，可以对AP元素进展元素进展管理，例如显示或隐藏、改动叠放顺序、删除等。管理，例如显示或隐藏、改动叠放顺序、删除等。单击菜单栏中的【窗口】单击菜单栏中的【窗口】【AP元素】命令，可以翻开元素】命令，可以翻开【AP元素】面板，如图元素】面板，如图5-68所示。【所示。【AP元素】面板中显示元素】面板中显示了网页中的一切了网页中的一切AP元素，面板中的元素，面板中的AP元素按照元素按照Z值大小降序值大小降序陈列，其中，陈列，其中，Z值大的排在面板的上方，嵌套的值大的排在面板的上方，嵌套的AP元素显示元素显示在父级的下方。在父级的下方。 第5章 Dreamweaver与网络课件 图568 【AP元素】面板第5章 Dreamweaver与网络课件 在【AP元素】面板中可以对AP元素进展如下操作： 单击【AP元素】面板中的眼睛图标，可以显示或隐藏AP元素。 双击AP元素的称号，可以更改其称号(留意不要运用中文，否那么能够会导致错误)。 在【AP元素】面板中选择AP元素，按下键盘上的Delete键，可以删除AP元素及其中的内容。第5章 Dreamweaver与网络课件 单击AP元素的Z轴值，输入新的Z值，可以改动其叠放顺序。 在【AP元素】面板中按住AP元素的称号拖曳鼠标，可以改动其位置。 假设按住Ctrl键的同时将一个AP元素拖曳到另一个AP元素位置处，那么可以将被拖曳的AP元素变为子级。第5章 Dreamweaver与网络课件 在网络上，表单的运用范围非常广泛，无论是电子商务、网上调查、网上报名、网上留言和收发电子邮件等，都是经过表单来操作的。运用表单，网络可以接纳用户输入的信息，从而更好地实现用户与网络的交互。在Dreamweaver CS4中，用户可以经过单击【插入】工具栏的【表单】标签中的各个按钮将表单域和表单对象添加到页面中，也可以单击菜单栏中的【插入】【表单】命令，将表单域和表单对象添加到页面中。如图569所示为【插入】工具栏的【表单】标签。 5.6 表表 单单第5章 Dreamweaver与网络课件 图569 【表单】标签 第5章 Dreamweaver与网络课件 对于表单中的每一个表单对象的作用、属性以及运用方法，我们不再详细引见，在这里主要经过实例学习如何创建表单。例57制造一个表单。1) 将光标定位在网页中要创建表单的位置处。2) 在【插入】工具栏中选择【表单】标签，单击其中的按钮，那么页面中将出现一个红色的虚线框，表示在页面中创建了一个表单域，如图570所示。 第5章 Dreamweaver与网络课件 图570 创建的表单域第5章 Dreamweaver与网络课件 3) 在【属性】面板中设置表单域的属性，如图571所示。 【表单ID】：用于设置表单的称号。 【动作】：用于输入或显示将要处置表单信息的脚本或运用程序所在的URL途径。 【方法】：用于选择处置表单数据的方式。可以选择“默许、“GET(表单用于接纳信息)和“POST(表单用于发送信息)选项。【编码类型】：用于指定对提交给效力器进展处置的数据运用的编码类型。默许设置“application/xwwwformurlencoded通常与“POST方法配合运用。 第5章 Dreamweaver与网络课件 图571 【属性】面板第5章 Dreamweaver与网络课件 4) 确认光标位置在表单域内，在【表单】标签中单击按钮，那么弹出【输入标签辅助功能属性】对话框，如图572所示。 【ID】：用于为表单对象指定一个ID号。 【标签】：用于输入表单对象的标签文本。 【款式】：用于选择表单对象的标签文本在HTML中的书写规那么。 【位置】：用于设置标签文本的位置。 【访问键】：用于设置在阅读器中选择表单对象的快捷键。 【Tab键索引】：用于为表单对象设置Tab顺序。 第5章 Dreamweaver与网络课件 图572 【输入标签辅助功能属性】对话框第5章 Dreamweaver与网络课件 5) 根据需求设置好选项，如在【标签】中输入“姓名，然后单击按钮，那么在表单域中插入了文本域，如图573所示。6) 在【属性】面板中设置文本域的属性，如图574所示。第5章 Dreamweaver与网络课件 图573 插入的文本域第5章 Dreamweaver与网络课件 图574 【属性】面板第5章 Dreamweaver与网络课件 【文本域】：用于输入文本域的称号。 【字符宽度】：用于设置文本域的宽度，即文本域中最多可以显示的字符数。 【最多字符数】：用于设置文本域中最多可以输入的字符数。 【类型】：用于设置文本域的类型，选择“单行选项时，文本域为单行文本框；选择“多行选项时，文本域为多行文本框；选择“密码选项时，文本域为一个单行的密码框。 第5章 Dreamweaver与网络课件 【初始值】：用于输入文本域中默许显示的初始信息。假设文本域为密码框，那么输入的信息在表单中将以“*显示。 【禁用】：选择该选项，那么为禁用形状，只显示固定值。 【只读】：选择该选项，那么文本域为只读，不能填写。第5章 Dreamweaver与网络课件 7) 用一样的方法，可以在表单域中插入其它的表单对象，其插入方法与插入文本域的方法根本类似，其属性设置也大同小异，这里不再详细引见了。如图575所示是一个阅读器中常见的典型表单。需求强调的是，当用户经过表单将数据传到效力器之后，效力器端普通运用Java、Perl、JavaScript、VBScript等言语编写的程序进展处置。第5章 Dreamweaver与网络课件 图575 阅读器中的表单第5章 Dreamweaver与网络课件 5.7.1 站点的测试站点的测试在将站点上传到效力器之前，必需先对站点进在将站点上传到效力器之前，必需先对站点进展全面测试，主要包括测试阅读器的兼容性、测试展全面测试，主要包括测试阅读器的兼容性、测试超链接的有效性、在阅读器中测试网页的正确性等，超链接的有效性、在阅读器中测试网页的正确性等，这样才干保证发布站点以后，尽能够少地出现错误。这样才干保证发布站点以后，尽能够少地出现错误。 5.7 教学站点的发布教学站点的发布 第5章 Dreamweaver与网络课件 1测试阅读器的兼容性普通情况下，在本地机上创建的站点和网页不一定能在一切的阅读器中正常显示，因此，发布站点之前需求测试阅读器的兼容性，以便发现问题及时进展修正。测试阅读器兼容性的操作步骤如下：1) 在【文件】面板中选择要检查的网页。2) 在【文档】工具栏中单击按钮，在翻开的下拉菜单中选择【设置】命令，那么弹出【目的阅读器】对话框，如图576所示。 第5章 Dreamweaver与网络课件 图576 【目的阅读器】对话框第5章 Dreamweaver与网络课件 3) 在对话框中选择要测试的阅读器，然后单击按钮。4) 单击菜单栏中的【文件】【检查页】【阅读器兼容性】命令，那么翻开【阅读器兼容性】面板，如图577所示。5) 在【阅读器兼容性】面板中罗列了阅读器不支持的功能，并且显示了标志所在的行。根据面板中显示的检测结果，可以更改页面中相应的内容。修正之后再进展测试，直到没有错误为止。第5章 Dreamweaver与网络课件 图577 【阅读器兼容性】面板第5章 Dreamweaver与网络课件 2测试超链接的有效性在站点中，网页之间的相互跳转是经过超链接来实现的，因此，发布站点之前一定要确保站点中每一个超链接的有效性，防止产生断开的超链接。测试超链接有效性的根本步骤如下：1) 在【文件】面板中选择要检查的站点文件夹。2) 单击菜单栏中的【站点】【检查站点范围的链接】命令，那么翻开【链接检查器】面板，该面板中将显示整个站点中断掉的链接、外部链接与孤立的文件，如图578所示。 第5章 Dreamweaver与网络课件 图578 【链接检查器】面板第5章 Dreamweaver与网络课件 3) 在面板的【显示】下拉列表中选择要检查的链接方式。断掉的链接：用于检查能否存在断开的超链接。外部链接：用于检查文档的外部链接能否有效。孤立文件：用于检查站点中能否存在没有创建超链接的文件。4) 单击面板左侧的按钮，可以将检查结果保管起来，便于以后修正超链接时作为参考。第5章 Dreamweaver与网络课件 3在阅读器中测试网页的正确性在阅读器中测试网页的正确性经过在阅读器预览网页的方法来测试网页是一个非常有经过在阅读器预览网页的方法来测试网页是一个非常有效的途径，这种方法可以贯穿于整个网页设计和创建过程中，效的途径，这种方法可以贯穿于整个网页设计和创建过程中，经过它可以及时发现网页中存在的错误，防止反复出现一样经过它可以及时发现网页中存在的错误，防止反复出现一样的错误，也有利于及时纠正不妥之处。的错误，也有利于及时纠正不妥之处。在在Dreamweaver中，可以在任何时间经过目的阅读器预中，可以在任何时间经过目的阅读器预览网页，而不用首先保管文档，这时阅读器中的一切功能都览网页，而不用首先保管文档，这时阅读器中的一切功能都将发扬作用，包括将发扬作用，包括JavaScript、相对链接、绝对链接、相对链接、绝对链接、ActiveX控件等。运用这种方法测试网页的最大益处是可以控件等。运用这种方法测试网页的最大益处是可以及时地矫正网页中存在的错误。及时地矫正网页中存在的错误。第5章 Dreamweaver与网络课件 5.7.2 站点的发布站点的发布完成了站点的测试，确保站点可以正常运转以完成了站点的测试，确保站点可以正常运转以后，就可以发布站点，使其成为一个真正的站点了，后，就可以发布站点，使其成为一个真正的站点了，以实现网络教学。目前，大多数以实现网络教学。目前，大多数ISP都支持都支持FTP上传上传功能，我们可以运用功能，我们可以运用Dreamweaver CS4的站点发布的站点发布功能发布站点。功能发布站点。第5章 Dreamweaver与网络课件 1定义远程站点在发布站点之前，首先应该定义远程站点，并设置上传参数，详细步骤如下：1) 在【文件】面板中翻开要上传的本地站点，如图579所示。2) 单击菜单栏中的【站点】【管理站点】命令，那么弹出【管理站点】对话框，如图580所示。 第5章 Dreamweaver与网络课件 图579 【文件】面板 第5章 Dreamweaver与网络课件 图580 【管理站点】对话框 第5章 Dreamweaver与网络课件 3) 单击按钮，那么翻开【的站点定义为】对话框，在该对话框中选择【远程信息】选项，结果如图581所示。4) 在【访问】下拉列表中选择“FTP选项，结果如图582所示。第5章 Dreamweaver与网络课件 图581 【的站点定义为】对话框(1)第5章 Dreamweaver与网络课件 图582 【的站点定义为】对话框(2) 第5章 Dreamweaver与网络课件 【FTP主机】：用于输入FTP主机称号，必需是完好的Internet称号，例如：go.163。留意：主机称号前不要添加协议名。 【主机目录】：用于输入发布站点的途径，即站点在Internet效力器中的存放目录。 【登录】：用于输入用户在Internet效力器上的注册称号。 【密码】：用于输入用户的密码。第5章 Dreamweaver与网络课件 选择【运用Passive FTP】复选框，可以建立被动式FTP。普通情况下，假设防火墙配置要求运用被动式FTP，那么可选择该项。 选择【运用IPv6传输方式】复选框，那么启用IPv6的FTP效力器。IPv6即Internet协议第6版。 选择【运用防火墙】复选框，那么从防火墙后面衔接到远程效力器，单击按钮，可以设置防火墙主机或端口。 第5章 Dreamweaver与网络课件 选择【运用平安FTP】复选框，可以进展平安FTP身份验证。 选择【维护同步信息】复选框，那么自动同步维护本地文件与远程文件。默许情况下选择该选项。 选择【保管时自动将文件上传到效力器】复选框，Dreamweaver将在保管文件的同时把文件上传到远程站点。 选择【启用存回和取出】复选框，那么可以激活存回/取出系统。5) 单击按钮，前往【管理站点】对话框。6) 单击按钮完成设置。第5章 Dreamweaver与网络课件 2衔接效力器定义完远程站点以后，首先要将计算机衔接到远程效力器上，然后才可以上传站点。其操作步骤如下：1) 在【文件】面板中选择要上传的站点。2) 单击【文件】面板中的按钮，衔接远程效力器。3) 衔接胜利以后，那么【文件】面板中的按钮左下角的黑点变为绿点，阐明曾经衔接胜利。第5章 Dreamweaver与网络课件 3上传站点本地计算机与远程效力器胜利衔接以后，就可以发布站点了。在发布站点时，既可以发布整个站点，也可以发布部分站点。在【文件】面板中选择要发布的文件，单击面板中的按钮即可上传站点。