Dreamweaver CS6简介

1、 本章简介本章简介： 网页是网站最基本的组成部分，网站之间网页是网站最基本的组成部分，网站之间 并不是杂乱无章的，它们通过各种链接相互关并不是杂乱无章的，它们通过各种链接相互关 联，从而描述相关的主题或实现相同的目的。联，从而描述相关的主题或实现相同的目的。 本章讲述网站的建设基础，包括本章讲述网站的建设基础，包括IPIP地址与域名、地址与域名、 动态数据库开发以及动态数据库开发以及Dreamweaver CS6Dreamweaver CS6的工作的工作 界面，最后重点讲述了管理站点的方式。界面，最后重点讲述了管理站点的方式。 第第1 1章初识章初识Dreamweaver CS6Dreamwe

2、aver CS6 课堂学习目标课堂学习目标 Dreamweaver CS6Dreamweaver CS6的工作界面的工作界面 创建网站框架创建网站框架 管理站点文件和文件夹管理站点文件和文件夹 管理站点管理站点 网页文件头设置网页文件头设置 多屏幕多屏幕 1.11.1Dreamweaver CSDreamweaver CS6 6的工作界面的工作界面 友善的开始页面友善的开始页面 不同风格的界面不同风格的界面 伸缩自如的功能面板伸缩自如的功能面板 多文档的编辑界面多文档的编辑界面 新颖的新颖的“插入插入”面板面板 更完整的更完整的CSS功能功能 多屏幕多屏幕 1.1.11.1.1友善的开始页面友

3、善的开始页面 启动启动Dreamweaver CS6Dreamweaver CS6后首先看到的后首先看到的 画面是开始页面，供用户选择新建文件画面是开始页面，供用户选择新建文件 的类型，或打开已有的文档等。的类型，或打开已有的文档等。 对于老用户可能不太习惯开始页面，对于老用户可能不太习惯开始页面， 可选择可选择“编辑编辑 首选参数首选参数”命令，弹出命令，弹出 “首选参数首选参数”对话框，取消选择对话框，取消选择“显示显示 欢迎屏幕欢迎屏幕”复选框，单击复选框，单击“确定确定”按钮按钮 完成设置。当用户再次启动完成设置。当用户再次启动Dreamweaver Dreamweaver CS6CS

4、6后，将不再显示开始页面。后，将不再显示开始页面。 1.1.21.1.2不同风格的界面不同风格的界面 Dreamweaver CS6Dreamweaver CS6的操作界面新颖淡雅，布的操作界面新颖淡雅，布 局紧凑，为用户提供了一个轻松、愉悦的开发局紧凑，为用户提供了一个轻松、愉悦的开发 环境。环境。 若用户想修改操作界面的风格，切换到自若用户想修改操作界面的风格，切换到自 己熟悉的开发环境，可选择己熟悉的开发环境，可选择 “ “窗口窗口 工作区工作区 布局布局”命令，弹出其子菜单，在子菜单中选择命令，弹出其子菜单，在子菜单中选择 “编码器编码器”或或“设计器设计器”命令。选择其中一种命令。选

5、择其中一种 界面风格，页面会发生相应的改变。界面风格，页面会发生相应的改变。 1.1.31.1.3伸缩自如的功能面板伸缩自如的功能面板 在浮动面板的右上方单击按钮在浮动面板的右上方单击按钮 ，可以，可以 隐藏或展开面板。如果用户觉得工作区不隐藏或展开面板。如果用户觉得工作区不 够大，可以将鼠标指针放在文档编辑窗口够大，可以将鼠标指针放在文档编辑窗口 右侧与面板交界的框线处，当鼠标指针呈右侧与面板交界的框线处，当鼠标指针呈 双向箭头时拖曳鼠标，调整工作区的大小双向箭头时拖曳鼠标，调整工作区的大小 。若用户需要更大的工作区，可以将面板。若用户需要更大的工作区，可以将面板 隐藏。隐藏。 1.1.41

