DreamweaverCS4教学与自学教程PPT文档格式.ppt

DreamweaverCS4教学与自学教程PPT文档格式.ppt

《DreamweaverCS4教学与自学教程PPT文档格式.ppt》由会员分享，可在线阅读，更多相关《DreamweaverCS4教学与自学教程PPT文档格式.ppt（217页珍藏版）》请在冰豆网上搜索。

第一次安装该软件并启动后，出现的工作界面如图5-1所示，该工作界面称为“设计器”界面。

对于老用户而言，如果不适应这种工作界面，可以通过界面切换菜单进行切换，选择适合自己的界面模式。

本章将以“经典”界面模式介绍DreamweaverCS4在网络课件中的应用，如图5-2所示。

5.2DreamweaverCS4的工作界面,图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键；

如需换