第1章 初识Dreamweaver CC

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

课堂学习目标

● Dreamweaver CC的工作界面

● 创建网站框架

● 管理站点

● 网页文件头设置

1.1 Dreamweaver CC的工作界面

Dreamweaver CC的工作区将多个文档集中到一个窗口中，不仅降低了系统资源的占用，还可以更加方便地操作文档。Dreamweaver CC的工作窗口由5部分组成，分别是“菜单”栏、“插入”工具栏、“文档”窗口、面板组和“属性”面板。Dreamweaver CC的操作环境简洁明快，可大大提高设计效率。

1.1.1 友善的开始页面

启动Dreamweaver CC后，首先看到的画面就是开始页面，供用户选择新建文件的类型或打开已有的文档等，如图1-1所示。

老用户可能不太习惯开始页面，可选择“编辑>首选项”命令或按Ctrl+U组合键，弹出“首选项”对话框，取消选择“显示欢迎屏幕”复选框，如图1-2所示。单击“确定”按钮完成设置。当用户再次启动Dreamweaver CC后，将不再显示开始页面。

1.1.2 不同风格的界面

Dreamweaver CC的操作界面新颖淡雅，布局紧凑，为用户提供了一个轻松、愉悦的开发环境。

若用户想修改操作界面的风格，切换到自己熟悉的开发环境，可选择“窗口>工作区布局”命令，弹出其子菜单，如图1-3所示，在子菜单中选择“压缩”或“扩展”命令。选择其中一种界面风格，页面会发生相应的改变。

1.1.3 伸缩自如的功能面板

在浮动面板的右上方单击按钮，可以隐藏或展开面板，如图1-4所示。

如果用户觉得工作区不够大，可以将鼠标指针放在文档编辑窗口右侧与面板交界的框线处，当鼠标指针呈双向箭头时拖曳光标，调整工作区的大小，如图1-5所示。若用户需要更大的工作区，可以将面板隐藏。

1.1.4 多文档的编辑界面

Dreamweaver CC提供了多文档的编辑界面，将多个文档整合在一起，方便用户在各个文档之间切换，如图1-6所示。用户可以单击文档编辑窗口上方的选项卡，切换到相应的文档。通过多文档的编辑界面，用户可以同时编辑多个文档。

1.1.5 新颖的“插入”面板

Dreamweaver CC的“插入”面板可放在菜单栏的下方，如图1-7所示。

“插入”面板包括“常用”“结构”“媒体”“表单”“jQuery Mobile”“jQuery UI”“模板”和“收藏夹”8个选项卡，将不同功能的按钮分门别类地放在不同的选项卡中。在Dreamweaver CC中，“插入”面板可用菜单和选项卡两种方式显示。如果需要菜单样式，用户可用鼠标右键单击“插入”面板的选项卡，在弹出的菜单中选择“显示为菜单”命令，如图1-8所示，更改后的效果如图1-9所示。用户如果需要选项卡样式，可单击“常用”按钮上的黑色三角形，在下拉菜单中选择“显示为制表符”命令，如图1-10所示，更改后的效果如图1-11所示。

“插入”面板中将一些相关的按钮组合成菜单，当按钮右侧有黑色箭头时，表示其为展开式按钮，如图1-12所示。

1.1.6 更完整的CSS功能

传统的HTML所提供的样式及排版功能非常有限，因此，现在复杂的网页版面主要靠CSS样式来实现。而CSS样式表的功能较多，语法比较复杂，需要一个很好的工具软件有条不紊地整理复杂的CSS源代码，并适时地提供辅助说明。Dreamweaver CC就提供了这样方便有效的CSS功能。

“属性”面板提供了CSS功能。用户可以通过“属性”面板中“目标规则”选项的下拉列表对所选的对象应用样式或创建和编辑样式，如图1-13所示。若某些文字应用了自定义样式，当用户调整这些文字的属性时，会自动生成新的CSS样式。

“页面属性”按钮也提供了CSS功能。单击“属性”面板中的“页面属性”按钮，弹出“页面属性”对话框，如图1-14所示。用户可以在“分类”列表的“链接”选项卡中的“下划线样式”选项的下拉列表中设置超链接的样式，这个设置会自动转化成CSS样式，如图1-15所示。

Dreamweaver CC除了提供如图1-16所示的“CSS设计器”面板外，还提供了如图1-17所示的“CSS样式”面板。“CSS属性”面板使用户能够轻松查看规则的属性设置，并可快速修改嵌入在当前文档或通过附加的样式表链接的CSS样式。可编辑的网格使用户可以更改显示的属性值。对选择所做的更改都将立即应用，这使用户可以在操作的同时预览效果。

