DreamweaverCS4教学与自学教程

第5章Dreamweaver与网络课件DreamweaverCS4此章节均为DreamweaverCS4的学习以便于教学及自学者使用第5章Dreamweaver与网络课件5.1概述5.2DreamweaverCS4的工作界面5.3建立教学站点5.4编辑教学网页5.5网页的布局方法5.6表单5.7教学站点的发布第5章Dreamweaver与网络课件多媒体CAI课件的特点是集文本、图形图像、声音、动画及数字电影于一体，可谓声光电并存、声情画并茂。正因为如此，课件的体积往往很大，这与网络传输是相互矛盾的。因为网络传输速度的“瓶颈”严重制约了大体积的“信息文件”的传播与发送。所以，网络课件的制作原则应该区别于其它形式的课件，以短小精悍为最高原则；其次，由于网络课件的使用对象具有不可预知性，因此要求网络课件在语言上必须更规范、更精确，同时必须具有更好的引导性和交互性。5.1概述第5章Dreamweaver与网络课件牢固掌握了网络课件的制作原则以后，接下来就是选择网络课件的制作工具了。目前可以用于制作网络课件的工具很多，几乎所有的网页制作软件都可以用于制作网络课件，例如FrontPage、Dreamweaver等，本章主要介绍DreamweaverCS4的应用技术。制作网络课件实质上就是建立教学站点，DreamweaverCS4是目前最流行的一款所见即所得的网站开发与网页制作软件，在制作网络课件方面具有独到的优势。它是一款所见即所得的网页编辑工具，具有功能强大、界面简洁、简单实用等特点，是最好的网页制作软件，也是制作网络课件的首选软件。第5章Dreamweaver与网络课件DreamweaverCS4提供了多种工作界面，以适合不同的工作人员。第一次安装该软件并启动后，出现的工作界面如图5-1所示，该工作界面称为“设计器”界面。对于老用户而言，如果不适应这种工作界面，可以通过界面切换菜单进行切换，选择适合自己的界面模式。本章将以“经典”界面模式介绍DreamweaverCS4在网络课件中的应用，如图5-2所示。5.2DreamweaverCS4的工作界面第5章Dreamweaver与网络课件图5-1“设计器”界面第5章Dreamweaver与网络课件图5-2“经典”界面第5章Dreamweaver与网络课件由上图可以看出，DreamweaverCS4的工作界面主要由菜单栏、【插入】工具栏、【文档】工具栏、编辑窗口、状态栏、【属性】面板和各种面板组构成，下面简单介绍各主要组成部分。第5章Dreamweaver与网络课件5.2.1【插入】工具栏DreamweaverCS4的【插入】工具栏中包含了8个标签，分别为：常用、布局、表单、数据、Spry、InContextEditing、文本、收藏夹，如图5-3所示。单击【插入】工具栏中的不同标签可以进行切换，每一个标签中包括了若干的插入对象按钮。单击【插入】工具栏中的对象按钮或者将按钮拖曳到编辑窗口内，即可将相应的对象添加到网页文件中，并可在网页中编辑添加的对象。第5章Dreamweaver与网络课件图5-3【插入】工具栏第5章Dreamweaver与网络课件5.2.2【文档】工具栏【文档】工具栏中包含了代码视图、拆分视图、设计视图、实时视图、实时代码、文档标题、文件管理、浏览器预览、可视化选项等按钮，如图5-4所示。第5章Dreamweaver与网络课件图5-4【文档】工具栏第5章Dreamweaver与网络课件【文档】工具栏中的前三个按钮用于切换视图模式。单击按钮可以进入代码视图，这是一个用于编写和编辑HTML、JavaScript、服务器语言代码(如ASP或ColdFusion标记语言)以及其他类型代码的手工编码环境。单击按钮可以进入代码视图与设计视图，在该视图中，窗口被分成上、下两部分，顶部窗口用于编写HTML代码，底部窗口用于可视化编辑网页。单击按钮可以进入设计视图，这是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，Dreamweaver中显示的文档处于可视化编辑状态，页面效果类似于在浏览器中查看页面时看到的内容。第5章Dreamweaver与网络课件5.2.3状态栏在DreamweaverCS4状态栏中可以显示当前光标所在位置的HTML标记，通过此标记可以确定所编辑的网页内容。状态栏上还可以显示当前网页的编辑窗口大小、当前网页文件的大小与网页的传输速度，如图5-5所示。另外，DreamweaverCS4的状态栏上新增了视图控制工具，其中选取工具用于选择页面中的操作对象；手形工具用于平移视图；缩放工具用于放大或缩小视图显示；而设置缩放比率选项框可以通过确切的数值控制视图的缩放。第5章Dreamweaver与网络课件图5-5状态栏第5章Dreamweaver与网络课件5.2.4【属性】面板【属性】面板用于显示或修改当前所选对象的属性。在页面中选择不同的对象时，【属性】面板中将显示出不同对象的属性。例如选择了文字，在【属性】面板中显示的是文字的属性；如果选择了图像，则【属性】面板中将显示图像的属性。另外，还可以直接在【属性】面板中修改所选对象的属性，修改后的效果可以在编辑窗口中反映出来。如图5-6所示为选择表格时的【属性】面板。在【属性】面板的右下角单击三角形的切换按钮，可以将【属性】面板切换为常用属性或全部属性模式，如图5-7所示。第5章Dreamweaver与网络课件图5-6【属性】面板第5章Dreamweaver与网络课件图5-7切换后的【属性】面板第5章Dreamweaver与网络课件5.2.5面板组面板组是指组合在一起的面板集合，它为我们编辑网页提供了既直观又快速的操作方法，是设计制作网页时不可缺少的工具。单击【窗口】菜单下的相应命令，可以打开或关闭面板。当我们打开一个面板时，与其成组的面板会同时出现，如图5-8所示。第5章Dreamweaver与网络课件图5-8打开的面板组第5章Dreamweaver与网络课件单击面板组中的标签，可以在不同的面板之间切换。另外，将光标指向面板标签，按住鼠标左键向外拖动，可以把该面板从面板组中分离出来；分离出来的面板组还可以再放回去，只需拖动面板标签到面板组中即可。第5章Dreamweaver与网络课件5.3.1规划站点规划站点是建立站点的前期准备工作，主要包括规划站点主题、规划站点结构、设计网页版面、收集站点素材等。例如，要建立一个教学网站，该网站主要介绍语文、历史、地理等学科的教学内容。我们首先要考虑站点的服务对象，确定主题内容，同样是介绍语文、历史、地理等学科的站点，我们是侧重课外辅导，还是侧重考试指南？这就是主题问题，只有确定了主题，才能有的放矢地进行工作。5.3建立教学站点第5章Dreamweaver与网络课件确定了站点主题以后，需要进行站点结构的规划，同一个网站要介绍三个学科的内容，如何组织才能脉络清晰，这是动手制作站点之前必须做好的一项工作。当确定了站点主题、组织结构以后，接下来的工作就是设计网页版面，网页作为一种视觉语言，应十分注重其版式的设计，其中主要包括色彩、构图两大方面的内容，这完全取决于制作者的综合水平，包括审美能力、设计能力、文字能力等多方面的素质。第5章Dreamweaver与网络课件以上三项工作完成以后，接下来需要收集与整理站点素材，这是一项费时费力的工作，需要精心组织与筹备。例如，为了使教学站点具有生动性、吸引性，达到生动简洁、便于教学的目的，要求每一部分都要有内容文字、相关图像，甚至还要有动画、声音等装饰。因此在前期的准备工作中，搜集素材的工作量最大。第5章Dreamweaver与网络课件准备好素材后，需要确定站点在本地计算机上的存放位置。通常情况下，首先根据站点结构在本地计算机上建立一个站点文件夹，如在C盘根目录下建立一个文件夹作为站点文件夹，命名为“教学站点”，用于存放站点的所有文件。其次，为了更好地管理站点内容，便于以后的站点更新与维护工作，需要在站点文件夹下分别建立用于存放站点文件和素材的子文件夹，如用于存放图像、动画、应用程序、插件等的文件夹，文件夹的命名最好与所存放的内容相关，以便查找。第5章Dreamweaver与网络课件5.3.2创建站点的基本结构创建站点的基本结构，是指确定站点的整体结构和网页之间的结构关系。创建站点的基本结构时首先要建立空白的站点，其次是添加网页文件与站点文件夹。1．创建站点DreamweaverCS4提供了两种创建站点的方法：一是在启动Dreamweaver时通过欢迎画面创建；二是在Dreamweaver工作环境下，单击菜单栏中的【站点】\【新建站点】命令。这两种创建站点的方法都是通过向导完成的，非常直观。〖例5-1〗建立kejian站点。1)启动DreamweaverCS4，则弹出欢迎画面，如图5-9所示。第5章Dreamweaver与网络课件图5-9欢迎画面第5章Dreamweaver与网络课件2)单击【Dreamweaver站点】选项，则弹出【……的站点定义为】对话框，在该对话框中有两个标签，其中【基本】标签就是站点定义向导，第一个对话框如图5-10所示，这里有两个选项，第一个选项要求输入站点名称，以便在Dreamweaver中标识该站点，这里输入“kejian”。第二个选项要求输入站点的http地址，如果还没有域名，可以暂时不填。第5章Dreamweaver与网络课件图5-10第一个向导对话框第5章Dreamweaver与网络课件3)单击按钮，进入站点定义向导的第二个对话框，如图5-11所示。该对话框询问用户是否要使用服务器技术，选择【否，我不想使用服务器技术】选项，表示该站点是一个静态站点，没有动态页。第5章Dreamweaver与网络课件图5-11第二个向导对话框第5章Dreamweaver与网络课件4)单击按钮，进入站点定义向导的第三个对话框，如图5-12所示。该对话框询问用户如何使用文件，这里选择第一个选项，然后在下面的文本框中指定一个文件夹，Dreamweaver将在其中存储站点文件。5)单击按钮，进入站点定义向导的第四个对话框，如图5-13所示。该对话框询问用户如何连接到远程服务器，这里从下拉列表中选择“无”。第5章Dreamweaver与网络课件图5-12第三个向导对话框第5章Dreamweaver与网络课件图5-13第四个向导对话框第5章Dreamweaver与网络课件6)单击按钮，进入站点定义向导的第五个对话框，其中显示了用户的设置概要，如图5-14所示。7)单击按钮，则通过向导建立了一个本地教学站点。第5章Dreamweaver与网络课件图5-14第五个向导对话框第5章Dreamweaver与网络课件建立了本地站点以后，新建的站点将显示在【文件】面板中。单击菜单栏中的【窗口】\【文件】命令，或者按下F8键，可以打开【文件】面板。该面板中显示了本地站点的名称以及本地站点的文件夹等选项，如图5-15所示。现在我们已经创建了一个教学站点，不过，目前为止这个站点还是空的，没有实际内容，因此必须向站点中添加相关的内容。第5章Dreamweaver与网络课件图5-15【文件】面板第5章Dreamweaver与网络课件2．添加网页文件与站点文件夹新建的站点是空白的，其中没有任何内容。根据站点的规划，需要向其中添加网页文件或站点文件夹。网页文件即上网时浏览的HTML文件；站点文件夹则用于管理站点内容，因为站点中会有很多文件，为了有效地管理文件，可以将它们分门别类地存放在文件夹中，如图像文件夹可以专门用于存放图像、动画等。第5章Dreamweaver与网络课件在站点中添加网页文件与文件夹的方法基本一致，操作步骤如下：1)在【文件】面板中单击鼠标右键，则弹出一个快捷菜单。2)选择快捷菜单中的【新建文件】命令，则新建了一个网页文件，如图5-16所示。第5章Dreamweaver与网络课件图5-16新建的网页文件第5章Dreamweaver与网络课件3)在光标位置处输入网页的名称，然后按下Enter键确认，则完成了网页文件的添加。