1、 本章简介本章简介： 网页是网站最基本的组成部分，网站之间网页是网站最基本的组成部分，网站之间并不是杂乱无章的，它们通过各种链接相互关并不是杂乱无章的，它们通过各种链接相互关联，从而描述相关的主题或实现相同的目的。联，从而描述相关的主题或实现相同的目的。本章讲述网站的建设基础，包括本章讲述网站的建设基础，包括IPIP地址与域名、地址与域名、动态数据库开发以及动态数据库开发以及DreamweaverDreamweaver CS6 CS6的工作的工作界面，最后重点讲述了管理站点的方式。界面，最后重点讲述了管理站点的方式。第第1 1章初识章初识DreamweaverDreamweaver CS6 C
2、S6课堂学习目标课堂学习目标DreamweaverDreamweaver CS6 CS6的工作界面的工作界面创建网站框架创建网站框架管理站点文件和文件夹管理站点文件和文件夹管理站点管理站点网页文件头设置网页文件头设置多屏幕多屏幕1.11.1DreamweaverDreamweaver CS6 CS6的工作界面的工作界面友善的开始页面友善的开始页面不同风格的界面不同风格的界面伸缩自如的功能面板伸缩自如的功能面板多文档的编辑界面多文档的编辑界面新颖的新颖的“插入插入”面板面板更完整的更完整的CSS功能功能多屏幕多屏幕1.1.11.1.1友善的开始页面友善的开始页面启动启动DreamweaverDr
3、eamweaver CS6 CS6后首先看到的后首先看到的画面是开始页面，供用户选择新建文件画面是开始页面，供用户选择新建文件的类型，或打开已有的文档等。的类型，或打开已有的文档等。对于老用户可能不太习惯开始页面，对于老用户可能不太习惯开始页面，可选择可选择“编辑编辑 首选参数首选参数”命令，弹出命令，弹出“首选参数首选参数”对话框，取消选择对话框，取消选择“显示显示欢迎屏幕欢迎屏幕”复选框，单击复选框，单击“确定确定”按钮按钮完成设置。当用户再次启动完成设置。当用户再次启动DreamweaverDreamweaver CS6CS6后，将不再显示开始页面。后，将不再显示开始页面。1.1.21.
4、1.2不同风格的界面不同风格的界面DreamweaverDreamweaver CS6 CS6的操作界面新颖淡雅，布的操作界面新颖淡雅，布局紧凑，为用户提供了一个轻松、愉悦的开发局紧凑，为用户提供了一个轻松、愉悦的开发环境。环境。若用户想修改操作界面的风格，切换到自若用户想修改操作界面的风格，切换到自己熟悉的开发环境，可选择己熟悉的开发环境，可选择 “ “窗口窗口 工作区工作区布局布局”命令，弹出其子菜单，在子菜单中选择命令，弹出其子菜单，在子菜单中选择“编码器编码器”或或“设计器设计器”命令。选择其中一种命令。选择其中一种界面风格，页面会发生相应的改变。界面风格，页面会发生相应的改变。1.1
5、.31.1.3伸缩自如的功能面板伸缩自如的功能面板在浮动面板的右上方单击按钮在浮动面板的右上方单击按钮 ，可以，可以隐藏或展开面板。如果用户觉得工作区不隐藏或展开面板。如果用户觉得工作区不够大，可以将鼠标指针放在文档编辑窗口够大，可以将鼠标指针放在文档编辑窗口右侧与面板交界的框线处，当鼠标指针呈右侧与面板交界的框线处，当鼠标指针呈双向箭头时拖曳鼠标，调整工作区的大小双向箭头时拖曳鼠标，调整工作区的大小。若用户需要更大的工作区，可以将面板。若用户需要更大的工作区，可以将面板隐藏。隐藏。1.1.41.1.4多文档的编辑界面多文档的编辑界面Dreamweaver Dreamweaver CS6CS6
6、提供了多文档的编提供了多文档的编辑界面，将多个文档整合在一起，方便辑界面，将多个文档整合在一起，方便用户在各个文档之间切换。用户可以单用户在各个文档之间切换。用户可以单击文档编辑窗口上方的选项卡，切换到击文档编辑窗口上方的选项卡，切换到相应的文档。通过多文档的编辑界面，相应的文档。通过多文档的编辑界面，用户可以同时编辑多个文档。用户可以同时编辑多个文档。1.1.51.1.5新颖的新颖的“插入插入”面板面板Dreamweaver Dreamweaver CS6CS6的的“插入插入”面面板在菜单栏的下方。板在菜单栏的下方。 “ “常用常用”、“布局布局”、“表单表单”、“数据数据”、“Spry”S
7、pry”、“jQueryjQuery Mobile” Mobile”、“InContextInContext Editing” Editing”、 “ “文文本本”、“收藏夹收藏夹” ” 9 9个选项卡，将个选项卡，将不同功能的按钮分门别类地放在不不同功能的按钮分门别类地放在不同的选项卡中。同的选项卡中。1.1.61.1.6更完整的更完整的CSSCSS功能功能传统的传统的HTMLHTML所提供的样式及排版所提供的样式及排版功能非常有限，因此，现在复杂的网功能非常有限，因此，现在复杂的网页版面主要靠页版面主要靠CSSCSS样式来实现。而样式来实现。而CSSCSS样式表的功能较多，语法比较复杂，样
8、式表的功能较多，语法比较复杂，需要一个很好的工具软件有条不紊地需要一个很好的工具软件有条不紊地整理复杂的整理复杂的CSSCSS源代码，并适时地提源代码，并适时地提供辅助说明。供辅助说明。Dreamweaver Dreamweaver CS6CS6就提就提供了这样方便有效的供了这样方便有效的CSSCSS功能。功能。1.21.2创建网站框架创建网站框架站点管理器站点管理器创建文件夹创建文件夹定义新站点定义新站点创建和保存网页创建和保存网页1.2.11.2.1站点管理器站点管理器站点管理器的主要功能包括新建站点、编辑站点、站点管理器的主要功能包括新建站点、编辑站点、复制站点、删除站点以及导入或导出站
9、点。若要管理站复制站点、删除站点以及导入或导出站点。若要管理站点，必须打开点，必须打开“管理站点管理站点”对话框。对话框。启用启用“管理站点管理站点”对话框有以下几种方法。对话框有以下几种方法。选择选择“站点站点 管理站点管理站点”命令。命令。选择选择“窗口窗口 文件文件”命令，启用命令，启用“文件文件”控制面板控制面板，选择，选择“文件文件”选项卡，单击控制面板左侧的下拉选项卡，单击控制面板左侧的下拉列表，选择列表，选择“管理站点管理站点”命令。命令。1.2.21.2.2创建文件夹创建文件夹建立站点前，要先在站点管理器中规划站点文件夹。建立站点前，要先在站点管理器中规划站点文件夹。新建文件夹
10、的具体操作步骤如下。新建文件夹的具体操作步骤如下。（1 1）在站点管理器的右侧窗口中单击选择站点。）在站点管理器的右侧窗口中单击选择站点。（2 2）通过以下几种方法新建文件夹。）通过以下几种方法新建文件夹。 选择选择“文件文件 新建文件夹新建文件夹”命令。命令。用鼠标右键单击站点，在弹出的菜单中选择用鼠标右键单击站点，在弹出的菜单中选择“新建文件夹新建文件夹” ” 命令。命令。（3 3）输入新文件夹的名称。）输入新文件夹的名称。1.2.31.2.3定义新站点定义新站点建立好站点文件夹后用户就可定义新站点了。在建立好站点文件夹后用户就可定义新站点了。在DreamweaverDreamweaver
11、 CS6CS6中，站点通常包含两部分，即本地站点和远程中，站点通常包含两部分，即本地站点和远程站点。本地站点是本地计算机上的一组文件，远程站点是远程站点。本地站点是本地计算机上的一组文件，远程站点是远程 Web Web 服务器上的一个位置。用户将本地站点中的文件发布到网服务器上的一个位置。用户将本地站点中的文件发布到网络上的远程站点，使公众可以访问它们。在络上的远程站点，使公众可以访问它们。在Dreamweaver Dreamweaver CS6CS6中中创建创建 Web Web 站点，通常先在本地磁盘上创建本地站点，然后创建站点，通常先在本地磁盘上创建本地站点，然后创建远程站点，再将这些网页
12、的副本上传到一个远程远程站点，再将这些网页的副本上传到一个远程 Web Web服务器上服务器上，使公众可以访问它们。，使公众可以访问它们。创建本地站点的步骤创建本地站点的步骤本地站点主要选项的作用本地站点主要选项的作用1.2.41.2.4创建和保存网页创建和保存网页选择选择“文件文件 新建新建”命令，启用命令，启用“新建文档新建文档”对话框，创建空白网页。对话框，创建空白网页。网页设计完成后，选择网页设计完成后，选择“文件文件 保保存存”命令，弹出命令，弹出“另存为另存为”对话框，设对话框，设置后单击置后单击“保存保存”按钮，将该文档保存按钮，将该文档保存在站点文件夹中。在站点文件夹中。1.3
13、1.3管理站点管理站点打开站点打开站点编辑站点编辑站点复制站点复制站点删除站点删除站点导入和导出站点导入和导出站点1.3.11.3.1打开站点打开站点当要修改某个网站的内容时，首先要打当要修改某个网站的内容时，首先要打开站点。打开站点就是在各站点间进行切开站点。打开站点就是在各站点间进行切换。打开站点的具体操作步骤如下。换。打开站点的具体操作步骤如下。（1 1）启动）启动Dreamweaver Dreamweaver CS6CS6。（2 2）选择）选择“窗口窗口 文件文件”命令，启用命令，启用“文件文件”控制面板，在其中选择要打开的控制面板，在其中选择要打开的站点名，打开站点。站点名，打开站点
14、。1.3.21.3.2编辑站点编辑站点有时用户需要修改站点的一些设置，此时需要编辑站点。有时用户需要修改站点的一些设置，此时需要编辑站点。例如，修改站点的默认图像文件夹的路径，其具体的操作步骤例如，修改站点的默认图像文件夹的路径，其具体的操作步骤如下。如下。（1 1）选择）选择“站点站点 管理站点管理站点”命令，启用命令，启用“管理站点管理站点”对话框。对话框。（2 2）在对话框中，选择要编辑的站点名，单击）在对话框中，选择要编辑的站点名，单击“编辑编辑”按按钮，弹出钮，弹出“站点定义站点定义”对话框，选择对话框，选择“高级高级”选项卡，此时可选项卡，此时可根据需要进行修改，单击根据需要进行修
15、改，单击“确定确定”按钮完成设置，回到按钮完成设置，回到“管理管理站点站点”对话框。对话框。（3 3）如果不需要修改其他站点，可单击）如果不需要修改其他站点，可单击“完成完成”按钮关闭按钮关闭“管理站点管理站点”对话框。对话框。1.3.31.3.3复制站点复制站点复制站点可省去重复建立多个结构相同站点的操作步复制站点可省去重复建立多个结构相同站点的操作步骤，可以提高用户的工作效率。在骤，可以提高用户的工作效率。在“管理站点管理站点”对话框中对话框中可以复制站点，其具体操作步骤如下。可以复制站点，其具体操作步骤如下。（1 1）在）在“管理站点管理站点”对话框左侧的站点列表中选择要对话框左侧的站点
16、列表中选择要复制的站点，单击复制的站点，单击“复制复制”按钮进行复制。按钮进行复制。（2 2）用鼠标左键双击新复制出的站点，在弹出的）用鼠标左键双击新复制出的站点，在弹出的“站站点定义为点定义为”对话框中更改新站点的名称。对话框中更改新站点的名称。1.3.41.3.4删除站点删除站点 删除站点只是删除删除站点只是删除Dreamweaver Dreamweaver CS6CS6同本地站点间的关系，同本地站点间的关系，而本地站点包含的文件和文件夹仍然保存在磁盘原来的位置上而本地站点包含的文件和文件夹仍然保存在磁盘原来的位置上。换句话说，删除站点后，虽然站点文件夹保存在计算机中，。换句话说，删除站点
17、后，虽然站点文件夹保存在计算机中，但在但在Dreamweaver Dreamweaver CS6CS6中已经不存在此站点。例如，在按下列步中已经不存在此站点。例如，在按下列步骤删除站点后，在骤删除站点后，在“管理站点管理站点”对话框中，不存在该站点的名对话框中，不存在该站点的名称。称。在在“管理站点管理站点”对话框中删除站点的具体操作步骤如下。对话框中删除站点的具体操作步骤如下。（1 1）在）在“管理站点管理站点”对话框左侧站点列表中选择要删除站点。对话框左侧站点列表中选择要删除站点。 （2 2）单击）单击“删除删除”按钮即可删除选择的站点。按钮即可删除选择的站点。1.3.51.3.5导入和导
18、出站点导入和导出站点 如果在计算机之间移动站点，或者与如果在计算机之间移动站点，或者与其他用户共同设计站点，可通过其他用户共同设计站点，可通过 Dreamweaver Dreamweaver CS6CS6的导入和导出站点功能的导入和导出站点功能实现。导出站点功能是将站点导出为实现。导出站点功能是将站点导出为“.ste”“.ste”格式文件，然后在其他计算机上格式文件，然后在其他计算机上将其导入到将其导入到Dreamweaver Dreamweaver CS6CS6中。中。导出站点导出站点导入站点导入站点1.41.4网页文件头设置网页文件头设置插入搜索关键字插入搜索关键字插入作者和版权信息插入作
19、者和版权信息设置刷新时间设置刷新时间设置描述信息设置描述信息设置页面中所有链接的基准链接设置页面中所有链接的基准链接设置当前文件与其他文件的关联性设置当前文件与其他文件的关联性1.4.11.4.1插入搜索关键字插入搜索关键字 在万维网上通过搜索引擎查找资料时，搜索引擎自动在万维网上通过搜索引擎查找资料时，搜索引擎自动读取网页中读取网页中标签的内容，所以网页中的搜索关键字标签的内容，所以网页中的搜索关键字非常重要，它可以间接地宣传网站，提高访问量。但搜索非常重要，它可以间接地宣传网站，提高访问量。但搜索关键字并不是字数越多越好，因为有些搜索引擎限制索引关键字并不是字数越多越好，因为有些搜索引擎限
20、制索引的关键字或字符的数目，当超过了限制的数目时，它将忽的关键字或字符的数目，当超过了限制的数目时，它将忽略所有的关键字，所以最好只使用几个精选的关键字。一略所有的关键字，所以最好只使用几个精选的关键字。一般情况下，关键字是对网页的主题、内容、风格或作者等般情况下，关键字是对网页的主题、内容、风格或作者等内容的概括。内容的概括。1.4.21.4.2插入作者和版权信息插入作者和版权信息要设置网页的作者和版权信息，要设置网页的作者和版权信息，可选择可选择“插入插入 HTML HTML 文件头标文件头标签签 Meta” Meta”命令，启用命令，启用“META”“META”对对话框。话框。1.4.3
21、1.4.3设置刷新时间设置刷新时间 要指定载入页面刷新或者转到其他页面的时间，可设要指定载入页面刷新或者转到其他页面的时间，可设置文件头部的刷新时间项，具体操作步骤如下。置文件头部的刷新时间项，具体操作步骤如下。（1 1）选中文档窗口中的）选中文档窗口中的“代码代码”视图，将鼠标指针视图，将鼠标指针放在放在标签中，选择标签中，选择“插入插入 HTML HTML 文件头标签文件头标签 刷新刷新”命令，启用命令，启用“刷新刷新”对话框。对话框。（2 2）在）在“刷新刷新”对话框中设置刷新时间。对话框中设置刷新时间。1.4.41.4.4设置描述信息设置描述信息 搜索引擎也可通过读取搜索引擎也可通过读
22、取 标签的说明内容来查找标签的说明内容来查找信息，但说明信息主要是设计者对网页内容的详细说明，信息，但说明信息主要是设计者对网页内容的详细说明，而关键字可以让搜索引擎尽快搜索到网页。设置网页说明而关键字可以让搜索引擎尽快搜索到网页。设置网页说明信息的具体操作步骤如下。信息的具体操作步骤如下。（1 1）选中文档窗口中的）选中文档窗口中的“代码代码”视图，将鼠标指针放视图，将鼠标指针放在在标签中，选择标签中，选择“插入插入 HTML HTML 文件头标签文件头标签 说说明明”命令，启用命令，启用“说明说明”对话框。对话框。（2 2）在）在“说明说明”对话框中设置说明信息。对话框中设置说明信息。1.
23、4.51.4.5设置页面中所有链接的基准链接设置页面中所有链接的基准链接 基准链接类似于相对路径，若要设置网页文档中所有基准链接类似于相对路径，若要设置网页文档中所有链接都以某个链接为基准，可添加一个基本链接，但其他链接都以某个链接为基准，可添加一个基本链接，但其他网页的链接与此页的基准链接无关。设置基准链接的具体网页的链接与此页的基准链接无关。设置基准链接的具体操作如下。操作如下。（1 1）选中文档窗口中的）选中文档窗口中的“代码代码”视图，将鼠标指针放视图，将鼠标指针放在在标签中，选择标签中，选择“插入插入 HTML HTML 文件头标签文件头标签 基基础础”命令，弹出命令，弹出“基础基础
24、”对话框。对话框。（2 2）在）在“基础基础”对话框中设置对话框中设置“Href”“Href”和和“目标目标”两两个选项。个选项。1.4.61.4.6设置当前文件与其他文件的关联性设置当前文件与其他文件的关联性 部分的部分的标签可以定义当前文档标签可以定义当前文档与其他文件之间的关系，它与与其他文件之间的关系，它与 部分中的文部分中的文档之间的档之间的 HTML HTML 链接是不一样的，其具体操作步骤链接是不一样的，其具体操作步骤如下。如下。（1 1）选中文档窗口中的）选中文档窗口中的“代码代码”视图，将光标视图，将光标放在放在标签中，选择标签中，选择“插入插入 HTML HTML 文件头文件头标签标签 链接链接”命令，弹出命令，弹出“链接链接”对话框。对话框。（2 2）在）在“链接链接”对话框中设置相应的选项。对话框中设置相应的选项。1.51.5多屏幕多屏幕 DreamweaverDreamweaver CS6 CS6中的中的“多屏幕多屏幕”功能可同时为手机、平板电脑和计算功能可同时为手机、平板电脑和计算机设计样式并将内容可视化。点击机设计样式并将内容可视化。点击“多屏幕多屏幕”按钮按钮 ，在弹出的菜单中可，在弹出的菜单中可以选择页面的大小。以选择页面的大小。谢 谢！