1.2 创建网站框架

所谓站点，就像是一系列文档的组合，这些文档通过各种链接建立逻辑关联。用户在建立网站前必须要建立站点，修改某网页内容时，也必须打开站点，然后修改站点内的网页。在Dreamweaver CC中，站点一词是下列任意一项的简称。

Web站点：从访问者的角度来看，Web站点是一组位于服务器上的网页，使用Web浏览器访问该站点的访问者可以对其进行浏览。

远程站点：从创作者的角度来看，远程站点是远程站点服务器上组成Web站点的文件。

本地站点：与远程站点上的文件对应的本地磁盘上的文件。通常，先在本地磁盘上编辑文件，然后再将它们上传到远程站点的服务器上。

Dreamweaver CC站点定义：本地站点的一组定义特性，以及有关本地站点和远程站点对应方式的信息。

在做任何工作之前都应该制订工作计划并画出工作流程图，建立网站也是如此。在动手建立站点之前，需要先调查研究，记录客户所需的服务，然后以此规划出网站的功能结构图（即设计草图）及其设计风格以体现站点的主题。另外，还要规划站点导航系统，避免浏览者在网页上迷失方向，找不到要浏览的内容。

1.2.1 站点管理器

站点管理器的主要功能包括新建站点、编辑站点、复制站点、删除站点和导入或导出站点。若要管理站点，必须打开“管理站点”对话框。

弹出“管理站点”对话框有以下两种方法。

（1）选择“站点>管理站点”命令。

（2）选择“窗口>文件”命令，弹出“文件”面板，如图1-18所示。单击面板左侧的下拉列表，选择“管理站点”命令，如图1-19所示。

在“管理站点”对话框中，通过“新建站点”“编辑当前选定的站点”“复制当前选定的站点”和“删除当前选定的站点”按钮，可以新建一个站点、修改选择的站点、复制选择的站点、删除选择的站点。通过对话框的“导出当前选定的站点”和“导入站点”按钮，用户可以将站点导出为XML文件，然后再将其导入到Dreamweaver CC。这样，用户就可以在不同的计算机和产品版本之间移动站点，或者与其他用户共享，如图1-20所示。

在“管理站点”对话框中，选择一个具体的站点，然后单击“完成”按钮，就会在“文件”面板的“文件”选项卡中出现站点管理器的缩略图。

1.2.2 创建文件夹

建立站点前，要先在站点管理器中规划站点文件夹。

新建文件夹的具体操作步骤如下。

（1）在站点管理器的右侧窗口中单击选择站点。

（2）通过以下两种方法新建文件夹。

① 选择“文件>新建文件夹”命令。

② 用鼠标右键单击站点，在弹出的菜单中选择“新建文件夹”命令。

（3）输入新文件夹的名称。

一般情况下，若站点不复杂，可直接将网页存放在站点的根目录下，并在站点根目录中，按照资源的种类建立不同的文件夹存放不同的资源。如image文件夹存放站点中的图像文件，media文件夹存放站点的多媒体文件等。若站点复杂，需要根据实现不同功能的板块，在站点根目录中按板块创建子文件夹存放不同的网页，这样可以方便网站设计者修改网站。

1.2.3 定义新站点

建立好站点文件夹后用户就可定义新站点了。在Dreamweaver CC中，站点通常包含两部分，即本地站点和远程站点。本地站点是本地计算机上的一组文件，远程站点是远程Web服务器上的一个位置。用户将本地站点中的文件发布到网络上的远程站点，使公众可以访问它们。在Dreamweaver CC中创建Web站点，通常先在本地磁盘上创建本地站点，然后创建远程站点，再将这些网页的副本上传到一个远程Web服务器上，使公众可以访问它们。本节只介绍如何创建本地站点。

1．创建本地站点的步骤

（1）选择“站点>管理站点”命令，弹出“管理站点”对话框。

（2）在对话框中单击“新建站点”按钮，弹出“站点设置对象 未命名站点2”对话框，在对话框中，设计者通过“站点”选项卡设置站点名称，如图1-21所示；单击“高级设置”选项，在弹出的选项卡中根据需要设置站点，如图1-22所示。

2．各选项的作用

“默认图像文件夹”选项：在文本框中输入此站点默认图像文件夹的路径，或者单击“浏览文件夹”按钮，在弹出的“选择图像文件夹”对话框中，查找到该文件夹。如将非站点图像添加到网页中时，图像会自动添加到当前站点的默认图像文件夹中。

