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