Dreamweaver-CS5中文版基础教程01课件.ppt

1、 本章简介本章简介： 网页是网站最基本的组成部分，网页是网站最基本的组成部分，网站之间并不是杂乱无章的，它们通网站之间并不是杂乱无章的，它们通过各种链接相互关联，从而描述相关过各种链接相互关联，从而描述相关的主题或实现相同的目的。本章主要的主题或实现相同的目的。本章主要讲述讲述Dreamweaver CS5Dreamweaver CS5的工作界面、的工作界面、创建网站框架、管理站点文件和文件创建网站框架、管理站点文件和文件夹及管理站点和网页文件头的设置。夹及管理站点和网页文件头的设置。第1章初识Dreamweaver CS5课堂学习目标Dreamweaver CS5Dreamweaver CS

2、5的工作界面的工作界面创建网站框架创建网站框架管理站点文件和文件夹管理站点文件和文件夹管理站点管理站点网页文件头设置网页文件头设置 1.1Dreamweaver CS3的工作界面友善的开始页面友善的开始页面不同风格的界面不同风格的界面伸缩自如的功能面板伸缩自如的功能面板多文档的编辑界面多文档的编辑界面新颖的新颖的“插入插入”面板面板更完整的更完整的CSS功能功能1.1.1友善的开始页面启动启动Dreamweaver CS5Dreamweaver CS5后首先看到的画面是开始页面，供用户选择新建文后首先看到的画面是开始页面，供用户选择新建文件的类型，或打开已有的文档等。老用户如果不太习惯开始页面

3、，可选择件的类型，或打开已有的文档等。老用户如果不太习惯开始页面，可选择“编编辑辑 首选参数首选参数”命令，弹出命令，弹出“首选参数首选参数”对话框，取消选择对话框，取消选择“显示欢迎屏幕显示欢迎屏幕”复选框。单击复选框。单击“确定确定”按钮完成设置。当用户再次启动按钮完成设置。当用户再次启动Dreamweaver CS5Dreamweaver CS5后，后，将不再显示开始页面。将不再显示开始页面。开始页面 “首选参数”对话框1.1.2不同风格的界面 Dreamweaver CS5 Dreamweaver CS5的操作界面新颖淡雅，布局紧凑，的操作界面新颖淡雅，布局紧凑，为用户提供了一个轻松、

4、愉悦的开发环境。为用户提供了一个轻松、愉悦的开发环境。 若户想修改操作界面的风格，切换到自己熟悉的开若户想修改操作界面的风格，切换到自己熟悉的开发环境，可选择发环境，可选择“窗口窗口 工作区布局工作区布局”命令，弹出其子命令，弹出其子菜单，在子菜单中选择菜单，在子菜单中选择“编码器编码器”或或“设计器设计器”命令。选命令。选择其中一种界面风格，页面会发生相应的改变。择其中一种界面风格，页面会发生相应的改变。1.1.3伸缩自如的功能面板在浮动面板的右上方单击按钮在浮动面板的右上方单击按钮 ，可以隐藏或展开面板。，可以隐藏或展开面板。如果用户觉得工作区不够大，可以将鼠标指针放在文档编辑窗如果用户觉

5、得工作区不够大，可以将鼠标指针放在文档编辑窗口右侧与面板交界的框线处，当鼠标指针呈双向箭头时拖曳鼠标，口右侧与面板交界的框线处，当鼠标指针呈双向箭头时拖曳鼠标，调整工作区的大小。若用户需要更大的工作区，可以将面板隐藏。调整工作区的大小。若用户需要更大的工作区，可以将面板隐藏。浮动面板按钮 缩放工作区1.1.4多文档的编辑界面Dreamweaver CSDreamweaver CS5 5提供了多文档的编辑界面，将多个文档整合在提供了多文档的编辑界面，将多个文档整合在一起，方便用户在各个文档之间切换。用户可以单击文档编辑窗口一起，方便用户在各个文档之间切换。用户可以单击文档编辑窗口上方的选项卡，切