“链接相对于”选项组：选择“文档”选项，表示使用文档相对路径来链接，选择“站点根目录”选项，表示使用站点根目录相对路径来链接。

“Web URL”选项：在文本框中，输入已完成的站点将使用的URL。

“区分大小写的链接检查”选项：选择此复选框，则对使用区分大小写的链接进行检查。

“启用缓存”选项：指定是否创建本地缓存以提高链接和站点管理任务的速度。若选择此复选框，则创建本地缓存。

1.2.4 创建和保存网页

创建站点后，用户需要创建网页来组织要展示的内容。合理的网页名称非常重要，一般网页文件的名称应容易理解，能反映网页的内容。

在网站中有一个特殊的网页是首页，每个网站必须有一个首页。访问者每当在IE浏览器的地址栏中输入网址，如在IE浏览器的地址栏中输入“www.sina.com.cn”时会自动打开新浪网的首页。一般情况下，首页的文件名为“index.htm”“index.html”“index.asp”“default.asp”“default.htm”或“default.html”。

在标准的Dreamweaver CC环境下，建立和保存网页的操作步骤如下。

（1）选择“文件>新建”命令，或按Ctrl+N组合键，弹出“新建文档”对话框，选择“空白页”选项，在“页面类型”选项框中选择“HTML”选项，在“布局”选项框中选择“无”选项，创建空白网页，设置如图1-23所示。

（2）设置完成后，单击“创建”按钮，弹出“文档”窗口，新文档在该窗口中打开。根据需要，在“文档”窗口中选择不同的视图设计网页，如图1-24所示。

“文档”窗口中有3种视图方式，这3种视图方式的作用如下。“代码”视图：对于有编程经验的网页设计用户而言，可在“代码”视图中查看、修改和编写网页代码，以实现特殊的网页效果，“代码”视图的效果如图1-25所示。

“设计”视图：以所见即所得的方式显示所有网页元素，“设计”视图的效果如图1-26所示。“拆分”视图：将文档窗口分为左右两部分，左侧部分是代码部分，显示代码；右侧部分是设计部分，显示网页元素及其在页面中的布局。在此视图中，网页设计用户通过在设计部分单击网页元素的方式，快速地定位到要修改的网页元素代码的位置，进行代码的修改，或在“属性”面板中修改网页元素的属性。“拆分”视图的效果如图1-27所示。

（3）网页设计完成后，选择“文件>保存”命令，弹出“另存为”对话框，在“文件名”选项的文本框中输入网页的名称，如图1-28所示，单击“保存”按钮，将该文档保存在站点文件夹中。

1.3 管理站点

在建立站点后，可以对站点进行打开、修改、复制、删除、导入和导出等操作。

1.3.1 打开站点

当要修改某个网站的内容时，首先要打开站点。打开站点就是在各站点间进行切换。打开站点的具体操作步骤如下。

（1）启动Dreamweaver CC。

（2）选择“窗口>文件”命令，或按F8键，弹出“文件”面板，在其中选择要打开的站点名，打开站点，如图1-29和图1-30所示。

1.3.2 编辑站点

有时用户需要修改站点的一些设置，此时需要编辑站点。如修改站点的默认图像文件夹的路径，其具体的操作步骤如下。

（1）选择“站点>管理站点”命令，弹出“管理站点”对话框。

（2）在对话框中，选择要编辑的站点名，单击“编辑当前选定的站点”按钮，在弹出的对话框中，选择“高级设置”选项，此时可根据需要进行修改，如图1-31所示，单击“保存”按钮完成设置，回到“管理站点”对话框。

（3）如果不需要修改其他站点，可单击“完成”按钮关闭“管理站点”对话框。

1.3.3 复制站点

复制站点可省去重复建立多个结构相同站点的操作步骤，可以提高用户的工作效率。在“管理站点”对话框中可以复制站点，其具体操作步骤如下。

（1）在“管理站点”对话框左下方的按钮选项组中，单击“复制当前选定的站点”按钮进行复制。

（2）用鼠标左键双击新复制的站点，弹出“站点设置对象 基础素材 复制”对话框，在“站点名称”选项的文本框中可以更改新站点的名称。

1.3.4 删除站点

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

在“管理站点”对话框中删除站点的具体操作步骤如下。

（1）在“管理站点”对话框左下方的按钮选项组中，单击“删除当前选定的站点”按钮进行删除。