6、.1.4多文档的编辑界面多文档的编辑界面 Dreamweaver Dreamweaver CS6CS6提供了多文档的编提供了多文档的编 辑界面，将多个文档整合在一起，方便辑界面，将多个文档整合在一起，方便 用户在各个文档之间切换。用户可以单用户在各个文档之间切换。用户可以单 击文档编辑窗口上方的选项卡，切换到击文档编辑窗口上方的选项卡，切换到 相应的文档。通过多文档的编辑界面，相应的文档。通过多文档的编辑界面， 用户可以同时编辑多个文档。用户可以同时编辑多个文档。 1.1.51.1.5新颖的新颖的“插入插入”面板面板 Dreamweaver Dreamweaver CS6CS6的的“插入插入”

7、面面 板在菜单栏的下方。板在菜单栏的下方。 “ “常用常用”、 “布局布局”、“表单表单”、“数据数据”、 “Spry”Spry”、“jQuery Mobile”jQuery Mobile”、 “InContext Editing”InContext Editing”、 “ “文文 本本”、“收藏夹收藏夹” ” 9 9个选项卡，将个选项卡，将 不同功能的按钮分门别类地放在不不同功能的按钮分门别类地放在不 同的选项卡中。同的选项卡中。 1.1.61.1.6更完整的更完整的CSSCSS功能功能 传统的传统的HTMLHTML所提供的样式及排版所提供的样式及排版 功能非常有限，因此，现在复杂的网功能非

8、常有限，因此，现在复杂的网 页版面主要靠页版面主要靠CSSCSS样式来实现。而样式来实现。而CSSCSS 样式表的功能较多，语法比较复杂，样式表的功能较多，语法比较复杂， 需要一个很好的工具软件有条不紊地需要一个很好的工具软件有条不紊地 整理复杂的整理复杂的CSSCSS源代码，并适时地提源代码，并适时地提 供辅助说明。供辅助说明。Dreamweaver Dreamweaver CS6CS6就提就提 供了这样方便有效的供了这样方便有效的CSSCSS功能。功能。 1.21.2创建网站框架创建网站框架 站点管理器站点管理器 创建文件夹创建文件夹 定义新站点定义新站点 创建和保存网页创建和保存网页 1

9、.2.11.2.1站点管理器站点管理器 站点管理器的主要功能包括新建站点、编辑站点、站点管理器的主要功能包括新建站点、编辑站点、 复制站点、删除站点以及导入或导出站点。若要管理站复制站点、删除站点以及导入或导出站点。若要管理站 点，必须打开点，必须打开“管理站点管理站点”对话框。对话框。 启用启用“管理站点管理站点”对话框有以下几种方法。对话框有以下几种方法。 选择选择“站点站点 管理站点管理站点”命令。命令。 选择选择“窗口窗口 文件文件”命令，启用命令，启用“文件文件”控制面板控制面板 ，选择，选择“文件文件”选项卡，单击控制面板左侧的下拉选项卡，单击控制面板左侧的下拉 列表，选择列表，选

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

11、）输入新文件夹的名称。 1.2.31.2.3定义新站点定义新站点 建立好站点文件夹后用户就可定义新站点了。在建立好站点文件夹后用户就可定义新站点了。在 DreamweaverDreamweaver CS6CS6中，站点通常包含两部分，即本地站点和远程中，站点通常包含两部分，即本地站点和远程 站点。本地站点是本地计算机上的一组文件，远程站点是远程站点。本地站点是本地计算机上的一组文件，远程站点是远程 Web Web 服务器上的一个位置。用户将本地站点中的文件发布到网服务器上的一个位置。用户将本地站点中的文件发布到网 络上的远程站点，使公众可以访问它们。在络上的远程站点，使公众可以访问它们。在Dr

12、eamweaver Dreamweaver CS6CS6中中 创建创建 Web Web 站点，通常先在本地磁盘上创建本地站点，然后创建站点，通常先在本地磁盘上创建本地站点，然后创建 远程站点，再将这些网页的副本上传到一个远程远程站点，再将这些网页的副本上传到一个远程 Web Web服务器上服务器上 ，使公众可以访问它们。，使公众可以访问它们。 创建本地站点的步骤创建本地站点的步骤 本地站点主要选项的作用本地站点主要选项的作用 1.2.41.2.4创建和保存网页创建和保存网页 选择选择“文件文件 新建新建”命令，启用命令，启用“ 新建文档新建文档”对话框，创建空白网页。对话框，创建空白网页。 网