6、换到相应的文档。通过多文档的编辑界面，用户上方的选项卡，切换到相应的文档。通过多文档的编辑界面，用户可以同时编辑多个文档可以同时编辑多个文档。多文档编辑界面1.1.5新颖的“插入”面板Dreamweaver CSDreamweaver CS5 5的的“插入插入”面板在菜单栏的下方。面板在菜单栏的下方。 “ “插入插入”面面板包括板包括“常用常用”、“布局布局”、“表单表单”、“数据数据”、“Spry”Spry”、“InContext”InContext”、“Editing”Editing”、“文本文本”、“收藏夹收藏夹”9 9个选项卡，个选项卡，将不同功能的按钮分门别类地放在不同的选项卡中。将

7、不同功能的按钮分门别类地放在不同的选项卡中。在在Dreamweaver Dreamweaver CSCS5 5中，中，“插入插入”面板可按菜单和选项卡两种方式显示。面板可按菜单和选项卡两种方式显示。新颖的“插入”面板1.1.6更完整的CSS功能传统传统的的HTMLHTML所提供的样式及排版功能非常有限，因此，复杂的所提供的样式及排版功能非常有限，因此，复杂的网页版面主要靠网页版面主要靠CSSCSS样式来实现。而样式来实现。而CSSCSS样式表的功能较多，语法比样式表的功能较多，语法比较复杂，需要用一个很好的工具软件有条不紊地整理复杂的较复杂，需要用一个很好的工具软件有条不紊地整理复杂的CSSC

8、SS源源代码，并适时地提供辅助说明。代码，并适时地提供辅助说明。Dreamweaver CS5Dreamweaver CS5就提供了这样方就提供了这样方便有效的便有效的CSSCSS功能功能。“属性”面板1.2创建网站框架站点管理器站点管理器创建文件夹创建文件夹定义新站点定义新站点创建和保存网页创建和保存网页1.2.1站点管理器站点站点管理器的主要功能包括新建站点、编辑站点、复制站点、管理器的主要功能包括新建站点、编辑站点、复制站点、删除站点以及导入或导出站点。若要管理站点，必须打开删除站点以及导入或导出站点。若要管理站点，必须打开“管理站管理站点点”对话框对话框。“文件”面板 “管理站点”面板

9、1.2.2创建文件夹建立站点前，要先在站点管理器中规划站点文件夹。建立站点前，要先在站点管理器中规划站点文件夹。新建文件夹的具体操作步骤如下。新建文件夹的具体操作步骤如下。（1 1）在站点管理器的右侧窗口中单击选择站点。）在站点管理器的右侧窗口中单击选择站点。 （2 2）通过以下几种方法新建文件夹。）通过以下几种方法新建文件夹。 选择选择“文件文件 新建文件夹新建文件夹”命令。命令。 用鼠标右键单击站点，在弹出的菜单中选择用鼠标右键单击站点，在弹出的菜单中选择“新建文件夹新建文件夹”命令。命令。 （3 3）输入新文件夹的名称。）输入新文件夹的名称。1.2.3定义新站点建立建立好站点文件夹后用户

10、就可定义新站点了。在好站点文件夹后用户就可定义新站点了。在Dreamweaver Dreamweaver CS5CS5中，站点通常包含两部分，即本地站点和远程站点。本地站点是中，站点通常包含两部分，即本地站点和远程站点。本地站点是本地计算机上的一组文件，远程站点是远程本地计算机上的一组文件，远程站点是远程WebWeb服务器上的一个位置。服务器上的一个位置。用户将本地站点中的文件发布到网络上的远程站点，使公众可以访用户将本地站点中的文件发布到网络上的远程站点，使公众可以访问它们。在问它们。在Dreamweaver CS5Dreamweaver CS5中创建中创建WebWeb站点，通常先在本地磁盘