（2）单击“删除当前选定的站点”按钮即可删除选择的站点。

1.3.5 导入和导出站点

如果在计算机之间移动站点，或者与其他用户共同设计站点，可通过Dreamweaver CC的导入和导出站点功能实现。导出站点功能是将站点导出为“.ste”格式文件，然后在其他计算机上将其导入到Dreamweaver CC中。

1．导出站点

（1）选择“站点>管理站点”命令，弹出“管理站点”对话框。在对话框中，选择要导出的站点，单击“导出当前选定的站点”按钮，弹出“导出站点”对话框。

（2）在该对话框中浏览并选择保存该站点的路径，如图1-32所示，单击“保存”按钮，保存扩展名为“.ste”的文件。

（3）单击“完成”按钮，关闭“管理站点”对话框，完成导出站点的设置。

2．导入站点

导入站点的具体操作步骤如下所示。

（1）选择“站点>管理站点”命令，弹出“管理站点”对话框。

（2）在对话框中，单击“导入站点”按钮，弹出“导入站点”对话框，浏览并选定要导入的站点，如图1-33所示，单击“打开”按钮，站点被导入，如图1-34所示。

（3）单击“完成”按钮，关闭“管理站点”对话框，完成导入站点的设置。

1.4 网页文件头设置

文件头标签在网页中是看不到的，它包含在网页中的<head> … </head>标签之间，所有包含在该标签之间的内容在网页中都是不可见的，文件头标签主要包括META、关键字、说明、刷新、基础和链接等。

1.4.1 插入搜索关键字

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

设置网页搜索关键字的具体操作步骤如下。

（1）选中文档窗口中的“代码”视图，将鼠标指针放在<head>标签中，选择“插入>Head（H）>关键字”命令，弹出“关键字”对话框，如图1-35所示。

（2）在“关键字”对话框中输入相应的中文或英文关键字，但注意关键字间要用半角的逗号分隔。如设定关键字为“浏览”，则“关键字”对话框的设置如图1-36所示，单击“确定”按钮，完成设置。

（3）此时，观察“代码”视图，发现<head>标签内多了下述代码。

“<meta name="keywords" content="浏览">”

同样，还可以通过<meta>标签实现设置搜索关键字，具体操作步骤如下。

选择“插入>Head（H）>Meta（M）”命令，弹出“META”对话框。在“属性”选项的下拉列表中选择“名称”，在“值”选项的文本框中输入“keywords”，在“内容”选项的文本框中输入关键字信息，如图1-37所示“浏览”。设置完成，单击“确定”按钮后可在“代码”视图中查看相应的html标记。

1.4.2 插入作者和版权信息

要设置网页的作者和版权信息，可选择“插入>Head（H）>Meta（M）”命令，弹出“META”对话框。在“值”选项的文本框中输入“/x.Copyright”，在“内容”选项的文本框中输入作者名称和版权信息，如图1-38所示，完成后单击“确定”按钮。

此时，在“代码”视图中的<head>标签内可以查看相应的html标记。

“<meta name="/x.Copyright" content="作者：ABC版权所有">”

1.4.3 设置刷新时间

要指定载入页面刷新或者转到其他页面的时间，可设置文件头部的刷新时间项，具体操作步骤如下。

选择“插入>Head（H）>Meta（M）”命令，弹出“META”对话框。在“属性”选项的下拉列表中选择“HTTP-equivalent”选项，在“值”选项的文本框中输入“refresh”，在“内容”选项的文本框中输入需要的时间值，如图1-39所示，完成后单击“确定”按钮。

此时，在“代码”视图中的<head>标签内可以查看相应的html标记。

“<meta http-equiv="refresh" content="60">”

1.4.4 设置描述信息

搜索引擎也可通过读取<meta> 标签的说明内容来查找信息，但说明信息主要是设计者对网页内容的详细说明，而关键字可以让搜索引擎尽快搜索到网页。设置网页说明信息的具体操作步骤如下。

（1）选中文档窗口中的“代码”视图，将鼠标指针放在<head>标签中，选择“插入>Head（H）>说明”命令，弹出“说明”对话框。

（2）在“说明”对话框中设置说明信息。

如在网页中设置为网站设计者提供“利用ASP脚本，按用户需求进行查询”的说明信息，对话框中的设置如图1-40所示。

此时，在“代码”视图中的<head>标签内可以查看相应的html标记。

“<meta name="description" content="利用ASP脚本，按用户需求进行查询">”

同样，还可以通过<meta>标签实现，具体设置如图1-41所示。