1.2 创建网站框架

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

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

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

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

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

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

1.2.1 站点管理器

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

打开“管理站点”对话框有以下几种方法。

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

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

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

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

1.2.2 定义新站点

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

创建本地站点的步骤如下。

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

（2）在对话框中单击“新建站点”按钮，弹出“站点设置对象”对话框，在左侧选择“站点”选项，设置站点名称，并指定站点文件夹，如图1-20所示；展开“高级设置”选项，选择“本地信息”选项，根据需要设置站点，如图1-21所示。

“本地信息”选项各项参数的作用如下。

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

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

“Web URL”选项：在文本框中输入创建的站点将使用的URL。

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

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

1.2.3 创建子文件夹

建立站点后，可在“文件”面板中创建子文件夹。

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

（1）在“文件”面板中选择站点。

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

① 单击面板右上方的菜单按钮，在弹出的菜单中选择“文件 > 新建文件夹”命令。

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

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

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

1.2.4 创建和保存网页

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

在网站中有一个特殊的网页，这个网页就是首页，每个网站必须有一个首页。每当访问者在浏览器的地址栏中输入网站地址时，会自动打开网站的首页，如在浏览器的地址栏中输入“www.ptpress.com.cn”时会自动打开人民邮电出版社网站的首页。一般情况下，首页的文件名为index.htm、index.html、index.asp、default.asp、default.htm或default.html。

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

（1）选择“文件 > 新建”命令，或按Ctrl+N组合键，弹出“新建文档”对话框，选择“新建文档”选项，在“文档类型”列表中选择“HTML”选项，在“框架”选项框中选择“无”选项卡，各选项的设置如图1-22所示。

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

文档窗口有3种视图模式，这3种视图模式的作用如下。

“代码”视图：对于有编程经验的网页设计师而言，可在“代码”视图中查看、修改和编写网页代码，以实现特殊的网页效果。“代码”视图的效果如图1-24所示。

“设计”视图：以所见即所得的方式显示所有网页元素。“设计”视图的效果如图1-25所示。

“拆分”视图：将文档窗口分为上、下两部分，下方是代码窗格，显示代码；上方是设计窗格，显示网页元素及其在页面中的分布。在此视图中，网页设计者可以通过在设计窗格中单击网页元素的方式，快速定位到要修改的网页元素代码，并进行代码的修改，或在“属性”面板中修改网页元素的属性。“拆分”视图的效果如图1-26所示。

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