11、上站点，通常先在本地磁盘上创建本地站点，然后创建远程站点，再将这些网页的副本上传到一创建本地站点，然后创建远程站点，再将这些网页的副本上传到一个远程个远程WebWeb服务器上，使公众可以访问它们服务器上，使公众可以访问它们。1.2.4创建和保存网页选择选择“文件文件 新建新建”命令，启用命令，启用“新建文档新建文档”对话框，创建空对话框，创建空白网页。白网页。网页设计完成后，选择网页设计完成后，选择“文件文件 保存保存”命令，弹出命令，弹出“另存为另存为”对话框，设置后单击对话框，设置后单击“保存保存”按钮，将该文档保存在站点文件夹中。按钮，将该文档保存在站点文件夹中。“新建文档”对话框 新建

12、空白文档1.3管理站点文件和文件夹重命名文件和文件夹重命名文件和文件夹移动文件和文件夹移动文件和文件夹删除文件或文件夹删除文件或文件夹1.3.1重命名文件和文件夹修改文件名或文件夹名称操作的具体步骤如下。修改文件名或文件夹名称操作的具体步骤如下。 （1 1）选择）选择“窗口窗口 文件文件”命令，启用命令，启用“文件文件”控制面板，在其控制面板，在其中选择要重命名的文件或文件夹。中选择要重命名的文件或文件夹。 （2 2）可以通过以下几种方法激活文件或文件夹的名称。）可以通过以下几种方法激活文件或文件夹的名称。 单击文件名，稍停片刻，再次单击文件名。单击文件名，稍停片刻，再次单击文件名。 用鼠标右

13、键单击文件或文件夹图标，在弹出的菜单中选择用鼠标右键单击文件或文件夹图标，在弹出的菜单中选择“编编辑辑 重命名重命名”命令。命令。 （3 3）输入新名称，按）输入新名称，按EnterEnter键。键。1.3.2移动文件和文件夹 移动文件名或文件夹名称的操作步骤如下。移动文件名或文件夹名称的操作步骤如下。 （1 1）选择）选择“窗口窗口 文件文件”命令，启用命令，启用“文件文件”控制面板，在控制面板，在其中选择要移动的文件或文件夹。其中选择要移动的文件或文件夹。 （2 2）通过以下几种方法移动文件或文件夹。）通过以下几种方法移动文件或文件夹。 复制该文件或文件夹，然后粘贴在新位置。复制该文件或文

14、件夹，然后粘贴在新位置。 将该文件或文件夹直接拖曳到新位置。将该文件或文件夹直接拖曳到新位置。 （3 3）“文件文件”控制面板会自动刷新，这样就可以看到该文件或控制面板会自动刷新，这样就可以看到该文件或文件夹在新位置上。文件夹在新位置上。1.3.3删除文件或文件夹 删除文件或文件夹有以下几种方法。删除文件或文件夹有以下几种方法。 选择选择“窗口窗口 文件文件”命令，启用命令，启用“文件文件”控制面板，在其中控制面板，在其中选择要删除的文件或文件夹，按选择要删除的文件或文件夹，按DeleteDelete键进行删除。键进行删除。 用鼠标右键单击要删除的文件或文件夹，从弹出的菜单中选择用鼠标右键单击

15、要删除的文件或文件夹，从弹出的菜单中选择“编辑编辑 删除删除”命令。命令。1.4管理站点打开站点打开站点编辑站点编辑站点复制站点复制站点删除站点删除站点导入和导出站点导入和导出站点1.4.1打开站点 当要修改某个网站的内容时，首先要打开站点。打开站点就是当要修改某个网站的内容时，首先要打开站点。打开站点就是在各站点间进行切换。打开站点的具体操作步骤如下。在各站点间进行切换。打开站点的具体操作步骤如下。 （1 1）启动）启动Dreamweaver CS5Dreamweaver CS5。 （2 2）选择）选择“窗口窗口 文件文件”命令，启用命令，启用“文件文件”控制面板，在控制面板，在其中选择要打

16、开的站点名，打开站点其中选择要打开的站点名，打开站点。选择站点 打开站点1.4.2编辑站点 有时用户需要修改站点的一些设置，此时需要编辑站点。例有时用户需要修改站点的一些设置，此时需要编辑站点。例如，修改站点的默认图像文件夹的路径，具体的操作步骤如下。如，修改站点的默认图像文件夹的路径，具体的操作步骤如下。 （1 1）选择）选择“站点站点 管理站点管理站点”命令，启用命令，启用“管理站点管理站点”对对话框。话框。 （2 2）在对话框中，选择要编辑的站点名，单击）在对话框中，选择要编辑的站点名，单击“编辑编辑”按钮，按钮，弹出弹出“站点设置对象站点设置对象 未命名站点未命名站点2”2”对话框，选