13、页设计完成后，选择网页设计完成后，选择“文件文件 保保 存存”命令，弹出命令，弹出“另存为另存为”对话框，设对话框，设 置后单击置后单击“保存保存”按钮，将该文档保存按钮，将该文档保存 在站点文件夹中。在站点文件夹中。 1.31.3管理站点管理站点 打开站点打开站点 编辑站点编辑站点 复制站点复制站点 删除站点删除站点 导入和导出站点导入和导出站点 1.3.11.3.1打开站点打开站点 当要修改某个网站的内容时，首先要打当要修改某个网站的内容时，首先要打 开站点。打开站点就是在各站点间进行切开站点。打开站点就是在各站点间进行切 换。打开站点的具体操作步骤如下。换。打开站点的具体操作步骤如下。

14、（1 1）启动）启动Dreamweaver Dreamweaver CS6CS6。 （2 2）选择）选择“窗口窗口 文件文件”命令，启用命令，启用 “文件文件”控制面板，在其中选择要打开的控制面板，在其中选择要打开的 站点名，打开站点。站点名，打开站点。 1.3.21.3.2编辑站点编辑站点 有时用户需要修改站点的一些设置，此时需要编辑站点。有时用户需要修改站点的一些设置，此时需要编辑站点。 例如，修改站点的默认图像文件夹的路径，其具体的操作步骤例如，修改站点的默认图像文件夹的路径，其具体的操作步骤 如下。如下。 （1 1）选择）选择“站点站点 管理站点管理站点”命令，启用命令，启用“管理站点

15、管理站点” 对话框。对话框。 （2 2）在对话框中，选择要编辑的站点名，单击）在对话框中，选择要编辑的站点名，单击“编辑编辑”按按 钮，弹出钮，弹出“站点定义站点定义”对话框，选择对话框，选择“高级高级”选项卡，此时可选项卡，此时可 根据需要进行修改，单击根据需要进行修改，单击“确定确定”按钮完成设置，回到按钮完成设置，回到“管理管理 站点站点”对话框。对话框。 （3 3）如果不需要修改其他站点，可单击）如果不需要修改其他站点，可单击“完成完成”按钮关闭按钮关闭 “管理站点管理站点”对话框。对话框。 1.3.31.3.3复制站点复制站点 复制站点可省去重复建立多个结构相同站点的操作步复制站点可

16、省去重复建立多个结构相同站点的操作步 骤，可以提高用户的工作效率。在骤，可以提高用户的工作效率。在“管理站点管理站点”对话框中对话框中 可以复制站点，其具体操作步骤如下。可以复制站点，其具体操作步骤如下。 （1 1）在）在“管理站点管理站点”对话框左侧的站点列表中选择要对话框左侧的站点列表中选择要 复制的站点，单击复制的站点，单击“复制复制”按钮进行复制。按钮进行复制。 （2 2）用鼠标左键双击新复制出的站点，在弹出的）用鼠标左键双击新复制出的站点，在弹出的“站站 点定义为点定义为”对话框中更改新站点的名称。对话框中更改新站点的名称。 1.3.41.3.4删除站点删除站点 删除站点只是删除删除

17、站点只是删除Dreamweaver Dreamweaver CS6CS6同本地站点间的关系，同本地站点间的关系， 而本地站点包含的文件和文件夹仍然保存在磁盘原来的位置上而本地站点包含的文件和文件夹仍然保存在磁盘原来的位置上 。换句话说，删除站点后，虽然站点文件夹保存在计算机中，。换句话说，删除站点后，虽然站点文件夹保存在计算机中， 但在但在Dreamweaver Dreamweaver CS6CS6中已经不存在此站点。例如，在按下列步中已经不存在此站点。例如，在按下列步 骤删除站点后，在骤删除站点后，在“管理站点管理站点”对话框中，不存在该站点的名对话框中，不存在该站点的名 称。称。 在在“管

18、理站点管理站点”对话框中删除站点的具体操作步骤如下。对话框中删除站点的具体操作步骤如下。 （1 1）在）在“管理站点管理站点”对话框左侧站点列表中选择要删除站点。对话框左侧站点列表中选择要删除站点。 （2 2）单击）单击“删除删除”按钮即可删除选择的站点。按钮即可删除选择的站点。 1.3.51.3.5导入和导出站点导入和导出站点 如果在计算机之间移动站点，或者与如果在计算机之间移动站点，或者与 其他用户共同设计站点，可通过其他用户共同设计站点，可通过 Dreamweaver Dreamweaver CS6CS6的导入和导出站点功能的导入和导出站点功能 实现。导出站点功能是将站点导出为实现。导出

