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