点设计
本章了解站点的相关知识，并用DreamweaverCS6创建本地站点，学习用“文件”面板来管理站点中的资源。
学习本章的时候，要注意对工作环境的熟悉、基本操作的领会及掌握。
本章重点包括：站点的创建、编辑、删除；熟悉“文件”面板；能熟练地使用DreamweaverCS6的站点管理技术。
3.1站点概述 站点（即Web站点）是一组具有相关主题、类似设计的链接文档和资源。
DreamweaverCS6不仅可以创建单独的文档，还可以创建完整的Web站点。
“DreamweaverCS6站点”和“Web站点”不完全相同。
“DreamweaverCS6站点”是在DreamweaverCS6制作网页的过程中所使用的术语，指属于某个“Web站点”的文档的本地或远程存储位置。
“Web站点”则是把网站内容放到或的Web服务器上供用户浏览，即运行系统的Web服务器上的站点。
网站的发布过程就是将DreamweaverCS6站点变成Web站点的过程。
1．规划和组织站点结构创建本地站点前认真规划和组织站点结构，可以避免挫折、节省时间。
尤其当站点较大时，如果不考虑好文档在文件夹的层次就开始创建，最终将文件混乱无序地存放在一个巨大的文件中，或者是一些相关文件却分散在一些有着类似名称的文件夹中，这些情况都不利于站点的管理和后续维护工作。
规划站点组织结构时，可以按照站点内容进行分解归类，即对于不同栏目，要创建相应的子文件夹来存放本栏目的内容。
另外，对于本栏目不同类型的资源文件，创建相关的文件夹进行存放。
这种组织形式可以使站点便于开发、维护和浏览。
例如，某公司网站有“关于我们”和“公司新闻”两个栏目，可以创建名为about的文件夹，存放与公司简介相关的网页内容（必要时可以在其下再创建名为images的子文件夹，存放与公司简介相关的图片资源）；在名为news的文件夹中存放关于公司新闻方面的网页内容；创建images文件夹以存放图片首页中需要使用图片文件，如图3.1所示。
另外，为了便于管理和维护，建议在本地和远程站点上使用相同的组织结构。
这样使得DreamweaverCS6本地站点的文件上传到远程站点上的时候，DreamweaverCS6将保证本地结构会精确地复制到远程站点中，使得本地站点和远程Web站点具有完全一样 的结构。
第3章站点设计 41 图3.1某公司网站站点的文件夹组织结构 通常，制作站点时首先应在本地硬盘创建一个文件夹，然后，在网站制作过程中，将所有的网页、图片、音频、视频、动画等内容都保存在该文件夹中。
网站制作完成后，在发布站点时，将这些文件上传到Web服务器上指定位置即可。
最为重要的是创建站点后，可以形成清晰的站点组织结构图，使用者能够对站点结构了如指掌，方便对网站的管理（例如增减站点文件夹及文档等）。
综上所述，开始使用DreamweaverCS6前，应该先创建一个Web站点，再进行以后的操作。
2．Dreamweaver的3种站点Dreamweaver站点由3个部分（或文件夹）组成，具体取决于开发环境和所开发的Web站点类型。
☞提示：若要定义Dreamweaver站点，只需设置一个本地文件夹。
若要向Web服务器传输文件或开发Web应用程序，还必须添加远程站点和测试服务器信息。
本地根文件夹即工作目录，是存放正在处理的文件的文件夹。
DreamweaverCS6将该文件夹作为Web站点的“本地站点”，既可以放在本地计算机上，也可以放在网络服务器上。
在制作一般静态网页时只创建本地站点即可。
远程文件夹是存储用于测试、生产、协作等文件的地方，Dreamweaver在“文件”面板中将此文件夹称为“远程站点”。
远程文件夹一般位于网络上运行Web服务器的计算机上，远程文件夹包含用户从访问的文件。
通过本地文件夹和远程文件夹的结合使用，可以在本地硬盘和Web服务器之间传输文件，这将有助于轻松地管理Dreamweaver站点中的文件。
可以在本地文件夹中处理文件，如果需要让其他人查看，再将它们发布到远程文件夹。
测试服务器文件夹是DreamweaverCS6处理动态页面的文件夹（也称为“测试站点”）。
DreamweaverCS6使用此文件夹生成动态内容并在工作时连接到数据库。
42 网页设计与制作（第2版） 本地站点和远程站点能够使用户在本地磁盘和Web服务器之间传输文件。
测试站点则用于动态页面测试。
除非需要开发动态Web应用程序，否则无须考虑此文件夹。
使用DreamweaverCS6前必须至少设置一个本地文件夹。
3.2创建本地站点 本节介绍DreamweaverCS6中创建站点的方法。
3.2.1通过“站点设置对象”创建本地站点
1．打开“站点设置对象”对话框通过站点定义方式创建站点，首先需要打开“站点设置对象”对话框。
在DreamweaverCS6中有3种方法打开“站点设置对象”对话框，如图3.2所示。
方法一：单击“起始页”界面中间部分“新建”分类中的“Dreamweaver站点”选项。
方法二：通过DreamweaverCS6菜单，选择“站点”“新建站点”菜单命令。
方法三：选择“站点”“管理站点”菜单命令，打开“管理站点”对话框，如图3.3所示，在对话框中单击“新建站点”按钮。
图3.2打开“站点设置对象”对话框的方法 第3章站点设计 43 图3.3“管理站点”对话框
2．输入站点名称在“站点设置对象”对话框的“站点名称”项输入站点名称，例如mysite1，则“站点设置对象未命名站点”对话框变为“站点设置对象mysite1”对话框。
在“本地站点文件夹”项，直接在输入框中输入站点文件存储位置，或者单击输入框后面的文件夹图标，选择一个本地文件夹即可，其结果如图3.4所示（注意站点名称中、英文不限，最好和站点内容相关，这样便于管理）。
图3.4“站点设置对象”对话框 44 网页设计与制作（第2版） 上一步完成之后，就开始在Dreamweaver中处理本地站点文件了，可以展开“文件”面板，如图3.5所示。
图3.5“文件”面板中的站点 3.2.2连接到服务器 在Dreamweaver中指定本地站点后，可以根据开发环境和需要为站点指定远程服务器，如图3.6所示。
远程服务器（通常称为Web服务器）用于发布站点文件以便联机查看。
在设置远程文件夹时，必须为Dreamweaver选择连接方法，以将文件上传和下载到Web服务器。
最典型的连接方法是FTP，但Dreamweaver还支持本地/网络、FTPS、SFTP、WebDav和RDS连接方法。
图3.6“服务器”选项 第3章站点设计 45
1．FTP连接方式单击服务器列表左下角的添加新服务器按钮 出现如图3.7所示界面。
图3.7添加新服务器的“基本”界面
（1）在“服务器名称”文本框中，指定新服务器的名称。
（2）从“连接方法”下拉菜单中选择FTP。
（3）在“FTP地址”文本框中，输入要将网站文件上传到其中的FTP服务器的地址。
FTP地址是计算机系统的完整名称，如。
请输入完整的地址，并且不要附带其他任何文本，特别是不要在地址前面加上协议名（如果不知道FTP地址，请与Web托管服务商联系）。
☞提示：端口21是接收FTP连接的默认端口。
可以通过编辑右侧的“端口”文本框来更改默认端口号。
保存设置后，FTP地址的结尾将附加上一个冒号和新的端口号（例如，:29）。
（4）在“用户名”和“密码”文本框中，输入用于连接到FTP服务器的用户名和密码。
单击“测试”按钮，测试FTP地址、用户名和密码。
☞提示：对于托管站点，必须从托管服务商的系统管理员处获取FTP地址、用户名和密码信息。
其他人无权访问这些信息，确切按照系统管理员提供的形式输入相关信息。
（5）默认情况下，Dreamweaver会保存密码。
如果希望每次连接到远程服务器时 46 网页设计与制作（第2版） Dreamweaver都提示输入密码，请取消选择“保存”选项。
（6）在“根目录”文本框中，输入远程服务器上用于存储公开显示的文档的目录（文 件夹）。
如果不能确定应输入哪些内容作为根目录，与服务器管理员联系或将文本框保留为 空白。
在有些服务器上，根目录就是首次使用FTP连接到的目录。
（7）在WebURL文本框中，输入Web站点的URL（例如，）。
Dreamweaver使用WebURL创建站点根目录相对链接，并在使用链接检查器时验证这些链接。
（8）如果仍需要设置更多选项，展开“更多选项”部分，如图3.8所示。
图3.8添加新服务器的“更多选项”界面 如果代理配置要求使用被动式FTP，选择“使用被动式FTP”。
被动式FTP使您的本地软件能够创建FTP连接，而不是请求远程服务器来创建它。
如果不确定是否使用被动式FTP，请向系统管理员确认，或者尝试选中和取消选中“使用被动式FTP”选项。
如果使用的是启用IPv6的FTP服务器，选择“使用IPv6传输模式”。
随着协议第6版(IPv6)的发展，EPRT和EPSV已分别替代了FTP命令PORT和PASV。
因此，如果正试图连接到支持IPv6的FTP服务器，必须为数据连接使用被动扩展(EPSV)和主动扩展(EPRT)命令。
有关详细信息，请参阅/。
如果希望指定一个代理主机或代理端口，选择“使用以下位置中定义的代理”。
有关详细信息，单击“首选参数”链接转到“首选参数”对话框，然后从该对话框的“站点”类别中单击“帮助”按钮。
（9）单击“保存”按钮关闭“基本”界面。
然后在“服务器”类别中，指定刚添加或编辑的服务器为远程服务器或测试服务器，或者是同时为这两种服务器，如图3.9所示。
图3.9服务器列表 使用本地站点连接好远程服务器后，在站点面板中就可以对文件进行上传、下载操作，一般情况下都是选择FTP连接方式。
第3章站点设计 47 在“站点设置对象”对话框中，除了一些基本的设置之外还有“高级”选项卡，如图3.10所示。
其各项说明如下： 维护同步信息：保持服务器与本地信息同步。
保存时自动将文件上传到服务器：选中该复选框，保存文件时自动将其上传到服 务器。
启用文件取出功能：在打开文件时，自动设置为取出。
取出名称：输入取出文件的人员名称，输入后在站点窗口中取出文件时将显示该 名称。
电子邮件地址：输入取出人员的电子邮件地址。
图3.10服务器设置“高级”界面 ☞提示：文件取出功能在团队开发设计的环境中特别有用，通过设置文件的制度属性，可以方便工作组中的其他人修改该文件。
2．SFTP连接如果代理配置要求使用安全FTP，选中“使用安全FTP(SFTP)”。
SFTP使用加密密钥和共用密钥来保证指向测试服务器的连接的安全。
☞提示：若要选择此选项，服务器必须运行SFTP服务。
如果不知道服务器是否运行SFTP，向服务器管理员确认。
在“站点设置”对话框中，选择“服务器”类别，然后单击“添加新服务器”按钮，添加一个新服务器或者选择一个现有的服务器，然后单击“编辑现有服务器”按钮。
接着在“服务器名称”文本框中指定新服务器的名称。
该名称可以是所选择的任何 48 网页设计与制作（第2版） 名称。
从“连接方法”弹出菜单中选择SFTP。
其余选项与FTP连接的选项相同。
有关详细信息，请参阅上述部分。
☞注意：端口22是接收SFTP连接的默认端口。
3．FTPS连接（DreamweaverCS5.5）SFTP仅支持加密，与其相比，FTPS(FTPoverSSL)既支持加密，又支持身份验证。
使用FTPS传输数据时，可选择将凭据加密，也可将传输到服务器的数据加密。
此外，可选择对服务器的凭据和连接进行身份验证。
对照Dreamweaver数据库中当前的一组可信CA服务器证书，验证服务器的凭据。
证书颁发机构(CA)包括VeriSign、Thawte等公司，颁发经过数字签名的服务器证书。
在图3.7中的连接方式下拉子项中选择“FTPoverSSL/TLS（隐式加密）”，则出现如图3.11所示的配置界面。
图3.11FTPS连接设置界面 其各项说明如下：
（1）连接方法：FTPoverSSL/TLS（隐式加密）——如果未收到安全性请求，则服务器终止连接。
FTPoverSSL/TLS（显式加密）——如果客户端未请求安全性，则服务器可选择进行不安全事务，或拒绝/限制连接。
（2）验证：下拉框中选项有“无（仅加密）”和“可信服务器”两个选项。
“无（仅加密）”表示显示服务器的凭据（经过签名或自签名）。
如果接受服务器 的凭据，则向Dreamweaver中的证书存储trustedSites.db添加证书。
下次连接到同一服务器时，Dreamweaver将直接连接到该服务器。
如果服务器上已更改 第3章站点设计 49 了自签名证书的凭据，则将提示用户接受新的凭据。
“可信服务器”选项对照Dreamweaver数据库中当前的一组可信CA服务器证书 验证所提供的证书。
可信服务器的列表存储在cacerts.pem文件中。
☞提示：如果选择“可信服务器”，然后用自签名证书连接服务器，则会显示一条错误消息。
可以展开“更多选项”部分以设置更多选项。
（1）仅加密命令通道：如果只想将所传输的命令加密，则选择本选项。
当所传输的数据已加密，或其中不含敏感信息时，请使用此选项。
（2）仅加密用户名和口令：如果只想将用户名和密码加密，则选择此选项。
单击“保存”按钮关闭“基本”屏幕。
然后在“服务器”类别中，指定所添加或编辑的服务器是远程服务器、测试服务器还是两者皆是。
4．本地或网络连接在连接到网络文件夹或在本地计算机上存储文件或运行测试服务器时使用此设置，如图3.12所示。
（1）服务器名称：在该文本框中指定新服务器的名称。
该名称可以是所选择的任何名称。
（2）连接方法：选择“本地/网络”。
（3）单击“服务器文件夹”文本框旁边的文件夹图标，浏览并选择存储站点文件的文件夹。
（4）在WebURL文本框中，输入Web站点的URL（例如，）。
Dreamweaver使用WebURL创建站点根目录相对链接，并在使用链接检查器时验证这些链接。
单击“保存”按钮关闭“基本”屏幕。
然后在“服务器”类别中指定刚添加或编辑的服务器为远程服务器或测试服务器，或者是同时为这两种服务器。
图3.12本地或网络连接设置界面 50 网页设计与制作（第2版）
5．WebDAV连接如果使用基于Web的分布式创作和版本控制(WebDAV)协议连接到Web服务器，请使用此设置。
其配置界面如图3.13所示。
对于这种连接方法，必须有支持此协议的服务器，如MicrosoftInformationServer(IIS)5.0，或安装正确配置的ApacheWeb服务器。
☞提示：如果选择WebDAV作为连接方法，并且是在多用户环境中使用Dreamweaver，则还应确保所有用户都选择WebDAV作为连接方法。
如果一些用户选择WebDAV，而另一些用户选择其他连接方法（例如FTP），那么，由于WebDAV使用自己的锁定系统，因此Dreamweaver的存回/取出功能将不会按期望的方式工作。
图3.13WebDVA连接设置界面 图3.13中的各项设置说明如下：
（1）连接方法：选择WebDAV。
（2）URL：输入WebDAV服务器上要连接到的目录的完整URL。
此URL包括协议、端口和目录（如果不是根目录），例如/mysite。
（3）输入用户名和密码。
这些信息用于服务器身份验证，与Dreamweaver无关。
如果不能确定用户名和密码，请询问系统管理员或Web管理员。
单击“测试”按钮测试连接设置。
（4）WebURL：输入Web站点的URL（例如）。
Dreamweaver使用WebURL创建站点根目录相对链接，并在使用链接检查器时验证这些链接。
最后，单击“保存”按钮关闭“基本”屏幕。
然后在“服务器”类别中指定刚添加或编辑的服务器为远程服务器或测试服务器，或者是同时为这两种服务器。
6．RDS连接如果使用远程开发服务（RDS）连接到Web服务器，请使用此设置。
对于这种连接方法，远程服务器必须位于运行AdobeColdFusion的计算机上。
其对话框如图3.14所示。
第3章站点设计 51 图3.14RDS连接设置界面 在“连接方法”文本框中选择RDS。
然后单击“设置”按钮打开如图3.15所示的“配置RDS服务器”对话框。
图3.15“配置RDS服务器”对话框
（1）主机名：输入安装Web服务器的主机的名称。
主机名可能是IP地址或URL。
如果不能确定，请询问管理员。
（2）端口：输入要连接的端口号。
（3）完整的主机目录：输入根远程文件夹作为主机目录，例如C:\pub\wwwroot\myHostDir\。
（4）输入RDS用户名和密码。
☞提示：如果在“ColdFusion管理员”安全设置中设置了用户名和密码，则这些选项可能不会出现。
单击“确定”按钮以关闭“配置RDS服务器”对话框。
返回“RDS连接”设置界面，在WebURL文本框中输入Web站点的URL（例如）。
Dreamweaver使用WebURL创建站点根目录相对链接，并在使用链接检查器时验证这些链接。
52 网页设计与制作（第2版） 3.2.3站点的“高级设置” 打开站点设置对话框，单击左侧的“高级设置”选项，如图3.16所示，通过展开的子项可以配置站点的某些高级属性。
图3.16高级设置
1．本地信息单击“本地信息”子项，打开如图3.17所示的“本地信息”选项设置界面，通过“本地信息”子项可以设置本地文件夹的下列属性。
图3.17本地信息设置
（1）默认图像文件夹。
站点中存储根目录下图像的文件夹。
输入文件夹的路径或单 第3章站点设计 53 击文件夹图标浏览到文件夹。
将图像添加到文档时，Dreamweaver将使用该文件夹路径。
（2）站点范围媒体查询文件：选择网站范围的媒体查询文件，Dreamweaver能够将 网站范围的媒体查询文件添加到网站定义中。
（3）链接相对于：在站点中创建指向其他资源或页面的链接时，需要指定 Dreamweaver创建的链接类型。
Dreamweaver可以创建两种类型的链接：文档相对链接和站点根目录相对链接。
默认情况下，Dreamweaver创建文档相对链接。
如果更改默认设置并选择“站点根目录”选项，请确保WebURL文本框中输入了站点的正确WebURL。
更改此设置将不会转换现有链接的路径；此设置仅应用于使用Dreamweaver以可视方式创建的新链接。
☞提示：使用本地浏览器预览文档时，除非指定了测试服务器，或在“编辑”→“首选参数”→“在浏览器中预览”中选择“使用临时文件预览”选项，否则文档中通过站点根目录相对链接进行链接的内容将不会显示。
这是因为浏览器不能识别站点根目录，而服务器能够识别。
（4）WebURL。
Dreamweaver使用WebURL创建站点根目录相对链接，并在使用链接检查器时验证这些链接。
如果制作者不能确定正在处理的页面在目录结构中的最终位置，或者可能在以后会重新定位或重新组织包含该链接的文件，则站点根目录相对链接很有用。
站点根目录相对链接指的是指向其他站点资源的路径为相对于站点根目录（而非文档）的链接。
因此，如果将文档移动到某个位置，资源的路径仍是正确的。
例如，假设指定了/mycoolsite（远程服务器的站点根目录）作为WebURL，而且远程服务器上的mycoolsite目录中包含一个图像文件夹(/mycoolsite/images)。
另外假设index.html文件位于mycoolsite目录中。
当在index.html文件中创建指向images目录中某幅图像的站点根目录相对链接时，该链接如下所示：
假定图像位于图像目录中，图像的文件路径(/mycoolsite/images/image1.jpg)将始终是正确的，即使将index.html文件移到其他目录也是如此。
关于链接验证，要确定链接是站点内部链接还是站点外部链接，必须使用WebURL。
例如，如果WebURL为/mycoolsite，且链接检查器在页面上发现一个链接的URL为，则检查器确定后一个链接为外部链接，并如此进行报告。
同样，链接检查器使用WebURL来确定链接是否为站点内部链接，然后检查以确定这些内部链接是否已断开。
54 网页设计与制作（第2版）
（5）区分大小写的链接检查。
在Dreamweaver检查链接时，将检查链接的大小写与文件名的大小写是否相匹配。
此选项用于文件名区分大小写的UNIX系统。
（6）启用缓存。
指定是否创建本地缓存以提高链接和站点管理任务的速度。
如果不选择此选项，Dreamweaver在创建站点前将再次询问是否希望创建缓存。
最好选择此选项，因为只有在创建缓存后“资源”面板（在“文件”面板组中）才有效。
2．遮盖利用站点遮盖功能，可以从“获取”或“上传”等操作中排除某些文件和文件夹。
还可以从站点操作中遮盖特定类型的所有文件（JPEG、FLV、XML等）。
Dreamweaver会记住每个站点的设置，因此不必每次在该站点上工作时都进行选择。
可以指定要遮盖的特定文件类型，以便Dreamweaver遮盖以指定形式结尾的所有文件。
例如，可以遮盖所有以.txt扩展名结尾的文件。
（1）遮盖站点中的特定文件类型。
其设计界面如图3.18所示。
图3.18“遮盖”高级属性的设置界面 “遮盖具有以下扩展名的文件”复选框：在框中输入要遮盖的文件类型，然后单击“确定”按钮。
例如，可以输入.jpg以遮盖站点中名称以.jpg结尾的所有文件。
用一个空格分隔多个文件类型，不要使用逗号或分号。
最后在“文件”面板中，被遮盖的文件图标上就会显示一条红线穿过受影响的文件，指示它们已被遮盖。
☞提示：仍然可以对特定的已遮盖文件或文件夹执行操作，方法是：在“文件”面板上选择该项，然后对它执行操作。
直接对文件或文件夹执行的操作会取代遮盖设置。
第3章站点设计 55
（2）取消遮盖站点中的特定文件类型。
在图3.18所示的“遮盖”对话框中，执行下列操作之一可以取消对特定文件的遮盖。
方法一：取消选择“遮盖具有以下扩展名的文件”选项，可以取消对其下面的文本框中列出的所有文件类型的遮盖。
方法二：从框中删除特定文件类型，可以取消这些文件类型的遮盖。
红线从受影响的文件上消失，指示它们已被取消遮盖。
3．设计备注设计备注是为文件创建的备注。
设计备注与它们所描述的文件相关联，但存储在单独的文件中。
对于添加了设计备注的文件，还可以在展开的“文件”面板中看到哪些文件具有设计备注：“设计备注”图标会出现在“备注”列中。
通常使用设计备注来记录与文档关联的其他文件信息，如图像源文件名称和文件状态说明。
例如，如果将一个文档从一个站点复制到另一个站点，则可以为该文档添加设计备注，说明原始文档位于另一站点的文件夹中。
还可以使用设计备注来记录因安全原因而不能放在文档中的敏感信息。
例如，可以记录某一价格或配置是如何选定的或哪些市场因素影响了某一设计决策等信息。
通过在“设计备注”类别中对站点启用和禁用设计备注。
启用“设计备注”时，如果需要，还可以选择与他人共享“设计备注”，如图3.19所示。
图3.19“设计备注”高级属性的设置界面
（1）维护设计备注：此复选框用以启用设计备注（取消选择即禁用）。
（2）“清理设计备注”按钮：若要删除站点的所有本地设计备注文件，单击“清理”，然后单击“是”（如果要删除远程设计备注文件，则将需要手动删除它们）。
☞提示：“清理设计备注”命令只能删除MNO（设计备注）文件。
该命令不会删 56 网页设计与制作（第2版） 除_notes文件夹或_notes文件夹中的dwsync.xml文件。
Dreamweaver使用dwsync.xml文件保存有关站点同步的信息。
（3）启用上传并共享设计备注：选中此复选框将与站点关联的设计备注与其余的文档一起上传。
如果选择该选项，则可以和小组的其余成员共享设计备注。
在上传或获取某个文件时，Dreamweaver将自动上传或获取关联的设计备注文件。
如果未选择此选项，则Dreamweaver在本地维护设计备注，但不将这些备注与相关文件一起上传。
如果独自在站点上工作，取消选择此选项可改善性能。
当存回或上传文件时，设计备注并不会传输到远程站点，因此仍可以在本地为站点添加和修改设计备注。
4．文件视图列在展开的“文件”面板中查看Dreamweaver站点时，有关文件和文件夹的信息将在列中显示。
例如，可以看到文件类型或文件的修改日期。
通过“文件视图列”用户可以自定义在展开的”文件”面板中显示的文件和文件夹详细信息。
可以通过以下任何操作对列进行自定义（某些操作仅适用于添加的列，不适用于默认列）：
（1）更改列的顺序，或将列重新排列。
选择列名称，然后单击向上或向下箭头按钮来更改选定列的位置。
☞提示：可以更改除“名称”列之外任何列的顺序。
“名称”列始终是第一列。
（2）添加、删除或更改详细列。
在图3.20中选择一个列，然后单击加号(+)按钮添加一个列，或减号(–)按钮来删除一个列。
☞提示：单击减号（）将立即删除该列，且不经确认，因此在单击减号(–)按钮前，请务必弄清是否确实要删除该列。
添加一个列时，弹出如图3.21所示的对话框，在该图中的“列名称”框中输入列的名称。
从“与设计备注关联”列表中选择一个值，或者输入自己的值。
☞提示：必须将一个新列与设计备注关联，“文件”面板中才会有数据显示。
接着选择一种对齐方式，以确定该列中的文本对齐方式。
选择或取消选择“显示”以显示或隐藏列。
最后可以选择“与该站点所有用户共享”来与连接到该远程站点的所有用户共享该列。
5．ContributeAdobeContributeCS4整合了Web浏览器和网页编辑器。
它使用户的同事或者客户在浏览用户创建的站点中的某个页面时，如果他们有相应权限，还可以编辑或更新该页面。
Contribute用户可添加和更新基本的Web内容，包括带格式的文本、图像、表格和链接。
Contribute站点管理员可限制普通用户（非管理员）在站点中能够进行的 操作。
第3章站点设计 57 图3.20“文件视图列”高级属性的设置界面 图3.21“文件视图列”高级属性中添加列界面 如果要准备现有Dreamweaver站点以供Contribute用户使用，则需要显式启用Contribute兼容性以使用与Contribute相关的功能；Dreamweaver不提示用户这样做；但是，连接到已设置为Contribute站点（有管理员）的站点时，Dreamweaver将提示用户启用Contribute兼容性，如图3.22所示。
并不是所有的连接类型都支持Contribute的兼容性功能。
连接类型有下列限制：
（1）如果使用WebDAV连接到远程站点，则不能启用Contribute兼容性，因为这些源代码管理系统与Dreamweaver用于Contribute站点的“设计说明”和“签入/签出”系统不兼容。
58 网页设计与制作（第2版） 图3.22高级属性中Contribute设置页面
（2）如果使用RDS连接到远程站点，则可启用Contribute兼容性，但必须先自定义连接，然后才能与Contribute用户共享它。
（3）如果要使用本地计算机作为Web服务器，则必须使用与该计算机的FTP或网络连接（而非只是本地文件夹路径）设置站点，才能与Contribute用户共享该连接。
在图3.22中，单击“启用Contribute兼容性”复选框后如果出现一个对话框，指示必须启用“设计说明”和“签入/签出”，则单击“确定”按钮。
如果尚未提供“存回/取出”联系信息，请在如图3.23所示的对话框中输入姓名和电子邮件地址，然后单击“确定”按钮。
图3.23“Contribute站点设置”对话框 这时，回退状态、CPS状态、“站点根URL”文本框和“在Contribute中管理站点”按钮都将显示在Contribute设置页面中，如图3.24所示。
如果在Contribute中启用了回退，则可回退到已在Dreamweaver中更改的文件的以前版本。
检查“网站根URL”文本框中的URL，如有必要，则更正它。
Dreamweaver根据所提供的其他站点定义信息构造站点根URL，但有时构造的URL不太正确。
接着单击“测试”按钮以确认输入的URL正确无误。
☞提示：如果现在已准备好发送连接密钥或执行Contribute站点管理任务，则跳过其余步骤。
第3章站点设计 59 图3.24Contribute站点设置 若要进行管理更改，请在Contribute中单击“管理站点”。
注意，如果要从Dreamweaver中打开Contribute管理器，必须在安装Dreamweaver的那台计算机上安装Contribute。
最后单击“保存”按钮，然后单击“完成”按钮。
如果要使用Dreamweaver管理Contribute站点，需要启用Contribute兼容性后，才可使用Dreamweaver启动Contribute以执行站点管理任务。
☞提示：必须将Contribute与Dreamweaver安装在同一台计算机上。
6．模板模板是一种特殊类型的文档，用于设计“固定的”页面布局；然后用户便可以基于模板创建文档，创建的文档会继承模板的页面布局。
设计模板时，可以指定在基于模板的文档中哪些内容是用户可编辑的。
模板创作者可以在文档中包括数种类型的模板区域。
☞提示：使用模板可以控制大的设计区域，以及重复使用完整的布局。
如果要重复使用个别设计元素，如站点的版权信息或徽标，可以创建库项目。
使用模板可以一次更新多个页面。
从模板创建的文档与该模板保持连接状态（除非以后分离该文档）。
可以修改模板并立即更新基于该模板的所有文档中的设计。
如果模板文件是通过将现有页面另存为模板来创建的，则新模板在Templates文件夹中，并且模板文件中的所有链接都将更新以保证相应的文档相对路径是正确的。
如果用户以后基于该模板创建文档并保存该文档，则所有文档相对链接将再次更新，从而依然指向正确的文件。
向模板文件中添加新的文档相对链接时，如果在属性检查器的链接文本框中输入路 60 网页设计与制作（第2版） 径，则输入的路径名很容易出错。
模板文件中正确的路径是从Templates文件夹到链接文档的路径，而不是从基于模板的文档的文件夹到链接文档的路径。
在模板中创建链接时就要使用文件夹图标或者使用属性检查器中的“指向文件”图标，以确保存在正确的链接路径。
Dreamweaver8以前的版本不对Templates文件夹中的文件进行更新（例如，假定在Templates文件夹中有一个名为main.css的文件，并且已将href="main.css"作为链接写入模板文件中，则Dreamweaver在创建基于模板的页面时不会更新此链接）。
而在Dreamweaver8中对此行为进行了更改，这样，无论所链接文件从直观上体现的位置在何处，创建基于模板的页面时所有文档相对链接都将更新。
在这种情况下，Dreamweaver会检查模板文件中的链接（href="main.css"），然后在相对于新文档的位置的基于模板的页面中创建链接。
例如，如果用户要在Templates文件夹的上一级创建基于模板的文档，Dreamweaver会在新文档中写入形式为href="Templates/main.css"的链接。
Dreamweaver8中的这一更新将破坏页面中那些由以下设计人员创建的链接，这些设计人员采用的是Dreamweaver以前的做法，即不更新指向Templates文件夹中的文件的链接。
Dreamweaver8之后的版本添加了一个用于启用和禁用更新相对链接行为的首选参数（这个特殊的首选参数仅适用于指向Templates文件夹中的文件的链接，不适用于一般链接）。
默认行为是不更新这些链接（和DreamweaverMX2004及其之前的版本一样），但是如果用户希望Dreamweaver在创建基于模板的页面时更新这种链接，可以取消选择这个首选参数。
若要使Dreamweaver将文档相对路径更新为Templates文件夹中的非模板文件，请在“站点设置对象”对话框的“高级设置”下选择“模板”类别，然后取消选择“不改写文档相对路径”复选框，如图3.25所示。
图3.25站点高级属性“模板”的设置 第3章站点设计 61
7．SprySpryWidget是一个页面元素，通过启用用户交互来提供更丰富的用户体验。
Spry构件在DreamweaverCC及更高版本中由jQuery构件取代。
SpryWidget由以下几个部分组成：
（1）Widget结构：用来定义Widget结构组成的HTML代码块。
（2）Widget行为：用来控制Widget如何响应用户启动事件的JavaScript。
（3）Widget样式：用来指定Widget外观的CSS。
Spry框架支持一组用标准HTML、CSS和JavaScript编写的可重用Widget。
用户可以方便地插入这些Widget（采用最简单的HTML和CSS代码），然后设置Widget的样式。
框架行为包括允许用户执行下列操作的功能：显示或隐藏页面上的内容，更改页面的外观（如颜色），与菜单项交互，等等。
Spry框架中的每个Widget都与唯一的CSS和JavaScript文件相关联。
CSS文件中包含设置Widget样式所需的全部信息，而JavaScript文件则赋予Widget功能。
当使用Dreamweaver界面插入构件时，会自动将这些文件链接到设计者的页面，以便构件中包含该页面的功能和样式。
与给定Widget相关联的CSS和JavaScript文件根据该Widget命名，因此，很容易判断哪些文件对应于哪些Widget（例如，与折叠Widget关联的文件称为ordion.css和ordion.js）。
当在已保存的页面中插入Spry构件、数据集或效果时，Dreamweaver会在站点中创建一个SpryAssets目录，并将相应的JavaScript和CSS文件保存到其中。
如果将Spry资源保存到其他位置，可以更改Dreamweaver保存这些资源的默认位置。
其方法如下：在“站点设置”对话框中，展开“高级设置”并选择Spry类别，如图3.26所示。
输入想要用于Spry资源的文件夹的路径并单击“确定”按钮。
还可以单击文件夹图标浏览到某个位置。
图3.26站点高级属性Spry的设置 62 网页设计与制作（第2版）
8．Web字体如果在网站中使用了Web字体，需要在站点的“高级”设计的“Web字体”分类中指定使用Web字体文件的位置信息，如图3.27所示，可以直接输入或者单击文件夹图标浏览选择。
图3.27站点高级属性“Web字体”的设置 3.3站点管理 创建本地站点之后，可以通过“管理站点”对话框对DreamweaverCS6中创建的全部站点进行管理。
选择“站点”→“管理站点”菜单命令，打开管理站点对话框，或者在“文件”面板中选择“站点管理”子项。
“管理站点”对话框可以完成站点的创建（请参见3.2节内容）、编辑、复制、删除、导入和导出等功能。
如果需要编辑某个站点，只需在“管理站点”对话框中选择这个站点的名称，然后单击“编辑”按钮，可以修改其站点设置，操作与创建站点的步骤类似。
站点复制操作将创建本站点的副本，副本将出现在站点列表窗口中，此操作容易引发混乱，因此对于初学者不建议使用。
站点删除操作：将删除所选站点，此操作无法撤销。
需要注意的是此操作仅删除DreamweaverCS6中的站点，不会删除磁盘上的文件夹以及相关文件。
导入/导出站点：可以将站点导出为包含站点设置的XML文件，并在以后将该站点导入DreamweaverCS6。
这样，就可以在各计算机和产品版本之间移动站点，甚至与其他用户共享这些设置。
通常需要定期对站点执行导出操作，这样即使该站点出现意外，还有它的备份副本。
第3章站点设计 63 若要导出站点，请执行以下操作：首先选择“站点”→“管理站点”菜单命令，打开“管理站点”对话框，在该对话框中选择要执行导出操作的一个或者多个站点（按住Ctrl键单击每个站点，可以选中多个站点；若要选择某一范围的站点，请按住Shift键单击该范围中的第一个和最后一个站点），然后单击“导出”按钮，对于要导出的每个站点，在“导出站点”对话框中选择需要保存站点的位置，然后单击“保存”按钮，如图3.28所示。
DreamweaverCS6会在指定位置将每个站点保存为后缀为.ste扩展名的XML文件。
最后，单击“完成”按钮关闭“管理站点”对话框。
图3.28“导出站点”对话框 导入操作与之相反。
本节初步介绍了DreamweaverCS6的站点管理功能，但是要真正体会到它的强大和快捷，还要在以后的学习、工作中慢慢体会。
3.4使用站点 3.4.1管理文件 在“文件”面板上，从“站点”弹出式菜单中选择一个站点，就可以对相应的站点文件内容进行维护管理。
如图3.29所示选择了mysite站点。
在“文件”面板中按列排序的方法是单击要排序的列的标题。
再次单击标题将反转之前列的排序方式（升序或降序）。
使用“文件”面板工具栏的工具可以方便地与远程服务端上的文件进行同步、获取、上传等操作，如图3.30所示。
64 网页设计与制作（第2版） 单击工具栏中最右边的按钮的文件管理对话框。
（展开以显示本地和站点），弹出如图3.31所示 图3.29“文件”面板的站点维护 图3.30“文件”面板工具栏 图3.31“文件”的文件管理 在以前的DreamweaverCS6版本中，“文件”面板称为“站点”面板。
不论资源位于本地站点还是远程站点，都可以通过“文件”面板组织和管理站点文件和文件夹。
另外，通过DreamweaverCS6的“编辑”→“首选参数”菜单命令，打开“首选参数”对话框。
在左侧的类别列表中选择“站点”，即会出现如图3.32所示的“站点”首选参数的选项，可以根据需要，进行个性化配置。
通过“文件”面板可以直接对站点中的文件或者文件夹进行操作，十分方便，例如，可以打开文件，更改文件名，添加、移动或删除文件。
下面具体讲解其主要操作。
第3章站点设计 65 图3.32“首选参数”的“站点”设置
1.查看站点中的文件具体步骤操作如下：
（1）直接按F8键打开“文件”面板。
（2）在“站点”下拉列表框中选择要查看的站点，如图3.33所示。
（3）在“视图”下拉列表框中选择要查看的视图，选择即本地站点还是远程站点，如图3.34所示。
图3.33站点选择 图3.34视图选择
（4）在显示框中单击相应的文件，双击该文件的图标，或者右击该文件的图标，然后选择“打开”命令。
该文档会在DreamweaverCS6的“文档”窗口中打开。
2.在站点中新建文件夹和文件具体步骤如下：
（1）打开“文件”面板，选择要创建新文件夹或文件的根目录，如图3.35所示。
（2）在根目录图标上右击，在弹出的快捷菜单中选择“新建文件”或“新建文件夹”命令，如图3.36所示。
（3）DreamweaverCS6将自动创建名为untitled.htm的新文件或名为untitled的文件夹，并自动设置为可改写状态，如图3.37所示。
（4）直接输入新的名称即可，如old。
66 网页设计与制作（第2版） 图3.35选定image文件夹 图3.36为image文件夹新建文件夹 图3.37新建文件夹untitled并处于可写状态
3.重命名文件或文件夹重命名文件或文件夹有以下3种方法：
（1）在“文件”面板中选中要重命名的文件或文件夹，然后单击使其进入可改写状态，输入新的名称即可。
（2）在要重命名的文件或文件夹图标上右击，在弹出的快捷菜单中选择“编辑”→“重命名”菜单命令也可进入可改写状态，输入新的名称即可。
（3）先选中要重命名的文件或文件夹，再按F2键，也可进入可改写状态，输入新的名称即可。
4.删除文件或文件夹首先用鼠标选中要删除文件或文件夹，选中的文件或者文件夹背景为蓝色，按Delete键，在打开的确认对话框中单击“确定”按钮。
也可以右击要删除的文件或文件夹图标，在弹出的快捷菜单中选择“编辑”→“删除”菜单命令，在打开的确认话框中单击“确定”按钮确认删除即可。
5.移动文件或文件夹通过两种方法可以实现文件或者文件夹移动。
（1）首先在“文件”面板中选择要移动的文件或文件夹，复制该文件或文件夹，然后粘贴在新位置，最后删除原文件或者文件夹。
第3章站点设计 67
（2）选中文件或文件夹后，将其拖到新位置。
移动时，会弹出如图3.38所示的对话框，一般需要选择更新。
刷新“文件”面板可以看到该文件或文件夹在新位置上。
图3.38“更新文件”对话框
6.刷新“文件”面板如果站点文件较多，对于在“文件”面板中的操作，DreamweaverCS6不能及时自动刷新，导致使用者看到的还是操作前的内容，这种情况会引起操作混乱。
所以，建议使用者操作“文件”面板后能手动刷新“文件”面板。
手动刷新“文件”面板，请先右击任意需要刷新的文件或文件夹，在弹出的快捷菜单中选择“刷新本地文件”菜单命令。
也可以单击“文件”面板工具栏上的“刷新”按钮（或者按F5键）。
7.在站点中查找最近修改的文件在折叠的“文件”面板中，单击“文件”面板右上角的“选项”菜单，然后选择“编辑”→“选择最近修改的文件”菜单命令，如图3.39所示。
这时会打开如图3.40所示的“选择最近修改日期”对话框。
完成此对话框，最后单击“确定”按钮保存刚才的设置。
图3.39“选择最近修改日期”命令 通过上面的操作，DreamweaverCS6会在“文件”面板中高亮显示在指定时间段内修改的文件。
68 网页设计与制作（第2版） 图3.40“选择最近修改日期”对话框 3.4.2管理资源 资源包括存储在站点中的各种元素，如图像或影片文件。
可以从各种来源获取资源，例如，可以在应用程序（如MacromediaFireworks或MacromediaFlash）中创建资源，从其他人那里接收资源，从剪辑作品CD或图片Web站点中复制资源。
1．在“资源”面板中查看资源可以使用“资源”面板查看和管理当前站点中的资源。
“资源”面板显示与“文档”窗口中的活动文档相关联的站点资源。
☞提示：必须首先定义一个本地站点，然后才能在“资源”面板中查看资源。
“资源”面板提供两种列表：
（1）“站点”列表：显示站点的所有资源，包括在该站点的任何文档中使用的颜色和URL。
（2）“收藏”列表：仅显示明确选择的资源。
在这两个列表中，资源被分成多个类别。
“站点”列表和“收藏”列表都可用于除模板和库项目之外的所有资源类别。
☞提示：大多数“资源”面板操作在“站点”列表和“收藏”列表中的工作方式相同。
但是，有几个任务只能在“收藏”列表中执行。
默认情况下，给定类别中的资源按名称的字母顺序列出。
表3.1列出了“资源”面板中的常用操作。
操作打开“资源”面板查看“站点”列表查看“收藏”列表 表3.1“资源”面板常用操作 具体步骤选择“窗口”>“资源”。
在“资源”面板中默认情况下，“图像”类别处于选定状态在“资源”面板中，选择位于面板顶部的“站点”选项在“资源”面板中，选择位于面板顶部的“收藏”选项“收藏”列表为空，直到用户向其中显式添加资源 第3章站点设计 69 操作显示特定类别的资源按不同顺序列出资源 预览资源更改列的宽度更改预览区域的大小 续表 具体步骤单击“资源”面板左侧相应的图标单击某个列标题。
例如，若要根据类型对图像列表进行排序（以便使所有GIF图像在一起，所有JPEG图像在一起，等等），应单击“类型”列标题在“资源”面板中选取资源。
面板顶部的预览区域将显示该资源的可视化预览。
例如，当选择一个影片资源时，预览区域将显示一个图标。
若要查看该影片，请单击预览区域右上角的“播放”按钮（绿色三角形）拖动分隔两个列标题的线向上或向下拖动拆分条（在预览区域和资源列表之间）
2．将资源添加到文档可以将大多数类型的资源插入到文档中，方法是将它们拖动到“文档”窗口中的“代码”视图或“设计”视图，或者使用“插入”按钮，具体操作如下。
若要将资源插入文档，首先将插入点放置在“设计”视图中希望资源出现的位置。
接着，在“资源”面板中，在面板左侧选择要插入的资源的类型。
在面板顶部选择“站点”或“收藏”，然后选择要插入的资源。
然后，执行下列操作之一：方法一：将资源从面板拖动到文档。
可以将脚本拖动到“文档”窗口的文件头内容区域；如果该区域未显示，则选择“查看”→“文件头内容”菜单命令。
方法二：在面板中选择资源，然后单击面板的底部的“插入”按钮，资源即被插入文档中（如果资源为颜色，则该颜色将在插入点开始应用；也就是说，随后输入的内容将以该颜色显示）。
3.5网页设计中的规范 网站的建设和管理是一对矛盾。
快速建站往往会忽略一些小问题，从而使得网站的维护变得困难。
3.5.1DreamweaverCS6中的命名原则 良好的命名对于网站开发起着至关重要的作用，如果对资源进行合理的命名，可以达到事半功倍的效果。
无论是哪种命名规范，无论是对哪种资源进行命名，其核心思想都是“用最少的字母进行最全面的描述”，即“唯一性＋描述性”是命名的灵魂。
网页设计的过程中，对各个方面进行命名的时候，不能不考虑命名原则。
如果只注重制作的迅速与方便，必将为日后的修改或维护带来巨大的困难。
在DreamweaverCS6中用户可以对一系列不同类型的对象进行命名，这些对象包括图片、层、表单、文件、数据库域等，这些对象将会被许多不同的工作引擎进行分析处理，这些工具包括各种浏览器、JavaScript脚本解析器、网络服务器、应用程序服务器、查询语言等。
关于文件的命名，看似无足重轻，但实际上如果没有良好的命名原则进行必要的约 70 网页设计与制作（第2版） 束，随意命名，最终导致的结果就是整个网站或是文件夹无法管理。
所以，命名原则在这里非常重要。
在给文件和目录（文件夹）以及图片等其他资源命名时需要注意以下原则。
1．唯一性请确保某对象的名称与其他对象不同，保证其独一无二的属性。
例如，可以将某对象命名为feedback_button_
3。
2．小写有些服务器和脚本解析器对文件名的大小写也进行检查，而为了避免因大小写引起的不兼容问题，建议用户在命名时全部使用小写文件名。
3．不带空格以及特殊字符不同的解析器对空格等符号的解析结果不同，例如某些解析器会把空格视为某个十六进制的数值，因此建议用户使用不带空格的单词作为文件对象的名称。
在文件以及文件夹的命名中避免使用特殊符号。
特殊符号包括“&”、“＋”、“、”等会导致网站不能正常工作的字符。
用户在命名中可以随意使用26个罗马字母以及10个阿拉伯数字，而不建议使用其他标点符号。
为了使某个对象的文件名独一无
二，用户可以通过使用“_”符号来更加详细地描述文件名。
在某些命名用词中，可以根据词义，使用连字符将它们组合起来。
例如，某对象的文件名可以是jd_background_17。
文件夹的名称最好不要采用诸如“，”、“。
”、“；”、“：”、“.”、“”（空格）等符号，这是因为在不同的操作系统平台上对这些符号的使用限制是不一样的。
如果硬要进行命名区分，请对比下边的命名（以我的家园/家园书屋为例）：wodejiayuanjiayshuwu20010220wodejiayuan-jiayshuwu2001-02-20wodejiayuan_jiayshuwu2001_02_20上边3组命名中，建议采用最后一种。
按照栏目或日期进行命名，名称采用下划线连接，所有的操作系统均支持这种命名方式。
文件名的长度可以不限，但也不要太长，以致不便记忆。
4．以字母开始有些浏览器不接受以数字开头的文件名。
例如，在某些浏览器中的JavaScript脚本内部，如果使用alpha23这样的名称就不会出现问题，而如果使用23alpha这样的名称就可能会发生故障。
除了上述原则标准之外，还需要注意一些其他情况，如文件名与系统的冲突。
某些文件名可能满足上述标准，但可能还会导致故障的发生，原因是因为它们与系统产生了冲突。
需要特别注意的是，网站文件或文件夹命名请尽量避免使用中文字符命名。
如果某个对象的名称无法被某个解析器识别，就有可能会导致故障的发生，更加麻烦的是用户可能很难发现问题的原因。
例如某个具体的特效无法正确显示，或者是在某个特殊阶段无法正确显示，有时故障可能只会在某种特殊情况或在使用某个浏览器时发生，而在其他情况下保持正常，用户将很难分析出故障是由于命名问题而导致的。
由于需要命名的对象的种类很多，对这些对象进行解析的引擎工具也很多，因此用 第3章站点设计 71 户在给这些对象命名时应该遵循一个常规的标准，以确保普遍兼容性。
命名的基本原则就是：使用独一无二的、小写、不带空格的名称，名称应由字母和数字组成，并以字母开始，名称中可以包含“_”符号。
在网页制作过程中，要求为目录和文件命名时都应遵循相应的规范，名称应能代表文件的意义，以便进行查找、修改。
下面从网站命名规范、目录结构规范、内容编辑规范3个方面具体介绍网页制作的规范。
3.5.2命名规范
1．文件/目录的命名规范对文件/目录命名时除了遵循上一节所讲述的四条基本原则之外，尤其要注意网站中文件/目录的名称最好不要用中文，而要用英文（缩写也可）或汉语拼音。
目录（文件夹）命名一般长度一般不超过20个字符，命名采用小写字母。
文件名称统一用小写的英文字母、数字和下划线的组合。
对于文件夹和目录的具体命名规范，可以参考以下几种方案：
（1）汉语拼音：根据文件或者目录的主要作用提取两个或者三个关键字，将提取的关键字的汉语拼音全拼作为名称。
例如某高校网站中的校园新闻页面，提取的关键字可以是“新闻”两个字，然后使用xinwen.htm作为文件名称。
（2）拼音缩写：采用主要作用的汉字的第一个字母连接形成名称，还是上例中的校园新闻页面为例，其文件名则为xyxw.htm。
这些缩写词的使用会给站点的维护带来隐患。
如jxpt、xzjg，如果不告诉这是“教学平台”和“行政机构”的拼音缩写，其他人无法知道其确切含义。
虽然个人用户觉得其简单因而使用，但是会导致团队合作开发以及网站上线后的运行维护困难加大，这种方式不建议使用。
（3）英文缩写：选取每个英文单词的第一个字母来命名网页或者目录，这种方法不常使用。
（4）英文单词：尽量按单词的英语翻译为名称。
例如，某公司的信息反馈目录可以起名feedback，而“关于我们”目录起名为aboutus，公司新闻页面直接命名为news.htm。
这种方法简单、明确、通用，使用范围非常广，推荐制作者使用。
非常典型的例子是，几乎所有网站的登录页面都使用login作为网站后台登录页面的名称。
不论采用哪种命名方法，其作用无外乎两个：一是使得工作组的每一个成员能够方便地理解每一个文件的意义，方便开发与维护；二是当在目录中使用“按名称排列”命令时，同一种大类的文件能够排列在一起，以便进行查找、修改、替换等操作。
另外，使用index.html文件名（小写）或者index.htm名称命名的文件一般是“索引页”，即首页，首页不制作具体内容，只要起到跳转作用。
文件和文件夹的命名，可以用栏目名称的拼音，也可以用栏目名称的英文，团队开发时，有统一的命名规则相当重要。
例如个人简历这个栏目，命名的文件夹名称可以是jianli，如果命名为英文，可以是me。
论坛这个栏目一般都是用bbs作为文件夹名称。
2．图片的命名规范网页中使用的图片文件的命名一般采用“头部+尾部”两段式来命名。
72 网页设计与制作（第2版）
（1）头部：表示此图片的大类性质。
例如，网页顶部长方形位置处，一般是放置广告或者装饰性图案，通常取名为banner；图片网站的标志性图片取名为logo；网页中作为按钮的图片命名为button；图片用作网页菜单则命名为menu；图片用作边框则使用单词border，有时还添加图片的位置信息，例如left_border表示左边框。
（2）尾部：用来表示图片的具体含义，通常使用英文字母表示。
例如，banner_sohu.gif、banner_sina.gif、menu_aboutus.gif、menu_job.gif、title_news.gif、logo_police.gif、logo_national.gif、pic_people.jpg、pic_hill.jpg。
这种命名方式一目了然，便于管理与查找。
3.5.3目录结构规范 网站目录创建的原则是以最少的层次提供最清晰、简便的访问结构。
根目录一般只存放index.htm以及其他必需的系统文件，每个主要栏目开设一个相应的独立目录。
另外，同类型的文件最好放在一个文件夹中，例如、把图片文件都放在image文件夹中。
有些文件或者文件夹是为临时的目的而创建的，如一些短期的网站通告或促销信息、临时文件下载等，不要将这些文件和文件夹随意放置。
一种比较理想的方法是创建一个临时文件夹来放置各种临时文件，并适当使用简单的命名规范，不定期地进行清理，将陈旧的文件及时删除。
通常，网站的JS、ASP、PHP等脚本存放在根目录下的scripts目录；CGI程序存放在根目录下的cgi-bin目录；所有CSS文件存放在根目录下style目录；每个语言版本存放于独立的目录。
所有Flash、AVI、RAM、QuickTime等多媒体文件存放在根目录下的media目录；根目录下的images为存放公用图片目录，每个目录下私有图片存放于各自独立的images目录。
例如： \menu1\images\menu2\images 3.5.4内容编辑规范 网站的内容必须遵守我国《计算机信息网络国际联网安全保护管理办法（公安部令第33号）》的规定（）。
其中关于网站内容的规定如下：第五条任何单位和个人不得利用国际联网制作、复制、查阅和传播下列信息：（一）煽动抗拒、破坏宪法和法律、行政法规实施的；（二）煽动颠覆国家政权，推翻社会主义制度的；（三）煽动分裂国家、破坏国家统一的；（四）煽动民族仇恨、民族歧视，破坏民族团结的；（五）捏造或者歪曲事实，散布谣言，扰乱社会秩序的；（六）宣扬封建迷信、淫秽、色情、赌博、暴力、凶杀、恐怖，教唆犯罪的；（七）公然侮辱他人或者捏造事实诽谤他人的；（八）损害国家机关信誉的；（九）其他违反宪法和法律、行政法规的。
第3章站点设计 73 3.6上机实践
一、实验目的
（1）掌握DreamweaverCS6站点的创建步骤。
（2）掌握在已有文件夹上创建站点的方法
二、实验内容首先，创建实验准备所需的文件夹mysite，其内部包含子文件夹images；mysite文件夹下有网页文件index.html。
接着创建网站。
三、实验步骤定义站点也就是创建网站，可以将已有创建文件夹转换成网站，也可以从零开始创建一个全新的站点。
本实验是在已有文件夹的基础上创建站点。
实验步骤如下：首先在D盘（也可以是其他硬盘）根目录下创建文件夹mysite，在其内部创建images文件夹。
将网站制作时需要的图片文件复制到images文件夹下，如图3.41所示。
图3.41文件以及文件夹 接着启动DreamweaverCS6，新建index.html文件并保存。
选择菜单栏的“站点”→“新建站点”命令。
其余步骤请参考3.2节内容。
3.7习题
1．请解释网站的概念。
2．如何创建一个本地站点？
3．通过“文件”面板，如何给已有的站点增加一个新的文件夹？
4．通过“文件”面板，如何从已有的站点重命名一个网页文件？
5．使用DreamweaverCS6创建本地站点制作网页有什么优势？
6．在本地站点的根目录下，将建设网站需要的所有资源以及网页文件分别创建子目录进行管理有何利弊？
7．DreamweaverCS6站点和Web站点有何不同？
8．设计一个站点并对站点进行相应的管理。
9．如何删除一个站点？
学习本章的时候，要注意对工作环境的熟悉、基本操作的领会及掌握。
本章重点包括：站点的创建、编辑、删除；熟悉“文件”面板；能熟练地使用DreamweaverCS6的站点管理技术。
3.1站点概述 站点（即Web站点）是一组具有相关主题、类似设计的链接文档和资源。
DreamweaverCS6不仅可以创建单独的文档，还可以创建完整的Web站点。
“DreamweaverCS6站点”和“Web站点”不完全相同。
“DreamweaverCS6站点”是在DreamweaverCS6制作网页的过程中所使用的术语，指属于某个“Web站点”的文档的本地或远程存储位置。
“Web站点”则是把网站内容放到或的Web服务器上供用户浏览，即运行系统的Web服务器上的站点。
网站的发布过程就是将DreamweaverCS6站点变成Web站点的过程。
1．规划和组织站点结构创建本地站点前认真规划和组织站点结构，可以避免挫折、节省时间。
尤其当站点较大时，如果不考虑好文档在文件夹的层次就开始创建，最终将文件混乱无序地存放在一个巨大的文件中，或者是一些相关文件却分散在一些有着类似名称的文件夹中，这些情况都不利于站点的管理和后续维护工作。
规划站点组织结构时，可以按照站点内容进行分解归类，即对于不同栏目，要创建相应的子文件夹来存放本栏目的内容。
另外，对于本栏目不同类型的资源文件，创建相关的文件夹进行存放。
这种组织形式可以使站点便于开发、维护和浏览。
例如，某公司网站有“关于我们”和“公司新闻”两个栏目，可以创建名为about的文件夹，存放与公司简介相关的网页内容（必要时可以在其下再创建名为images的子文件夹，存放与公司简介相关的图片资源）；在名为news的文件夹中存放关于公司新闻方面的网页内容；创建images文件夹以存放图片首页中需要使用图片文件，如图3.1所示。
另外，为了便于管理和维护，建议在本地和远程站点上使用相同的组织结构。
这样使得DreamweaverCS6本地站点的文件上传到远程站点上的时候，DreamweaverCS6将保证本地结构会精确地复制到远程站点中，使得本地站点和远程Web站点具有完全一样 的结构。
第3章站点设计 41 图3.1某公司网站站点的文件夹组织结构 通常，制作站点时首先应在本地硬盘创建一个文件夹，然后，在网站制作过程中，将所有的网页、图片、音频、视频、动画等内容都保存在该文件夹中。
网站制作完成后，在发布站点时，将这些文件上传到Web服务器上指定位置即可。
最为重要的是创建站点后，可以形成清晰的站点组织结构图，使用者能够对站点结构了如指掌，方便对网站的管理（例如增减站点文件夹及文档等）。
综上所述，开始使用DreamweaverCS6前，应该先创建一个Web站点，再进行以后的操作。
2．Dreamweaver的3种站点Dreamweaver站点由3个部分（或文件夹）组成，具体取决于开发环境和所开发的Web站点类型。
☞提示：若要定义Dreamweaver站点，只需设置一个本地文件夹。
若要向Web服务器传输文件或开发Web应用程序，还必须添加远程站点和测试服务器信息。
本地根文件夹即工作目录，是存放正在处理的文件的文件夹。
DreamweaverCS6将该文件夹作为Web站点的“本地站点”，既可以放在本地计算机上，也可以放在网络服务器上。
在制作一般静态网页时只创建本地站点即可。
远程文件夹是存储用于测试、生产、协作等文件的地方，Dreamweaver在“文件”面板中将此文件夹称为“远程站点”。
远程文件夹一般位于网络上运行Web服务器的计算机上，远程文件夹包含用户从访问的文件。
通过本地文件夹和远程文件夹的结合使用，可以在本地硬盘和Web服务器之间传输文件，这将有助于轻松地管理Dreamweaver站点中的文件。
可以在本地文件夹中处理文件，如果需要让其他人查看，再将它们发布到远程文件夹。
测试服务器文件夹是DreamweaverCS6处理动态页面的文件夹（也称为“测试站点”）。
DreamweaverCS6使用此文件夹生成动态内容并在工作时连接到数据库。
42 网页设计与制作（第2版） 本地站点和远程站点能够使用户在本地磁盘和Web服务器之间传输文件。
测试站点则用于动态页面测试。
除非需要开发动态Web应用程序，否则无须考虑此文件夹。
使用DreamweaverCS6前必须至少设置一个本地文件夹。
3.2创建本地站点 本节介绍DreamweaverCS6中创建站点的方法。
3.2.1通过“站点设置对象”创建本地站点
1．打开“站点设置对象”对话框通过站点定义方式创建站点，首先需要打开“站点设置对象”对话框。
在DreamweaverCS6中有3种方法打开“站点设置对象”对话框，如图3.2所示。
方法一：单击“起始页”界面中间部分“新建”分类中的“Dreamweaver站点”选项。
方法二：通过DreamweaverCS6菜单，选择“站点”“新建站点”菜单命令。
方法三：选择“站点”“管理站点”菜单命令，打开“管理站点”对话框，如图3.3所示，在对话框中单击“新建站点”按钮。
图3.2打开“站点设置对象”对话框的方法 第3章站点设计 43 图3.3“管理站点”对话框
2．输入站点名称在“站点设置对象”对话框的“站点名称”项输入站点名称，例如mysite1，则“站点设置对象未命名站点”对话框变为“站点设置对象mysite1”对话框。
在“本地站点文件夹”项，直接在输入框中输入站点文件存储位置，或者单击输入框后面的文件夹图标，选择一个本地文件夹即可，其结果如图3.4所示（注意站点名称中、英文不限，最好和站点内容相关，这样便于管理）。
图3.4“站点设置对象”对话框 44 网页设计与制作（第2版） 上一步完成之后，就开始在Dreamweaver中处理本地站点文件了，可以展开“文件”面板，如图3.5所示。
图3.5“文件”面板中的站点 3.2.2连接到服务器 在Dreamweaver中指定本地站点后，可以根据开发环境和需要为站点指定远程服务器，如图3.6所示。
远程服务器（通常称为Web服务器）用于发布站点文件以便联机查看。
在设置远程文件夹时，必须为Dreamweaver选择连接方法，以将文件上传和下载到Web服务器。
最典型的连接方法是FTP，但Dreamweaver还支持本地/网络、FTPS、SFTP、WebDav和RDS连接方法。
图3.6“服务器”选项 第3章站点设计 45
1．FTP连接方式单击服务器列表左下角的添加新服务器按钮 出现如图3.7所示界面。
图3.7添加新服务器的“基本”界面
（1）在“服务器名称”文本框中，指定新服务器的名称。
（2）从“连接方法”下拉菜单中选择FTP。
（3）在“FTP地址”文本框中，输入要将网站文件上传到其中的FTP服务器的地址。
FTP地址是计算机系统的完整名称，如。
请输入完整的地址，并且不要附带其他任何文本，特别是不要在地址前面加上协议名（如果不知道FTP地址，请与Web托管服务商联系）。
☞提示：端口21是接收FTP连接的默认端口。
可以通过编辑右侧的“端口”文本框来更改默认端口号。
保存设置后，FTP地址的结尾将附加上一个冒号和新的端口号（例如，:29）。
（4）在“用户名”和“密码”文本框中，输入用于连接到FTP服务器的用户名和密码。
单击“测试”按钮，测试FTP地址、用户名和密码。
☞提示：对于托管站点，必须从托管服务商的系统管理员处获取FTP地址、用户名和密码信息。
其他人无权访问这些信息，确切按照系统管理员提供的形式输入相关信息。
（5）默认情况下，Dreamweaver会保存密码。
如果希望每次连接到远程服务器时 46 网页设计与制作（第2版） Dreamweaver都提示输入密码，请取消选择“保存”选项。
（6）在“根目录”文本框中，输入远程服务器上用于存储公开显示的文档的目录（文 件夹）。
如果不能确定应输入哪些内容作为根目录，与服务器管理员联系或将文本框保留为 空白。
在有些服务器上，根目录就是首次使用FTP连接到的目录。
（7）在WebURL文本框中，输入Web站点的URL（例如，）。
Dreamweaver使用WebURL创建站点根目录相对链接，并在使用链接检查器时验证这些链接。
（8）如果仍需要设置更多选项，展开“更多选项”部分，如图3.8所示。
图3.8添加新服务器的“更多选项”界面 如果代理配置要求使用被动式FTP，选择“使用被动式FTP”。
被动式FTP使您的本地软件能够创建FTP连接，而不是请求远程服务器来创建它。
如果不确定是否使用被动式FTP，请向系统管理员确认，或者尝试选中和取消选中“使用被动式FTP”选项。
如果使用的是启用IPv6的FTP服务器，选择“使用IPv6传输模式”。
随着协议第6版(IPv6)的发展，EPRT和EPSV已分别替代了FTP命令PORT和PASV。
因此，如果正试图连接到支持IPv6的FTP服务器，必须为数据连接使用被动扩展(EPSV)和主动扩展(EPRT)命令。
有关详细信息，请参阅/。
如果希望指定一个代理主机或代理端口，选择“使用以下位置中定义的代理”。
有关详细信息，单击“首选参数”链接转到“首选参数”对话框，然后从该对话框的“站点”类别中单击“帮助”按钮。
（9）单击“保存”按钮关闭“基本”界面。
然后在“服务器”类别中，指定刚添加或编辑的服务器为远程服务器或测试服务器，或者是同时为这两种服务器，如图3.9所示。
图3.9服务器列表 使用本地站点连接好远程服务器后，在站点面板中就可以对文件进行上传、下载操作，一般情况下都是选择FTP连接方式。
第3章站点设计 47 在“站点设置对象”对话框中，除了一些基本的设置之外还有“高级”选项卡，如图3.10所示。
其各项说明如下： 维护同步信息：保持服务器与本地信息同步。
保存时自动将文件上传到服务器：选中该复选框，保存文件时自动将其上传到服 务器。
启用文件取出功能：在打开文件时，自动设置为取出。
取出名称：输入取出文件的人员名称，输入后在站点窗口中取出文件时将显示该 名称。
电子邮件地址：输入取出人员的电子邮件地址。
图3.10服务器设置“高级”界面 ☞提示：文件取出功能在团队开发设计的环境中特别有用，通过设置文件的制度属性，可以方便工作组中的其他人修改该文件。
2．SFTP连接如果代理配置要求使用安全FTP，选中“使用安全FTP(SFTP)”。
SFTP使用加密密钥和共用密钥来保证指向测试服务器的连接的安全。
☞提示：若要选择此选项，服务器必须运行SFTP服务。
如果不知道服务器是否运行SFTP，向服务器管理员确认。
在“站点设置”对话框中，选择“服务器”类别，然后单击“添加新服务器”按钮，添加一个新服务器或者选择一个现有的服务器，然后单击“编辑现有服务器”按钮。
接着在“服务器名称”文本框中指定新服务器的名称。
该名称可以是所选择的任何 48 网页设计与制作（第2版） 名称。
从“连接方法”弹出菜单中选择SFTP。
其余选项与FTP连接的选项相同。
有关详细信息，请参阅上述部分。
☞注意：端口22是接收SFTP连接的默认端口。
3．FTPS连接（DreamweaverCS5.5）SFTP仅支持加密，与其相比，FTPS(FTPoverSSL)既支持加密，又支持身份验证。
使用FTPS传输数据时，可选择将凭据加密，也可将传输到服务器的数据加密。
此外，可选择对服务器的凭据和连接进行身份验证。
对照Dreamweaver数据库中当前的一组可信CA服务器证书，验证服务器的凭据。
证书颁发机构(CA)包括VeriSign、Thawte等公司，颁发经过数字签名的服务器证书。
在图3.7中的连接方式下拉子项中选择“FTPoverSSL/TLS（隐式加密）”，则出现如图3.11所示的配置界面。
图3.11FTPS连接设置界面 其各项说明如下：
（1）连接方法：FTPoverSSL/TLS（隐式加密）——如果未收到安全性请求，则服务器终止连接。
FTPoverSSL/TLS（显式加密）——如果客户端未请求安全性，则服务器可选择进行不安全事务，或拒绝/限制连接。
（2）验证：下拉框中选项有“无（仅加密）”和“可信服务器”两个选项。
“无（仅加密）”表示显示服务器的凭据（经过签名或自签名）。
如果接受服务器 的凭据，则向Dreamweaver中的证书存储trustedSites.db添加证书。
下次连接到同一服务器时，Dreamweaver将直接连接到该服务器。
如果服务器上已更改 第3章站点设计 49 了自签名证书的凭据，则将提示用户接受新的凭据。
“可信服务器”选项对照Dreamweaver数据库中当前的一组可信CA服务器证书 验证所提供的证书。
可信服务器的列表存储在cacerts.pem文件中。
☞提示：如果选择“可信服务器”，然后用自签名证书连接服务器，则会显示一条错误消息。
可以展开“更多选项”部分以设置更多选项。
（1）仅加密命令通道：如果只想将所传输的命令加密，则选择本选项。
当所传输的数据已加密，或其中不含敏感信息时，请使用此选项。
（2）仅加密用户名和口令：如果只想将用户名和密码加密，则选择此选项。
单击“保存”按钮关闭“基本”屏幕。
然后在“服务器”类别中，指定所添加或编辑的服务器是远程服务器、测试服务器还是两者皆是。
4．本地或网络连接在连接到网络文件夹或在本地计算机上存储文件或运行测试服务器时使用此设置，如图3.12所示。
（1）服务器名称：在该文本框中指定新服务器的名称。
该名称可以是所选择的任何名称。
（2）连接方法：选择“本地/网络”。
（3）单击“服务器文件夹”文本框旁边的文件夹图标，浏览并选择存储站点文件的文件夹。
（4）在WebURL文本框中，输入Web站点的URL（例如，）。
Dreamweaver使用WebURL创建站点根目录相对链接，并在使用链接检查器时验证这些链接。
单击“保存”按钮关闭“基本”屏幕。
然后在“服务器”类别中指定刚添加或编辑的服务器为远程服务器或测试服务器，或者是同时为这两种服务器。
图3.12本地或网络连接设置界面 50 网页设计与制作（第2版）
5．WebDAV连接如果使用基于Web的分布式创作和版本控制(WebDAV)协议连接到Web服务器，请使用此设置。
其配置界面如图3.13所示。
对于这种连接方法，必须有支持此协议的服务器，如MicrosoftInformationServer(IIS)5.0，或安装正确配置的ApacheWeb服务器。
☞提示：如果选择WebDAV作为连接方法，并且是在多用户环境中使用Dreamweaver，则还应确保所有用户都选择WebDAV作为连接方法。
如果一些用户选择WebDAV，而另一些用户选择其他连接方法（例如FTP），那么，由于WebDAV使用自己的锁定系统，因此Dreamweaver的存回/取出功能将不会按期望的方式工作。
图3.13WebDVA连接设置界面 图3.13中的各项设置说明如下：
（1）连接方法：选择WebDAV。
（2）URL：输入WebDAV服务器上要连接到的目录的完整URL。
此URL包括协议、端口和目录（如果不是根目录），例如/mysite。
（3）输入用户名和密码。
这些信息用于服务器身份验证，与Dreamweaver无关。
如果不能确定用户名和密码，请询问系统管理员或Web管理员。
单击“测试”按钮测试连接设置。
（4）WebURL：输入Web站点的URL（例如）。
Dreamweaver使用WebURL创建站点根目录相对链接，并在使用链接检查器时验证这些链接。
最后，单击“保存”按钮关闭“基本”屏幕。
然后在“服务器”类别中指定刚添加或编辑的服务器为远程服务器或测试服务器，或者是同时为这两种服务器。
6．RDS连接如果使用远程开发服务（RDS）连接到Web服务器，请使用此设置。
对于这种连接方法，远程服务器必须位于运行AdobeColdFusion的计算机上。
其对话框如图3.14所示。
第3章站点设计 51 图3.14RDS连接设置界面 在“连接方法”文本框中选择RDS。
然后单击“设置”按钮打开如图3.15所示的“配置RDS服务器”对话框。
图3.15“配置RDS服务器”对话框
（1）主机名：输入安装Web服务器的主机的名称。
主机名可能是IP地址或URL。
如果不能确定，请询问管理员。
（2）端口：输入要连接的端口号。
（3）完整的主机目录：输入根远程文件夹作为主机目录，例如C:\pub\wwwroot\myHostDir\。
（4）输入RDS用户名和密码。
☞提示：如果在“ColdFusion管理员”安全设置中设置了用户名和密码，则这些选项可能不会出现。
单击“确定”按钮以关闭“配置RDS服务器”对话框。
返回“RDS连接”设置界面，在WebURL文本框中输入Web站点的URL（例如）。
Dreamweaver使用WebURL创建站点根目录相对链接，并在使用链接检查器时验证这些链接。
52 网页设计与制作（第2版） 3.2.3站点的“高级设置” 打开站点设置对话框，单击左侧的“高级设置”选项，如图3.16所示，通过展开的子项可以配置站点的某些高级属性。
图3.16高级设置
1．本地信息单击“本地信息”子项，打开如图3.17所示的“本地信息”选项设置界面，通过“本地信息”子项可以设置本地文件夹的下列属性。
图3.17本地信息设置
（1）默认图像文件夹。
站点中存储根目录下图像的文件夹。
输入文件夹的路径或单 第3章站点设计 53 击文件夹图标浏览到文件夹。
将图像添加到文档时，Dreamweaver将使用该文件夹路径。
（2）站点范围媒体查询文件：选择网站范围的媒体查询文件，Dreamweaver能够将 网站范围的媒体查询文件添加到网站定义中。
（3）链接相对于：在站点中创建指向其他资源或页面的链接时，需要指定 Dreamweaver创建的链接类型。
Dreamweaver可以创建两种类型的链接：文档相对链接和站点根目录相对链接。
默认情况下，Dreamweaver创建文档相对链接。
如果更改默认设置并选择“站点根目录”选项，请确保WebURL文本框中输入了站点的正确WebURL。
更改此设置将不会转换现有链接的路径；此设置仅应用于使用Dreamweaver以可视方式创建的新链接。
☞提示：使用本地浏览器预览文档时，除非指定了测试服务器，或在“编辑”→“首选参数”→“在浏览器中预览”中选择“使用临时文件预览”选项，否则文档中通过站点根目录相对链接进行链接的内容将不会显示。
这是因为浏览器不能识别站点根目录，而服务器能够识别。
（4）WebURL。
Dreamweaver使用WebURL创建站点根目录相对链接，并在使用链接检查器时验证这些链接。
如果制作者不能确定正在处理的页面在目录结构中的最终位置，或者可能在以后会重新定位或重新组织包含该链接的文件，则站点根目录相对链接很有用。
站点根目录相对链接指的是指向其他站点资源的路径为相对于站点根目录（而非文档）的链接。
因此，如果将文档移动到某个位置，资源的路径仍是正确的。
例如，假设指定了/mycoolsite（远程服务器的站点根目录）作为WebURL，而且远程服务器上的mycoolsite目录中包含一个图像文件夹(/mycoolsite/images)。
另外假设index.html文件位于mycoolsite目录中。
当在index.html文件中创建指向images目录中某幅图像的站点根目录相对链接时，该链接如下所示：
假定图像位于图像目录中，图像的文件路径(/mycoolsite/images/image1.jpg)将始终是正确的，即使将index.html文件移到其他目录也是如此。
关于链接验证，要确定链接是站点内部链接还是站点外部链接，必须使用WebURL。
例如，如果WebURL为/mycoolsite，且链接检查器在页面上发现一个链接的URL为，则检查器确定后一个链接为外部链接，并如此进行报告。
同样，链接检查器使用WebURL来确定链接是否为站点内部链接，然后检查以确定这些内部链接是否已断开。
54 网页设计与制作（第2版）
（5）区分大小写的链接检查。
在Dreamweaver检查链接时，将检查链接的大小写与文件名的大小写是否相匹配。
此选项用于文件名区分大小写的UNIX系统。
（6）启用缓存。
指定是否创建本地缓存以提高链接和站点管理任务的速度。
如果不选择此选项，Dreamweaver在创建站点前将再次询问是否希望创建缓存。
最好选择此选项，因为只有在创建缓存后“资源”面板（在“文件”面板组中）才有效。
2．遮盖利用站点遮盖功能，可以从“获取”或“上传”等操作中排除某些文件和文件夹。
还可以从站点操作中遮盖特定类型的所有文件（JPEG、FLV、XML等）。
Dreamweaver会记住每个站点的设置，因此不必每次在该站点上工作时都进行选择。
可以指定要遮盖的特定文件类型，以便Dreamweaver遮盖以指定形式结尾的所有文件。
例如，可以遮盖所有以.txt扩展名结尾的文件。
（1）遮盖站点中的特定文件类型。
其设计界面如图3.18所示。
图3.18“遮盖”高级属性的设置界面 “遮盖具有以下扩展名的文件”复选框：在框中输入要遮盖的文件类型，然后单击“确定”按钮。
例如，可以输入.jpg以遮盖站点中名称以.jpg结尾的所有文件。
用一个空格分隔多个文件类型，不要使用逗号或分号。
最后在“文件”面板中，被遮盖的文件图标上就会显示一条红线穿过受影响的文件，指示它们已被遮盖。
☞提示：仍然可以对特定的已遮盖文件或文件夹执行操作，方法是：在“文件”面板上选择该项，然后对它执行操作。
直接对文件或文件夹执行的操作会取代遮盖设置。
第3章站点设计 55
（2）取消遮盖站点中的特定文件类型。
在图3.18所示的“遮盖”对话框中，执行下列操作之一可以取消对特定文件的遮盖。
方法一：取消选择“遮盖具有以下扩展名的文件”选项，可以取消对其下面的文本框中列出的所有文件类型的遮盖。
方法二：从框中删除特定文件类型，可以取消这些文件类型的遮盖。
红线从受影响的文件上消失，指示它们已被取消遮盖。
3．设计备注设计备注是为文件创建的备注。
设计备注与它们所描述的文件相关联，但存储在单独的文件中。
对于添加了设计备注的文件，还可以在展开的“文件”面板中看到哪些文件具有设计备注：“设计备注”图标会出现在“备注”列中。
通常使用设计备注来记录与文档关联的其他文件信息，如图像源文件名称和文件状态说明。
例如，如果将一个文档从一个站点复制到另一个站点，则可以为该文档添加设计备注，说明原始文档位于另一站点的文件夹中。
还可以使用设计备注来记录因安全原因而不能放在文档中的敏感信息。
例如，可以记录某一价格或配置是如何选定的或哪些市场因素影响了某一设计决策等信息。
通过在“设计备注”类别中对站点启用和禁用设计备注。
启用“设计备注”时，如果需要，还可以选择与他人共享“设计备注”，如图3.19所示。
图3.19“设计备注”高级属性的设置界面
（1）维护设计备注：此复选框用以启用设计备注（取消选择即禁用）。
（2）“清理设计备注”按钮：若要删除站点的所有本地设计备注文件，单击“清理”，然后单击“是”（如果要删除远程设计备注文件，则将需要手动删除它们）。
☞提示：“清理设计备注”命令只能删除MNO（设计备注）文件。
该命令不会删 56 网页设计与制作（第2版） 除_notes文件夹或_notes文件夹中的dwsync.xml文件。
Dreamweaver使用dwsync.xml文件保存有关站点同步的信息。
（3）启用上传并共享设计备注：选中此复选框将与站点关联的设计备注与其余的文档一起上传。
如果选择该选项，则可以和小组的其余成员共享设计备注。
在上传或获取某个文件时，Dreamweaver将自动上传或获取关联的设计备注文件。
如果未选择此选项，则Dreamweaver在本地维护设计备注，但不将这些备注与相关文件一起上传。
如果独自在站点上工作，取消选择此选项可改善性能。
当存回或上传文件时，设计备注并不会传输到远程站点，因此仍可以在本地为站点添加和修改设计备注。
4．文件视图列在展开的“文件”面板中查看Dreamweaver站点时，有关文件和文件夹的信息将在列中显示。
例如，可以看到文件类型或文件的修改日期。
通过“文件视图列”用户可以自定义在展开的”文件”面板中显示的文件和文件夹详细信息。
可以通过以下任何操作对列进行自定义（某些操作仅适用于添加的列，不适用于默认列）：
（1）更改列的顺序，或将列重新排列。
选择列名称，然后单击向上或向下箭头按钮来更改选定列的位置。
☞提示：可以更改除“名称”列之外任何列的顺序。
“名称”列始终是第一列。
（2）添加、删除或更改详细列。
在图3.20中选择一个列，然后单击加号(+)按钮添加一个列，或减号(–)按钮来删除一个列。
☞提示：单击减号（）将立即删除该列，且不经确认，因此在单击减号(–)按钮前，请务必弄清是否确实要删除该列。
添加一个列时，弹出如图3.21所示的对话框，在该图中的“列名称”框中输入列的名称。
从“与设计备注关联”列表中选择一个值，或者输入自己的值。
☞提示：必须将一个新列与设计备注关联，“文件”面板中才会有数据显示。
接着选择一种对齐方式，以确定该列中的文本对齐方式。
选择或取消选择“显示”以显示或隐藏列。
最后可以选择“与该站点所有用户共享”来与连接到该远程站点的所有用户共享该列。
5．ContributeAdobeContributeCS4整合了Web浏览器和网页编辑器。
它使用户的同事或者客户在浏览用户创建的站点中的某个页面时，如果他们有相应权限，还可以编辑或更新该页面。
Contribute用户可添加和更新基本的Web内容，包括带格式的文本、图像、表格和链接。
Contribute站点管理员可限制普通用户（非管理员）在站点中能够进行的 操作。
第3章站点设计 57 图3.20“文件视图列”高级属性的设置界面 图3.21“文件视图列”高级属性中添加列界面 如果要准备现有Dreamweaver站点以供Contribute用户使用，则需要显式启用Contribute兼容性以使用与Contribute相关的功能；Dreamweaver不提示用户这样做；但是，连接到已设置为Contribute站点（有管理员）的站点时，Dreamweaver将提示用户启用Contribute兼容性，如图3.22所示。
并不是所有的连接类型都支持Contribute的兼容性功能。
连接类型有下列限制：
（1）如果使用WebDAV连接到远程站点，则不能启用Contribute兼容性，因为这些源代码管理系统与Dreamweaver用于Contribute站点的“设计说明”和“签入/签出”系统不兼容。
58 网页设计与制作（第2版） 图3.22高级属性中Contribute设置页面
（2）如果使用RDS连接到远程站点，则可启用Contribute兼容性，但必须先自定义连接，然后才能与Contribute用户共享它。
（3）如果要使用本地计算机作为Web服务器，则必须使用与该计算机的FTP或网络连接（而非只是本地文件夹路径）设置站点，才能与Contribute用户共享该连接。
在图3.22中，单击“启用Contribute兼容性”复选框后如果出现一个对话框，指示必须启用“设计说明”和“签入/签出”，则单击“确定”按钮。
如果尚未提供“存回/取出”联系信息，请在如图3.23所示的对话框中输入姓名和电子邮件地址，然后单击“确定”按钮。
图3.23“Contribute站点设置”对话框 这时，回退状态、CPS状态、“站点根URL”文本框和“在Contribute中管理站点”按钮都将显示在Contribute设置页面中，如图3.24所示。
如果在Contribute中启用了回退，则可回退到已在Dreamweaver中更改的文件的以前版本。
检查“网站根URL”文本框中的URL，如有必要，则更正它。
Dreamweaver根据所提供的其他站点定义信息构造站点根URL，但有时构造的URL不太正确。
接着单击“测试”按钮以确认输入的URL正确无误。
☞提示：如果现在已准备好发送连接密钥或执行Contribute站点管理任务，则跳过其余步骤。
第3章站点设计 59 图3.24Contribute站点设置 若要进行管理更改，请在Contribute中单击“管理站点”。
注意，如果要从Dreamweaver中打开Contribute管理器，必须在安装Dreamweaver的那台计算机上安装Contribute。
最后单击“保存”按钮，然后单击“完成”按钮。
如果要使用Dreamweaver管理Contribute站点，需要启用Contribute兼容性后，才可使用Dreamweaver启动Contribute以执行站点管理任务。
☞提示：必须将Contribute与Dreamweaver安装在同一台计算机上。
6．模板模板是一种特殊类型的文档，用于设计“固定的”页面布局；然后用户便可以基于模板创建文档，创建的文档会继承模板的页面布局。
设计模板时，可以指定在基于模板的文档中哪些内容是用户可编辑的。
模板创作者可以在文档中包括数种类型的模板区域。
☞提示：使用模板可以控制大的设计区域，以及重复使用完整的布局。
如果要重复使用个别设计元素，如站点的版权信息或徽标，可以创建库项目。
使用模板可以一次更新多个页面。
从模板创建的文档与该模板保持连接状态（除非以后分离该文档）。
可以修改模板并立即更新基于该模板的所有文档中的设计。
如果模板文件是通过将现有页面另存为模板来创建的，则新模板在Templates文件夹中，并且模板文件中的所有链接都将更新以保证相应的文档相对路径是正确的。
如果用户以后基于该模板创建文档并保存该文档，则所有文档相对链接将再次更新，从而依然指向正确的文件。
向模板文件中添加新的文档相对链接时，如果在属性检查器的链接文本框中输入路 60 网页设计与制作（第2版） 径，则输入的路径名很容易出错。
模板文件中正确的路径是从Templates文件夹到链接文档的路径，而不是从基于模板的文档的文件夹到链接文档的路径。
在模板中创建链接时就要使用文件夹图标或者使用属性检查器中的“指向文件”图标，以确保存在正确的链接路径。
Dreamweaver8以前的版本不对Templates文件夹中的文件进行更新（例如，假定在Templates文件夹中有一个名为main.css的文件，并且已将href="main.css"作为链接写入模板文件中，则Dreamweaver在创建基于模板的页面时不会更新此链接）。
而在Dreamweaver8中对此行为进行了更改，这样，无论所链接文件从直观上体现的位置在何处，创建基于模板的页面时所有文档相对链接都将更新。
在这种情况下，Dreamweaver会检查模板文件中的链接（href="main.css"），然后在相对于新文档的位置的基于模板的页面中创建链接。
例如，如果用户要在Templates文件夹的上一级创建基于模板的文档，Dreamweaver会在新文档中写入形式为href="Templates/main.css"的链接。
Dreamweaver8中的这一更新将破坏页面中那些由以下设计人员创建的链接，这些设计人员采用的是Dreamweaver以前的做法，即不更新指向Templates文件夹中的文件的链接。
Dreamweaver8之后的版本添加了一个用于启用和禁用更新相对链接行为的首选参数（这个特殊的首选参数仅适用于指向Templates文件夹中的文件的链接，不适用于一般链接）。
默认行为是不更新这些链接（和DreamweaverMX2004及其之前的版本一样），但是如果用户希望Dreamweaver在创建基于模板的页面时更新这种链接，可以取消选择这个首选参数。
若要使Dreamweaver将文档相对路径更新为Templates文件夹中的非模板文件，请在“站点设置对象”对话框的“高级设置”下选择“模板”类别，然后取消选择“不改写文档相对路径”复选框，如图3.25所示。
图3.25站点高级属性“模板”的设置 第3章站点设计 61
7．SprySpryWidget是一个页面元素，通过启用用户交互来提供更丰富的用户体验。
Spry构件在DreamweaverCC及更高版本中由jQuery构件取代。
SpryWidget由以下几个部分组成：
（1）Widget结构：用来定义Widget结构组成的HTML代码块。
（2）Widget行为：用来控制Widget如何响应用户启动事件的JavaScript。
（3）Widget样式：用来指定Widget外观的CSS。
Spry框架支持一组用标准HTML、CSS和JavaScript编写的可重用Widget。
用户可以方便地插入这些Widget（采用最简单的HTML和CSS代码），然后设置Widget的样式。
框架行为包括允许用户执行下列操作的功能：显示或隐藏页面上的内容，更改页面的外观（如颜色），与菜单项交互，等等。
Spry框架中的每个Widget都与唯一的CSS和JavaScript文件相关联。
CSS文件中包含设置Widget样式所需的全部信息，而JavaScript文件则赋予Widget功能。
当使用Dreamweaver界面插入构件时，会自动将这些文件链接到设计者的页面，以便构件中包含该页面的功能和样式。
与给定Widget相关联的CSS和JavaScript文件根据该Widget命名，因此，很容易判断哪些文件对应于哪些Widget（例如，与折叠Widget关联的文件称为ordion.css和ordion.js）。
当在已保存的页面中插入Spry构件、数据集或效果时，Dreamweaver会在站点中创建一个SpryAssets目录，并将相应的JavaScript和CSS文件保存到其中。
如果将Spry资源保存到其他位置，可以更改Dreamweaver保存这些资源的默认位置。
其方法如下：在“站点设置”对话框中，展开“高级设置”并选择Spry类别，如图3.26所示。
输入想要用于Spry资源的文件夹的路径并单击“确定”按钮。
还可以单击文件夹图标浏览到某个位置。
图3.26站点高级属性Spry的设置 62 网页设计与制作（第2版）
8．Web字体如果在网站中使用了Web字体，需要在站点的“高级”设计的“Web字体”分类中指定使用Web字体文件的位置信息，如图3.27所示，可以直接输入或者单击文件夹图标浏览选择。
图3.27站点高级属性“Web字体”的设置 3.3站点管理 创建本地站点之后，可以通过“管理站点”对话框对DreamweaverCS6中创建的全部站点进行管理。
选择“站点”→“管理站点”菜单命令，打开管理站点对话框，或者在“文件”面板中选择“站点管理”子项。
“管理站点”对话框可以完成站点的创建（请参见3.2节内容）、编辑、复制、删除、导入和导出等功能。
如果需要编辑某个站点，只需在“管理站点”对话框中选择这个站点的名称，然后单击“编辑”按钮，可以修改其站点设置，操作与创建站点的步骤类似。
站点复制操作将创建本站点的副本，副本将出现在站点列表窗口中，此操作容易引发混乱，因此对于初学者不建议使用。
站点删除操作：将删除所选站点，此操作无法撤销。
需要注意的是此操作仅删除DreamweaverCS6中的站点，不会删除磁盘上的文件夹以及相关文件。
导入/导出站点：可以将站点导出为包含站点设置的XML文件，并在以后将该站点导入DreamweaverCS6。
这样，就可以在各计算机和产品版本之间移动站点，甚至与其他用户共享这些设置。
通常需要定期对站点执行导出操作，这样即使该站点出现意外，还有它的备份副本。
第3章站点设计 63 若要导出站点，请执行以下操作：首先选择“站点”→“管理站点”菜单命令，打开“管理站点”对话框，在该对话框中选择要执行导出操作的一个或者多个站点（按住Ctrl键单击每个站点，可以选中多个站点；若要选择某一范围的站点，请按住Shift键单击该范围中的第一个和最后一个站点），然后单击“导出”按钮，对于要导出的每个站点，在“导出站点”对话框中选择需要保存站点的位置，然后单击“保存”按钮，如图3.28所示。
DreamweaverCS6会在指定位置将每个站点保存为后缀为.ste扩展名的XML文件。
最后，单击“完成”按钮关闭“管理站点”对话框。
图3.28“导出站点”对话框 导入操作与之相反。
本节初步介绍了DreamweaverCS6的站点管理功能，但是要真正体会到它的强大和快捷，还要在以后的学习、工作中慢慢体会。
3.4使用站点 3.4.1管理文件 在“文件”面板上，从“站点”弹出式菜单中选择一个站点，就可以对相应的站点文件内容进行维护管理。
如图3.29所示选择了mysite站点。
在“文件”面板中按列排序的方法是单击要排序的列的标题。
再次单击标题将反转之前列的排序方式（升序或降序）。
使用“文件”面板工具栏的工具可以方便地与远程服务端上的文件进行同步、获取、上传等操作，如图3.30所示。
64 网页设计与制作（第2版） 单击工具栏中最右边的按钮的文件管理对话框。
（展开以显示本地和站点），弹出如图3.31所示 图3.29“文件”面板的站点维护 图3.30“文件”面板工具栏 图3.31“文件”的文件管理 在以前的DreamweaverCS6版本中，“文件”面板称为“站点”面板。
不论资源位于本地站点还是远程站点，都可以通过“文件”面板组织和管理站点文件和文件夹。
另外，通过DreamweaverCS6的“编辑”→“首选参数”菜单命令，打开“首选参数”对话框。
在左侧的类别列表中选择“站点”，即会出现如图3.32所示的“站点”首选参数的选项，可以根据需要，进行个性化配置。
通过“文件”面板可以直接对站点中的文件或者文件夹进行操作，十分方便，例如，可以打开文件，更改文件名，添加、移动或删除文件。
下面具体讲解其主要操作。
第3章站点设计 65 图3.32“首选参数”的“站点”设置
1.查看站点中的文件具体步骤操作如下：
（1）直接按F8键打开“文件”面板。
（2）在“站点”下拉列表框中选择要查看的站点，如图3.33所示。
（3）在“视图”下拉列表框中选择要查看的视图，选择即本地站点还是远程站点，如图3.34所示。
图3.33站点选择 图3.34视图选择
（4）在显示框中单击相应的文件，双击该文件的图标，或者右击该文件的图标，然后选择“打开”命令。
该文档会在DreamweaverCS6的“文档”窗口中打开。
2.在站点中新建文件夹和文件具体步骤如下：
（1）打开“文件”面板，选择要创建新文件夹或文件的根目录，如图3.35所示。
（2）在根目录图标上右击，在弹出的快捷菜单中选择“新建文件”或“新建文件夹”命令，如图3.36所示。
（3）DreamweaverCS6将自动创建名为untitled.htm的新文件或名为untitled的文件夹，并自动设置为可改写状态，如图3.37所示。
（4）直接输入新的名称即可，如old。
66 网页设计与制作（第2版） 图3.35选定image文件夹 图3.36为image文件夹新建文件夹 图3.37新建文件夹untitled并处于可写状态
3.重命名文件或文件夹重命名文件或文件夹有以下3种方法：
（1）在“文件”面板中选中要重命名的文件或文件夹，然后单击使其进入可改写状态，输入新的名称即可。
（2）在要重命名的文件或文件夹图标上右击，在弹出的快捷菜单中选择“编辑”→“重命名”菜单命令也可进入可改写状态，输入新的名称即可。
（3）先选中要重命名的文件或文件夹，再按F2键，也可进入可改写状态，输入新的名称即可。
4.删除文件或文件夹首先用鼠标选中要删除文件或文件夹，选中的文件或者文件夹背景为蓝色，按Delete键，在打开的确认对话框中单击“确定”按钮。
也可以右击要删除的文件或文件夹图标，在弹出的快捷菜单中选择“编辑”→“删除”菜单命令，在打开的确认话框中单击“确定”按钮确认删除即可。
5.移动文件或文件夹通过两种方法可以实现文件或者文件夹移动。
（1）首先在“文件”面板中选择要移动的文件或文件夹，复制该文件或文件夹，然后粘贴在新位置，最后删除原文件或者文件夹。
第3章站点设计 67
（2）选中文件或文件夹后，将其拖到新位置。
移动时，会弹出如图3.38所示的对话框，一般需要选择更新。
刷新“文件”面板可以看到该文件或文件夹在新位置上。
图3.38“更新文件”对话框
6.刷新“文件”面板如果站点文件较多，对于在“文件”面板中的操作，DreamweaverCS6不能及时自动刷新，导致使用者看到的还是操作前的内容，这种情况会引起操作混乱。
所以，建议使用者操作“文件”面板后能手动刷新“文件”面板。
手动刷新“文件”面板，请先右击任意需要刷新的文件或文件夹，在弹出的快捷菜单中选择“刷新本地文件”菜单命令。
也可以单击“文件”面板工具栏上的“刷新”按钮（或者按F5键）。
7.在站点中查找最近修改的文件在折叠的“文件”面板中，单击“文件”面板右上角的“选项”菜单，然后选择“编辑”→“选择最近修改的文件”菜单命令，如图3.39所示。
这时会打开如图3.40所示的“选择最近修改日期”对话框。
完成此对话框，最后单击“确定”按钮保存刚才的设置。
图3.39“选择最近修改日期”命令 通过上面的操作，DreamweaverCS6会在“文件”面板中高亮显示在指定时间段内修改的文件。
68 网页设计与制作（第2版） 图3.40“选择最近修改日期”对话框 3.4.2管理资源 资源包括存储在站点中的各种元素，如图像或影片文件。
可以从各种来源获取资源，例如，可以在应用程序（如MacromediaFireworks或MacromediaFlash）中创建资源，从其他人那里接收资源，从剪辑作品CD或图片Web站点中复制资源。
1．在“资源”面板中查看资源可以使用“资源”面板查看和管理当前站点中的资源。
“资源”面板显示与“文档”窗口中的活动文档相关联的站点资源。
☞提示：必须首先定义一个本地站点，然后才能在“资源”面板中查看资源。
“资源”面板提供两种列表：
（1）“站点”列表：显示站点的所有资源，包括在该站点的任何文档中使用的颜色和URL。
（2）“收藏”列表：仅显示明确选择的资源。
在这两个列表中，资源被分成多个类别。
“站点”列表和“收藏”列表都可用于除模板和库项目之外的所有资源类别。
☞提示：大多数“资源”面板操作在“站点”列表和“收藏”列表中的工作方式相同。
但是，有几个任务只能在“收藏”列表中执行。
默认情况下，给定类别中的资源按名称的字母顺序列出。
表3.1列出了“资源”面板中的常用操作。
操作打开“资源”面板查看“站点”列表查看“收藏”列表 表3.1“资源”面板常用操作 具体步骤选择“窗口”>“资源”。
在“资源”面板中默认情况下，“图像”类别处于选定状态在“资源”面板中，选择位于面板顶部的“站点”选项在“资源”面板中，选择位于面板顶部的“收藏”选项“收藏”列表为空，直到用户向其中显式添加资源 第3章站点设计 69 操作显示特定类别的资源按不同顺序列出资源 预览资源更改列的宽度更改预览区域的大小 续表 具体步骤单击“资源”面板左侧相应的图标单击某个列标题。
例如，若要根据类型对图像列表进行排序（以便使所有GIF图像在一起，所有JPEG图像在一起，等等），应单击“类型”列标题在“资源”面板中选取资源。
面板顶部的预览区域将显示该资源的可视化预览。
例如，当选择一个影片资源时，预览区域将显示一个图标。
若要查看该影片，请单击预览区域右上角的“播放”按钮（绿色三角形）拖动分隔两个列标题的线向上或向下拖动拆分条（在预览区域和资源列表之间）
2．将资源添加到文档可以将大多数类型的资源插入到文档中，方法是将它们拖动到“文档”窗口中的“代码”视图或“设计”视图，或者使用“插入”按钮，具体操作如下。
若要将资源插入文档，首先将插入点放置在“设计”视图中希望资源出现的位置。
接着，在“资源”面板中，在面板左侧选择要插入的资源的类型。
在面板顶部选择“站点”或“收藏”，然后选择要插入的资源。
然后，执行下列操作之一：方法一：将资源从面板拖动到文档。
可以将脚本拖动到“文档”窗口的文件头内容区域；如果该区域未显示，则选择“查看”→“文件头内容”菜单命令。
方法二：在面板中选择资源，然后单击面板的底部的“插入”按钮，资源即被插入文档中（如果资源为颜色，则该颜色将在插入点开始应用；也就是说，随后输入的内容将以该颜色显示）。
3.5网页设计中的规范 网站的建设和管理是一对矛盾。
快速建站往往会忽略一些小问题，从而使得网站的维护变得困难。
3.5.1DreamweaverCS6中的命名原则 良好的命名对于网站开发起着至关重要的作用，如果对资源进行合理的命名，可以达到事半功倍的效果。
无论是哪种命名规范，无论是对哪种资源进行命名，其核心思想都是“用最少的字母进行最全面的描述”，即“唯一性＋描述性”是命名的灵魂。
网页设计的过程中，对各个方面进行命名的时候，不能不考虑命名原则。
如果只注重制作的迅速与方便，必将为日后的修改或维护带来巨大的困难。
在DreamweaverCS6中用户可以对一系列不同类型的对象进行命名，这些对象包括图片、层、表单、文件、数据库域等，这些对象将会被许多不同的工作引擎进行分析处理，这些工具包括各种浏览器、JavaScript脚本解析器、网络服务器、应用程序服务器、查询语言等。
关于文件的命名，看似无足重轻，但实际上如果没有良好的命名原则进行必要的约 70 网页设计与制作（第2版） 束，随意命名，最终导致的结果就是整个网站或是文件夹无法管理。
所以，命名原则在这里非常重要。
在给文件和目录（文件夹）以及图片等其他资源命名时需要注意以下原则。
1．唯一性请确保某对象的名称与其他对象不同，保证其独一无二的属性。
例如，可以将某对象命名为feedback_button_
3。
2．小写有些服务器和脚本解析器对文件名的大小写也进行检查，而为了避免因大小写引起的不兼容问题，建议用户在命名时全部使用小写文件名。
3．不带空格以及特殊字符不同的解析器对空格等符号的解析结果不同，例如某些解析器会把空格视为某个十六进制的数值，因此建议用户使用不带空格的单词作为文件对象的名称。
在文件以及文件夹的命名中避免使用特殊符号。
特殊符号包括“&”、“＋”、“、”等会导致网站不能正常工作的字符。
用户在命名中可以随意使用26个罗马字母以及10个阿拉伯数字，而不建议使用其他标点符号。
为了使某个对象的文件名独一无
二，用户可以通过使用“_”符号来更加详细地描述文件名。
在某些命名用词中，可以根据词义，使用连字符将它们组合起来。
例如，某对象的文件名可以是jd_background_17。
文件夹的名称最好不要采用诸如“，”、“。
”、“；”、“：”、“.”、“”（空格）等符号，这是因为在不同的操作系统平台上对这些符号的使用限制是不一样的。
如果硬要进行命名区分，请对比下边的命名（以我的家园/家园书屋为例）：wodejiayuanjiayshuwu20010220wodejiayuan-jiayshuwu2001-02-20wodejiayuan_jiayshuwu2001_02_20上边3组命名中，建议采用最后一种。
按照栏目或日期进行命名，名称采用下划线连接，所有的操作系统均支持这种命名方式。
文件名的长度可以不限，但也不要太长，以致不便记忆。
4．以字母开始有些浏览器不接受以数字开头的文件名。
例如，在某些浏览器中的JavaScript脚本内部，如果使用alpha23这样的名称就不会出现问题，而如果使用23alpha这样的名称就可能会发生故障。
除了上述原则标准之外，还需要注意一些其他情况，如文件名与系统的冲突。
某些文件名可能满足上述标准，但可能还会导致故障的发生，原因是因为它们与系统产生了冲突。
需要特别注意的是，网站文件或文件夹命名请尽量避免使用中文字符命名。
如果某个对象的名称无法被某个解析器识别，就有可能会导致故障的发生，更加麻烦的是用户可能很难发现问题的原因。
例如某个具体的特效无法正确显示，或者是在某个特殊阶段无法正确显示，有时故障可能只会在某种特殊情况或在使用某个浏览器时发生，而在其他情况下保持正常，用户将很难分析出故障是由于命名问题而导致的。
由于需要命名的对象的种类很多，对这些对象进行解析的引擎工具也很多，因此用 第3章站点设计 71 户在给这些对象命名时应该遵循一个常规的标准，以确保普遍兼容性。
命名的基本原则就是：使用独一无二的、小写、不带空格的名称，名称应由字母和数字组成，并以字母开始，名称中可以包含“_”符号。
在网页制作过程中，要求为目录和文件命名时都应遵循相应的规范，名称应能代表文件的意义，以便进行查找、修改。
下面从网站命名规范、目录结构规范、内容编辑规范3个方面具体介绍网页制作的规范。
3.5.2命名规范
1．文件/目录的命名规范对文件/目录命名时除了遵循上一节所讲述的四条基本原则之外，尤其要注意网站中文件/目录的名称最好不要用中文，而要用英文（缩写也可）或汉语拼音。
目录（文件夹）命名一般长度一般不超过20个字符，命名采用小写字母。
文件名称统一用小写的英文字母、数字和下划线的组合。
对于文件夹和目录的具体命名规范，可以参考以下几种方案：
（1）汉语拼音：根据文件或者目录的主要作用提取两个或者三个关键字，将提取的关键字的汉语拼音全拼作为名称。
例如某高校网站中的校园新闻页面，提取的关键字可以是“新闻”两个字，然后使用xinwen.htm作为文件名称。
（2）拼音缩写：采用主要作用的汉字的第一个字母连接形成名称，还是上例中的校园新闻页面为例，其文件名则为xyxw.htm。
这些缩写词的使用会给站点的维护带来隐患。
如jxpt、xzjg，如果不告诉这是“教学平台”和“行政机构”的拼音缩写，其他人无法知道其确切含义。
虽然个人用户觉得其简单因而使用，但是会导致团队合作开发以及网站上线后的运行维护困难加大，这种方式不建议使用。
（3）英文缩写：选取每个英文单词的第一个字母来命名网页或者目录，这种方法不常使用。
（4）英文单词：尽量按单词的英语翻译为名称。
例如，某公司的信息反馈目录可以起名feedback，而“关于我们”目录起名为aboutus，公司新闻页面直接命名为news.htm。
这种方法简单、明确、通用，使用范围非常广，推荐制作者使用。
非常典型的例子是，几乎所有网站的登录页面都使用login作为网站后台登录页面的名称。
不论采用哪种命名方法，其作用无外乎两个：一是使得工作组的每一个成员能够方便地理解每一个文件的意义，方便开发与维护；二是当在目录中使用“按名称排列”命令时，同一种大类的文件能够排列在一起，以便进行查找、修改、替换等操作。
另外，使用index.html文件名（小写）或者index.htm名称命名的文件一般是“索引页”，即首页，首页不制作具体内容，只要起到跳转作用。
文件和文件夹的命名，可以用栏目名称的拼音，也可以用栏目名称的英文，团队开发时，有统一的命名规则相当重要。
例如个人简历这个栏目，命名的文件夹名称可以是jianli，如果命名为英文，可以是me。
论坛这个栏目一般都是用bbs作为文件夹名称。
2．图片的命名规范网页中使用的图片文件的命名一般采用“头部+尾部”两段式来命名。
72 网页设计与制作（第2版）
（1）头部：表示此图片的大类性质。
例如，网页顶部长方形位置处，一般是放置广告或者装饰性图案，通常取名为banner；图片网站的标志性图片取名为logo；网页中作为按钮的图片命名为button；图片用作网页菜单则命名为menu；图片用作边框则使用单词border，有时还添加图片的位置信息，例如left_border表示左边框。
（2）尾部：用来表示图片的具体含义，通常使用英文字母表示。
例如，banner_sohu.gif、banner_sina.gif、menu_aboutus.gif、menu_job.gif、title_news.gif、logo_police.gif、logo_national.gif、pic_people.jpg、pic_hill.jpg。
这种命名方式一目了然，便于管理与查找。
3.5.3目录结构规范 网站目录创建的原则是以最少的层次提供最清晰、简便的访问结构。
根目录一般只存放index.htm以及其他必需的系统文件，每个主要栏目开设一个相应的独立目录。
另外，同类型的文件最好放在一个文件夹中，例如、把图片文件都放在image文件夹中。
有些文件或者文件夹是为临时的目的而创建的，如一些短期的网站通告或促销信息、临时文件下载等，不要将这些文件和文件夹随意放置。
一种比较理想的方法是创建一个临时文件夹来放置各种临时文件，并适当使用简单的命名规范，不定期地进行清理，将陈旧的文件及时删除。
通常，网站的JS、ASP、PHP等脚本存放在根目录下的scripts目录；CGI程序存放在根目录下的cgi-bin目录；所有CSS文件存放在根目录下style目录；每个语言版本存放于独立的目录。
所有Flash、AVI、RAM、QuickTime等多媒体文件存放在根目录下的media目录；根目录下的images为存放公用图片目录，每个目录下私有图片存放于各自独立的images目录。
例如： \menu1\images\menu2\images 3.5.4内容编辑规范 网站的内容必须遵守我国《计算机信息网络国际联网安全保护管理办法（公安部令第33号）》的规定（）。
其中关于网站内容的规定如下：第五条任何单位和个人不得利用国际联网制作、复制、查阅和传播下列信息：（一）煽动抗拒、破坏宪法和法律、行政法规实施的；（二）煽动颠覆国家政权，推翻社会主义制度的；（三）煽动分裂国家、破坏国家统一的；（四）煽动民族仇恨、民族歧视，破坏民族团结的；（五）捏造或者歪曲事实，散布谣言，扰乱社会秩序的；（六）宣扬封建迷信、淫秽、色情、赌博、暴力、凶杀、恐怖，教唆犯罪的；（七）公然侮辱他人或者捏造事实诽谤他人的；（八）损害国家机关信誉的；（九）其他违反宪法和法律、行政法规的。
第3章站点设计 73 3.6上机实践
一、实验目的
（1）掌握DreamweaverCS6站点的创建步骤。
（2）掌握在已有文件夹上创建站点的方法
二、实验内容首先，创建实验准备所需的文件夹mysite，其内部包含子文件夹images；mysite文件夹下有网页文件index.html。
接着创建网站。
三、实验步骤定义站点也就是创建网站，可以将已有创建文件夹转换成网站，也可以从零开始创建一个全新的站点。
本实验是在已有文件夹的基础上创建站点。
实验步骤如下：首先在D盘（也可以是其他硬盘）根目录下创建文件夹mysite，在其内部创建images文件夹。
将网站制作时需要的图片文件复制到images文件夹下，如图3.41所示。
图3.41文件以及文件夹 接着启动DreamweaverCS6，新建index.html文件并保存。
选择菜单栏的“站点”→“新建站点”命令。
其余步骤请参考3.2节内容。
3.7习题
1．请解释网站的概念。
2．如何创建一个本地站点？
3．通过“文件”面板，如何给已有的站点增加一个新的文件夹？
4．通过“文件”面板，如何从已有的站点重命名一个网页文件？
5．使用DreamweaverCS6创建本地站点制作网页有什么优势？
6．在本地站点的根目录下，将建设网站需要的所有资源以及网页文件分别创建子目录进行管理有何利弊？
7．DreamweaverCS6站点和Web站点有何不同？
8．设计一个站点并对站点进行相应的管理。
9．如何删除一个站点？
声明：
该资讯来自于互联网网友发布，如有侵犯您的权益请联系我们。
