1.7 建立站点
建立网站之前，一般先建立站点。站点是某个网站的本地或远程存储位置，是存放网站所有网页及各种素材的文件夹。
通过将本地文件夹映射为站点，可以有效地将网页和素材组合起来，利用超链接从一个网页跳转到另一个网页，实现对网站的浏览。建立站点是网站开发的第一步，后续的网站开发工作都在站点中进行，这有助于网站的开发和管理。下面以Dreamweaver环境为例，介绍站点的创建过程。在创建站点之前，先介绍一下Dreamweaver的工作环境。
1.7.1 Dreamweaver CS6介绍
Dreamweaver CS6是Adobe公司推出的一款集网页制作和网站管理于一身的编辑工具。使用Dreamweaver CS6，既可以在代码视图状态下书写HTML代码，也可以利用设计视图提供的可视化环境进行开发。Dreamweaver CS6版本对HTML和CSS都有良好的语法提示功能，用户使用起来非常方便。
1.Dreamweaver CS6的编辑窗口
Dreamweaver CS6的页面编辑窗口主要包括菜单栏、文档窗口，还包括属性面板、插入面板、文件面板等面板组和一些可选的工具栏。图1-11是Dreamweaver代码视图下的编辑窗口。
图1-11 Dreamweaver CS6的编辑窗口
（1）文档窗口
该窗口用于网页代码的输入和编辑。在“设计”视图下，网页编辑的结果与最终在浏览器中显示的效果近似。图1-11所示为在代码视图下编辑网页，所以显示为一些代码。
（2）工具栏
文档窗口上方可以显示各种工具栏，图1-11中显示的是“文档工具栏”和“编码工具栏”，这些工具栏可以通过执行【查看】/【工具栏】菜单命令显示或隐藏。
文档工具栏中的“代码”“拆分”“设计”3个按钮经常使用。通常，单击【代码】按钮，文档窗口工作在代码视图下，可以很方便地输入HTML和CSS代码；单击【设计】按钮，文档窗口工作在设计视图下，可以使用可视化方式完成网页设计；如果单击【拆分】按钮，文档窗口分为上、下两部分，分别显示代码和页面效果，方便初学者学习。
文档工具栏还包括浏览器导航、编码和样式呈现工具栏。
2.浮动面板组
Dreamweaver通过面板为用户提供大量的可用工具，执行菜单栏中“窗口”菜单中的命令，可以显示和隐藏各种面板。这些面板不用时可以关闭，也可以折叠。最常用的面板是属性面板，其他还包括插入面板、文件面板、行为面板等。
（1）属性面板
属性面板会随着编辑的内容而变化。例如，如果选中网页中的文字，将出现文字的属性面板，其中包含了所要编辑文字的所有内容，包括字体、颜色、大小、连接、缩进等；如果选择网页中的图片，将出现图片的属性面板，包括图片的宽度、高度、文件链接地址等内容，如图1-12所示。通过属性面板，可以很方便地设置网页元素的属性。
图1-12 属性面板
（2）插入面板
插入面板的主要功能相当于插入菜单，主要是向网页中插入一些对象，如表格、框架、图像、层等，如图1-13所示。插入面板是分类的，它通过一个下拉菜单，把要插入的选项都包括在面板中。
（3）其他面板
除此之外，针对不同的网页元素还有其他若干面板，如行为面板、文件面板、历史面板等。
3.创建第一个Dreamweaver文档
Dreamweaver启动后，执行【文件】/【新建】命令，打开“新建文档”对话框，如图1-14所示。它提供了一些可供使用的模板来创建文档，这里使用最基本的一种，也是默认的一种。选择【空白页】中的【HTML】选项，然后单击【创建】按钮，就可以打开一个新的文档窗口。这时，文档还没有命名，在编辑完成后要为它命名，并保存到本地的网站文件夹中。
图1-13 插入面板
需要说明的是，对于新建的空白文档，如果工作在设计视图下，窗口中没有显示的内容；如果切换到“代码”或“拆分”视图下，会显示自动生成的HTML代码内容。实际上，即使是空白的网页，网页文件的代码框架也已经存在了，如图1-15所示。
图1-14 “新建文档”对话框
图1-15 空白页面的代码窗口
代码视图中给出了基本的HTML框架，如<html>、<head>、<body>等。此外，还包含“文档类型”声明，如：
<!doctype html>
HTML的规范在不断发展，在不同的HTML版本中，文档类型声明是不同的。文档类型声明的作用是告诉浏览器按照哪种具体的规范来解析和显示这个页面。尽管不同的语言版本之间有区别，但事实上它们的结构和元素基本是相同的，所以，在记事本文件中编写HTML页时，不书写上面的代码，大多数浏览器也能正常显示网页。
对于刚建完的空白页，在设计视图下，输入文字并插入图片后，可以得到图1-16所示的网页。当然，这只是一个网页，如果要建设包括很多网页的网站，就需要用到下面要讲的站点的概念了。
图1-16 在设计视图下加入图片后得到的网页
1.7.2 Dreamweaver站点组成
使用Dreamweaver开发网站时，最好先建立站点，然后再具体制作网页。通常站点由以下3个部分（文件夹）组成，具体取决于开发环境和所开发的Web站点类型。
（1）本地根文件夹
本地根文件夹用于存储正在处理的文件。Dreamweaver将此文件夹称为“本地站点”。此文件夹通常位于本地计算机上，但也可能位于网络服务器上，存放着所有网页及素材。
（2）远程文件夹
远程文件夹存储用于测试、生产和协作等用途的文件。Dreamweaver在文件面板中将此文件夹称为“远程服务器”。远程文件夹通常位于运行Web服务器的计算机上。远程文件夹包含用户从Internet访问的文件。
（3）测试服务器文件夹
测试服务器文件夹是Dreamweaver用于处理动态网页的文件夹。
制作网站时，通常先规划网站的目录结构，然后创建本地站点，制作网页，完成后将本地站点上传至远程站点，最后测试发布。如果要定义Dreamweaver本地站点，只需设置一个本地文件夹。本地站点在开发过程中，还可以不断调整。若要向Web服务器传输文件或开发Web应用程序，还必须添加远程站点和测试服务器信息。通过本地文件夹和远程文件夹的结合使用，可以在本地硬盘和Web服务器之间传输文件，轻松管理Dreamweaver站点中的文件。
1.7.3 创建站点
若要创建本地站点，只需指定用于存储所有站点文件的本地文件夹。该本地文件夹可以位于本地计算机上，也可以位于Web服务器上。具体步骤如下。
①在本地计算机上创建要用于存储站点文件的本地文件夹D:\Tourism，文件夹结构根据网站需要设计，将D:\Tourism作为本地根文件夹。
②在Dreamweaver窗口中执行【站点】/【新建站点】命令，在出现的“站点设置对象”对话框中输入站点名称。然后在“本地站点文件夹”文本框中，输入用于存储站点文件的本地文件夹的地址即可，如图1-17所示。也可以单击该文本框右侧的浏览按钮
，选择相应的文件夹。
图1-17 “站点设置对象”对话框
③单击【保存】按钮，关闭“站点设置对象”对话框，Dreamweaver中的本地站点就建成了。
④设置好站点文件夹后，可以在“站点设置对象”对话框中填写服务器信息、版本控制信息和高级设置信息。其中，“服务器”信息用于指定远程服务器上的远程文件夹。在“高级设置”信息的“本地信息”中可以设置存储站点图像的文件夹、站点的链接方式和是否创建本地缓存以提高链接和站点管理任务的速度等内容。
⑤定义好本地站点之后，Dreamweaver窗口右侧的“文件”面板就会显示刚才定义站点的目录结构，如图1-18所示。可以在此面板中的站点目录内新建文件或子文件夹，这与在资源管理器中的操作相同。这样，就可以在站点中创建网页文件，进行网站建设了。
图1-18 “文件”面板
1.7.4 管理站点
Dreamweaver提供了站点管理功能。在“管理站点”对话框中，可以完成创建新站点、编辑现有站点、复制站点、删除站点或者导入/导出站点工作。管理站点的具体操作如下。
①在Dreamweaver窗口中，执行【站点】/【管理站点】命令，弹出的“管理站点”对话框中列出了已经存在的站点名称，如图1-19所示。从列表中选择某站点，单击下方的相应管理选项，进行相应操作，然后单击【完成】按钮即可。
图1-19 “管理站点”对话框
②“管理站点”窗口的主要功能如下。
•新建站点：创建新站点。单击【新建站点】按钮后，将会打开“站点设置”对话框，可以命名或指定新站点的位置。
•编辑站点：编辑用户名、口令等信息以及当前Dreamweaver站点的服务器信息。在站点列表中选择现有站点，然后单击编辑站点图标
，即可编辑当前站点。
•复制站点：创建当前站点的副本。若要复制站点，需要在站点列表中选择该站点，然后单击复制站点图标
。复制的站点将会显示在站点列表中，站点名称后面会附加“复制”字样。若要更改复制站点的名称，请选中该站点，然后单击编辑站点图标。
•删除站点：从Dreamweaver站点列表中删除选定的站点及其所有设置信息，这并不会删除实际站点文件。若要删除站点，请在站点列表中选择该站点，然后单击删除站点图标
。
注意此操作是无法撤销的。
•导入/导出站点：导入用XML描述的站点，或将选定站点导出为XML文件（*.ste）。导入功能仅导入以前导出的站点，并不可以通过导入站点文件来创建新的Dreamweaver站点。