19、站点功能是将站点导出为 “.ste”“.ste”格式文件，然后在其他计算机上格式文件，然后在其他计算机上 将其导入到将其导入到Dreamweaver Dreamweaver CS6CS6中。中。 导出站点导出站点 导入站点导入站点 1.41.4网页文件头设置网页文件头设置 插入搜索关键字插入搜索关键字 插入作者和版权信息插入作者和版权信息 设置刷新时间设置刷新时间 设置描述信息设置描述信息 设置页面中所有链接的基准链接设置页面中所有链接的基准链接 设置当前文件与其他文件的关联性设置当前文件与其他文件的关联性 1.4.11.4.1插入搜索关键字插入搜索关键字 在万维网上通过搜索引擎查找资料时，搜

20、索引擎自动在万维网上通过搜索引擎查找资料时，搜索引擎自动 读取网页中读取网页中标签的内容，所以网页中的搜索关键字标签的内容，所以网页中的搜索关键字 非常重要，它可以间接地宣传网站，提高访问量。但搜索非常重要，它可以间接地宣传网站，提高访问量。但搜索 关键字并不是字数越多越好，因为有些搜索引擎限制索引关键字并不是字数越多越好，因为有些搜索引擎限制索引 的关键字或字符的数目，当超过了限制的数目时，它将忽的关键字或字符的数目，当超过了限制的数目时，它将忽 略所有的关键字，所以最好只使用几个精选的关键字。一略所有的关键字，所以最好只使用几个精选的关键字。一 般情况下，关键字是对网页的主题、内容、风格或

21、作者等般情况下，关键字是对网页的主题、内容、风格或作者等 内容的概括。内容的概括。 1.4.21.4.2插入作者和版权信息插入作者和版权信息 要设置网页的作者和版权信息，要设置网页的作者和版权信息， 可选择可选择“插入插入 HTML HTML 文件头标文件头标 签签 Meta” Meta”命令，启用命令，启用“META”“META”对对 话框。话框。 1.4.31.4.3设置刷新时间设置刷新时间 要指定载入页面刷新或者转到其他页面的时间，可设要指定载入页面刷新或者转到其他页面的时间，可设 置文件头部的刷新时间项，具体操作步骤如下。置文件头部的刷新时间项，具体操作步骤如下。 （1 1）选中文档窗

22、口中的）选中文档窗口中的“代码代码”视图，将鼠标指针视图，将鼠标指针 放在放在标签中，选择标签中，选择“插入插入 HTML HTML 文件头标签文件头标签 刷新刷新”命令，启用命令，启用“刷新刷新”对话框。对话框。 （2 2）在）在“刷新刷新”对话框中设置刷新时间。对话框中设置刷新时间。 1.4.41.4.4设置描述信息设置描述信息 搜索引擎也可通过读取搜索引擎也可通过读取 标签的说明内容来查找标签的说明内容来查找 信息，但说明信息主要是设计者对网页内容的详细说明，信息，但说明信息主要是设计者对网页内容的详细说明， 而关键字可以让搜索引擎尽快搜索到网页。设置网页说明而关键字可以让搜索引擎尽快搜索到网页。设置网页说明 信息的具体操作步骤如下。信息的具体操作步骤如下。 （1 1）选中文档窗口中的）选中文档窗口中的“代码代码”视图，将鼠标指针放视图，将鼠标指针放 在在标签中，选择标签中，选择“插入插入 HTML HTML 文件头标签文件头标签 说说 明明”命令，启用命令，启用“说明说明”对话框。对话框。 （2 2）在）在“说明说明”对话框中设置说明信息。对话框中设置说明信息。 1.4.51.4.5设置页面中所有链接的基准链接设置页面中所有链接的基准链接 基准链接类似于相对路径，若要设置网页文档中所有基准链接类似于相对路径，若要设置网页文档中所有 链接都以某个链接为基准，可添加一个