17、择对话框，选择“高级设置高级设置”选项卡，此时可根据需要进行修改，单击选项卡，此时可根据需要进行修改，单击“保存保存”按钮完成设置，按钮完成设置，回到回到“管理站点管理站点”对话框对话框。（3 3）如果不需要修改其他站点，可单击如果不需要修改其他站点，可单击“完成完成”按钮关闭按钮关闭“管理站点管理站点”对话框对话框。1.4.3复制站点 复制站点可省去重复建立多个结构相同站点的操作步骤，可复制站点可省去重复建立多个结构相同站点的操作步骤，可以提高用户的工作效率。在以提高用户的工作效率。在“管理站点管理站点”对话框中可以复制站点，对话框中可以复制站点，其具体操作步骤如下。其具体操作步骤如下。 （

18、1 1）在）在“管理站点管理站点”对话框左侧的站点列表中选择要复制的对话框左侧的站点列表中选择要复制的站点，单击站点，单击“复制复制”按钮进行复制。按钮进行复制。 （2 2）用鼠标左键双击新复制出的站点，在弹出的）用鼠标左键双击新复制出的站点，在弹出的“站点定义站点定义为为”对话框中更改新站点的名称。对话框中更改新站点的名称。1.4.4删除站点 删除站点只是删除删除站点只是删除Dreamweaver CS5Dreamweaver CS5同本地站点间的关系，而本同本地站点间的关系，而本地站点包含的文件和文件夹仍然保存在磁盘原来的位置上。换句话说，地站点包含的文件和文件夹仍然保存在磁盘原来的位置上

19、。换句话说，删除站点后，虽然站点文件夹保存在计算机中，但在删除站点后，虽然站点文件夹保存在计算机中，但在Dreamweaver CS5Dreamweaver CS5中已经不存在此站点。例如，在按如下步骤删除站点后，在中已经不存在此站点。例如，在按如下步骤删除站点后，在“管理站管理站点点”对话框中，不存在该站点的名称。对话框中，不存在该站点的名称。 在在“管理站点管理站点”对话框中删除站点的具体操作步骤如下。对话框中删除站点的具体操作步骤如下。 （1 1）在）在“管理站点管理站点”对话框左侧的站点列表中选择要删除的站点。对话框左侧的站点列表中选择要删除的站点。 （2 2）单击）单击“删除删除”按

20、钮即可删除选择的站点。按钮即可删除选择的站点。1.4.5导入和导出站点 如果在计算机之间移动站点，或者与其他用户共同设计站如果在计算机之间移动站点，或者与其他用户共同设计站点，可通过点，可通过 Dreamweaver CS5Dreamweaver CS5的导入和导出站点功能实现。导出的导入和导出站点功能实现。导出站点功能是将站点导出为站点功能是将站点导出为“.ste”.ste”格式文件，然后在其他计算机格式文件，然后在其他计算机上将其导入到上将其导入到Dreamweaver CS5Dreamweaver CS5中。中。导出站点导出站点导入站点导入站点1.5网页文件头设置插入搜索关键字插入搜索关

21、键字插入作者和版权信息插入作者和版权信息设置刷新时间设置刷新时间设置描述信息设置描述信息设置页面中所有链接的基准链接设置页面中所有链接的基准链接设置当前文件与其他文件的关联性设置当前文件与其他文件的关联性1.5.1插入搜索关键字 在万维网上通过搜索引擎查找资料时，搜索引擎自动读取网页在万维网上通过搜索引擎查找资料时，搜索引擎自动读取网页中中标签的内容，所以网页中的搜索关键字非常重要，它可以标签的内容，所以网页中的搜索关键字非常重要，它可以间接地宣传网站，提高访问量。但搜索关键字并不是字数越多越好，间接地宣传网站，提高访问量。但搜索关键字并不是字数越多越好，因为有些搜索引擎限制索引的关键字或字符

22、的数目，当超过了限制因为有些搜索引擎限制索引的关键字或字符的数目，当超过了限制的数目时，它将忽略所有的关键字，所以最好只使用几个精选的关的数目时，它将忽略所有的关键字，所以最好只使用几个精选的关键字。一般情况下，关键字是对网页的主题、内容、风格或作者等键字。一般情况下，关键字是对网页的主题、内容、风格或作者等内容的概括内容的概括。1.5.2插入作者和版权信息要设置网页的作者和版权信息，可选择要设置网页的作者和版权信息，可选择“插入插入 HTML HTML 文件文件头标签头标签 Meta” Meta”命令，启用命令，启用“META”“META”对话框。对话框。“META”对话框1.5.3设置刷新

23、时间 要指定载入页面刷新或者转到其他页面的时间，可设置文件头要指定载入页面刷新或者转到其他页面的时间，可设置文件头部的刷新时间项，具体操作步骤如下。部的刷新时间项，具体操作步骤如下。 （1 1）选中文档窗口中的）选中文档窗口中的“代码代码”视图，将鼠标指针放在视图，将鼠标指针放在标签中，选择标签中，选择“插入插入 HTML HTML 文件头标签文件头标签 刷新刷新”命令，启用命令，启用“刷新刷新”对话框对话框。（2 2）在在“刷新刷新”对话框中设置刷新时间对话框中设置刷新时间。“刷新”对话框1.5.4设置描述信息 搜索引擎也可通过读取搜索引擎也可通过读取 标签的说明内容来查找信息，标签的说明内

24、容来查找信息，但说明信息主要是设计者对网页内容的详细说明，而关键字可以让但说明信息主要是设计者对网页内容的详细说明，而关键字可以让搜索引擎尽快搜索到网页。设置网页说明信息的具体操作步骤如下。搜索引擎尽快搜索到网页。设置网页说明信息的具体操作步骤如下。 （1 1）选中文档窗口中的）选中文档窗口中的“代码代码”视图，将鼠标指针放在视图，将鼠标指针放在标签中，选择标签中，选择“插入插入 HTML HTML 文件头标签文件头标签 说明说明”命令，启用命令，启用“说明说明”对话框。对话框。 （2 2）在）在“说明说明”对话框中设置说明信息。对话框中设置说明信息。“META”对话框1.5.5设置页面中所有

25、链接的基准链接 基准链接类似于相对路径，若要设置网页文档中所有链接都以基准链接类似于相对路径，若要设置网页文档中所有链接都以某个链接为基准，可添加一个基本链接，但其他网页的链接与此页某个链接为基准，可添加一个基本链接，但其他网页的链接与此页的基准链接无关。设置基准链接的具体操作如下。的基准链接无关。设置基准链接的具体操作如下。 （1 1）选中文档窗口中的）选中文档窗口中的“代码代码”视图，将鼠标指针放在视图，将鼠标指针放在标签中，选择标签中，选择“插入插入 HTML HTML 文件头标签文件头标签 基础基础”命令，弹出命令，弹出“基础基础”对话框。对话框。 （2 2）在）在“基础基础”对话框中

26、设置对话框中设置“HREF”HREF”和和“目标目标”两个选项两个选项。“基础”对话框1.5.6设置当前文件与其他文件的关联性 部分的部分的标签可以定义当前文档与其他文件之间标签可以定义当前文档与其他文件之间的关系，它与的关系，它与 部分中的文档之间的部分中的文档之间的 HTML HTML 链接是不一样的，链接是不一样的，其具体操作步骤如下。其具体操作步骤如下。 （1 1）选中文档窗口中的）选中文档窗口中的“代码代码”视图，将光标放在视图，将光标放在标签标签中，选择中，选择“插入插入 HTML HTML 文件头标签文件头标签 链接链接”命令，弹出命令，弹出“链链接接”对话框对话框。（2 2）在在“链接链接”对话框中设置相应的选项对话框中设置相应的选项。“链接”对话框