第3 章 站点设计 本章了解站点的相关知识,并用Dreamweaver创建本地站点,学习用“文件”面板来管 理站点中的资源。学习本章的时候,要注意对工作环境的熟悉,以及对基本操作的领会及掌 握。本章重点内容包括:掌握站点的创建、编辑、删除;熟悉“文件”面板;能熟练使用 Dreamweaver的站点管理技术。 3.1 站点概述 站点(即Web站点)是一组具有相关主题、类似设计的链接文档和资源。Dreamweaver 不仅可以创建单独的文档,还可以创建完整的Web站点。“Dreamweaver站点”和“Web站 点”不完全相同。“Dreamweaver站点”是在Dreamweaver制作网页的过程中所使用的术 语,指属于某个网站的文档的本地或远程存储位置。“Web 站点”则是把网站内容放到 Internet或Intranet的Web服务器上供用户浏览,即运行系统的Web服务器上的站点。网 站的发布过程就是将Dreamweaver本地站点变成Web站点的过程。 1.规划和组织站点结构 在创建本地站点前认真规划和组织站点结构,可以避免挫折、节省时间。尤其当站点较 大时,如果不考虑好文档在文件夹的层次就开始创建,最终将文件混乱无序地存放在一个巨 大的文件中,或者是一些相关文件却分散在一些有类似名称的文件夹中,这些情况都不利于 站点的管理和后续维护工作。 图3.1 某公司网站站点的 文件夹组织结构 规划站点组织结构时,可以按照站点内容进行分解归类,即对于不同栏目,要创建相应 的子文件夹来存放本栏目的内容。另外,对于本栏目不 同类型的资源文件,创建相关的文件夹进行存放。这种 组织形式可以使站点便于开发、维护和浏览。 例如,某公司网站有“关于我们”和“公司新闻”两个 栏目,可以创建名为about的文件夹,存放与公司简介相 关的网页内容(必要时可以再创建名为images的子文件 夹,以存放与公司简介相关的图片资源);在名为news的 文件夹中存放关于公司新闻方面的网页内容;创建 images文件夹,以存放图片首页中需要使用的图片文件, 如图3.1所示。 另外,为了便于管理和维护,建议在本地和远程站点 36 网页设计与制作（第 4 版） 上使用相同的组织结构。这样使得Dreamweaver本地站点的文件上传到远程站点上时, Dreamweaver将保证本地结构会精确地复制到远程站点中,使得本地站点和远程Web站点 具有完全一样的结构。 通常,制作站点时首先应在本地硬盘创建一个文件夹,然后,在网站制作过程中,将所有 的网页、图片、音频、视频、动画等内容都保存在该文件夹中。网站制作完成后,在发布站点 时,将这些文件上传到Web服务器上指定位置即可。最重要的是,创建站点后,可以形成清 晰的站点组织结构图,使用者能够对站点结构了如指掌,方便对网站的管理(例如,增减站点 文件夹及文档等)。综上所述,开始使用Dreamweaver前,应该先创建一个站点,再进行以 后的操作。 2.Dreamweaver的3种站点 在Dreamweaver中,通过站点整理与网站关联的本地计算机上的所有文档,并可让设 计者跟踪和维护链接、管理文件,以及将站点文件传输到Web服务器。Dreamweaver站点 由3部分(或文件夹)组成,具体取决于开发环境和所开发的Web站点类型。 .提示:若要定义Dreamweaver站点,只需设置一个本地文件夹。若要向Web服务器 传输文件或开发Web应用程序,还必须添加远程站点和测试服务器信息。 本地根文件夹即工作目录,通常是本地硬盘上的文件夹。Dreamweaver将该文件夹作 为Web站点的“本地站点”,既可以放在本地计算机上,也可以放在网络服务器上。 Dreamweaver将此文件夹称为“本地站点根目录”。使用Dreamweaver前必须至少设置一 个本地文件夹。 远程文件夹是用于存储测试、生产、协作等文件的地方,Dreamweaver在“文件”面板中 将此文件夹称为“远程站点”。远程文件夹一般位于网络上运行Web服务器的计算机上,包 含用户从Internet访问的文件。通过本地文件夹和远程文件夹的结合使用,可以在本地硬 盘和Web服务器之间传输文件,这将有助于轻松地管理Dreamweaver站点中的文件。可 以在本地文件夹中处理文件,如果需要让其他人查看,则再将它们发布到远程文件夹。 测试服务器文件夹是Dreamweaver处理动态页面的文件夹(也称为“测试站点”)。如 果网站有动态表单、PHP 内容,则可为该站点设置测试文件夹。 本地站点和远程站点能够使用户在本地磁盘和Web服务器之间传输文件。测试站点 则用于动态页面测试。 3.创建本地站点 2 3.2.1 通过“站点设置对象”创建本地站点 1. 打开“站点设置对象”对话框 通过站点定义方式创建站点,首先需要打开“站点设置对象”对话框。在Dreamweaver 中有两种方法可打开“站点设置对象” 如图3. 对话框,2所示。 方法一:通过Dreamweaver菜单,选择“站点”→“新建站点”菜单命令。 方法二:选择“站点” 管理站点” 打开“管理站点”对话框,3所示, 在对话框中单击“新建站点 → ” “ 按钮。 菜单命令, 如图3. 第 3 章 站点设计 图3.打开“站点设置对象”对话框的方法 2 图3.“管理站点”对话框 3 2. 输入站点名称 在“站点设置对象”对话框的“站点名称”项输入站点名称,例如mySite1,则“站点设置 对象未命名站点”对话框变为“站点设置对象mySite1”对话框。此名称显示在“文件”面板 和“管理站点”对话框中;它不显示在浏览器中。在“本地站点文件夹”项,直接在输入框中输 入站点文件存储位置,或者单击输入框后面的文件夹图标,选择一个本地文件夹即可,这就 是计算机上要用于存储站点文件的本地版本的文件夹。其结果如图3.4所示(注意,站点名 称中、英文不限,最好和站点内容相关,这样便于管理)。 如果要使用Git管理站点文件,就要勾选“将Git存储库与此站点关联”复选框。如果 38 网页设计与制作（第 4 版） 图3.“站点设置对象my”对话框 4 Site1 首次使用Git,而且希望将要创建的站点与Git关联,就选择“初始化为Git存储库”。如果 已具有Git登录名,并且希望将要创建的站点与现有存储库关联,就选择“使用URL 克隆现 有Git存储库”。 r中处理本地站点文件了,5所示。 上一步完成之后,就可以在Dreamweave如图3. 图3.“文件”面板中的站点 5 3.2.2 连接到远程服务器 远程服务器(通常称为Web服务器)用于发布站点文件以便联机查看。在 Dreamweaver中指定本地站点后,可以根据开发环境和需要为站点指定远程服务器,如 图3. 6所示。 第 3 章 站点设计 图3.“服务器”选项 6 设置远程文件夹时,必须为Dreamweaver选择连接方法,以将文件上传和下载到Web 服务器。最典型的连接方法是FTP,但Dreamweaver还支持本地/网络、FTPS 、SFTP 、 WebDAV 和RDS 连接方法。本书只讲述FTP 链接方式。 单击服务器列表左下角的添加新服务器按钮 ,出现如图3. 7所示的界面。 图3.添加新服务器的“基本”界面 7 40 网页设计与制作（第 4 版） (1)在“服务器名称”文本框中指定新服务器的名称。 (2)在“连接方法”下拉菜单中选择FTP 。 (3)在“FTP地址”文本框中输入要将网站文件上传到的FTP服务器的地址。 FTP地址是计算机系统的完整Inent名称, txcom 。请输入完整的地址,并 tre如fp.x. 且不要附带其他任何文本,特别是不要在地址前面加上协议名(如果不知道FTP地址,请 与Web托管服务商联系)。 .提示:端口21是接收FTP连接的默认端口。可以通过编辑右侧的“端口”文本框更 改默认端口号。保存设置后,FTP地址的结尾将会附加一个冒号和新的端口号( fp. xx.om:29 )。 例如,t c (4)在“用户名”和“密码”文本框中输入用于连接到FTP服务器的用户名和密码。 单击“测试”按钮,测试FTP地址、用户名和密码。 .提示:对于托管站点,必须从托管服务商的系统管理员处获取FTP地址、用户名和 密码信息。其他人无权访问这些信息,确切按照系统管理员提供的形式输入相关信息。 (5)默认情况下,Dreamweaver会保存密码。如果希望每次连接到远程服务器时 Dreamweaver都提示输入密码,请取消选择“保存”选项。 (6)在“根目录”文本框中输入远程服务器上用于存储公开显示的文档的目录(文件夹)。 如果不能确定应输入哪些内容作为根目录,就与服务器管理员联系或将文本框保留为 空白。在有些服务器上,根目录就是首次使用FTP连接到的目录。 (7)在WebURL文本框中输入Web站点的URL( h//www.st.om )。 例如, tp:myiecDreamweaver使用WebURL创建站点根目录相对链接,并在使用链接检查器时验证这些 链接 ( 。 8)如果仍需要设置更多的选项,就展开“更多选项”部分,如图3. 8所示。 图3.添加新服务器的“更多选项”界面 8 (9)单击“保存”按钮关闭“基本”界面。然后,在“服务器”类别中指定刚添加或编辑的 服务器为远程服务器或测试服务器,或者同时为这两种服务器,9所示。 如图3. 图3.服务器列表 9 第 3 章 站点设计 使用本地站点连接好远程服务器后,在站点面板中就可以对文件进行上传、下载操作 了,一般情况下都选择FTP 连接方式。 在“站点设置对象” 除一些基本的设置外, 高级”选项卡,如图3. 示。其各项说明如下。 对话框中, 还有“ 10 所 .维护同步信息:保持服务器与本地信息同步。 .保存时自动将文件上传到服务器:勾选该复选框,保存文件时自动将其上传到服 务器。 .启用文件取出功能:打开文件时,自动设置为取出。 .取出名称:输入取出文件的人员名称,输入后在站点窗口中取出文件时将显示该名称。 .电子邮件地址:输入取出人员的电子邮件地址。 图3.服务器设置的“高级”界面 10 .提示:文件取出功能在团队开发设计的环境中特别有用,通过设置文件的高级属性, 可以方便工作组中的其他人修改该文件。 3.2.3 站点的“高级设置” 打开“站点设置” 单击左侧的“ 选项, 11 左侧所示, 对话框, 高级设置” 如图3.通过展开的 子项可以配置站点的某些高级属性。 1. 本地信息 单击“本地信息” 打开如图3.本地信息”选项设置界面,通过“ 子项, 12 所示的“ 本地信 息”子项可以设置本地文件夹的下列属性。 (1)默认图像文件夹:站点中存储根目录下图像的文件夹。输入文件夹的路径或单击 浏览文件夹图标,在打开的“选择图像文件夹”对话框中选择所需的文件夹。将图像添加到 文档时,Dreamweaver将使用该文件夹路径。 (2)链接相对于:是指在站点中创建指向其他资源或页面的链接时,需要指定 42 网页设计与制作（第 4 版） 图3.高级设置 11 图3.“本地信息”选项设置界面 12 Dreamweaver创建的链接类型。Dreamweaver可以创建两种类型的链接:文档相对链接和 站点根目录相对链接。默认情况下,Dreamweaver创建文档相对链接。如果更改默认设置 并选择“站点根目录”选项,就要确保WebURL 文本框中输入了站点的正确WebURL 。需 要注意的是,更改此设置将不会转换现有链接的路径;此设置仅应用于使用Dreamweaver 以可视方式创建的新链接。 第3 章 站点设计 43 .提示:使用本地浏览器预览文档时,除非指定了测试服务器,或在“编辑”→“首选参 数”→“实时预览”中选择了“使用临时文件预览”选项,否则文档中通过站点根目录相对链接 进行链接的内容将不会显示。这是因为浏览器不能识别站点根目录,而服务器能够识别。 (3)WebURL:Dreamweaver使用WebURL创建站点根目录相对链接,并在使用链 接检查器时验证这些链接。如果制作者不能确定正在处理的页面在目录结构中的最终位 置,或者可能以后会重新定位或重新组织包含该链接的文件,则站点根目录相对链接很有 用。站点根目录相对链接指的是指向其他站点资源的路径为相对于站点根目录(而非文档) 的链接。因此,如果将文档移动到某个位置,资源的路径仍是正确的。 例如,假设指定了http://www.mysite.com/mycoolsite(远程服务器的站点根目录)作为 WebURL,而且远程服务器上的mycoolsite目录中包含一个图像文件夹(http://www.mysite. com/mycoolsite/images)。另外,假设index.html文件位于mycoolsite目录中。当在index. html文件中创建指向images目录中某幅图像的站点根目录相对链接时,该链接如下所示。 <img src="/mycoolsite/images/image1.jpg" /> 该链接不同于文档相对链接,后者为如下的简单形式。 <img src="images/image1.jpg" /> /mycoolsite/附加到图像源将链接相对于站点根目录的图像,而不是相对于文档的图 像。假定图像位于图像目录中,图像的文件路径(/mycoolsite/images/image1.jpg)将始终 是正确的,即使将index.html文件移到其他目录也是如此。 关于链接验证,要确定链接是站点内部链接还是站点外部链接,必须使用WebURL。 例如,如果WebURL为http://www.mysite.com/mynewsite,且链接检查器在页面上发现 一个链接的URL为http://www.yoursite.com,则检查器确定后一个链接为外部链接,并 如此进行报告。同样,链接检查器使用WebURL确定链接是否为站点内部链接,然后检查 以确定这些内部链接是否已断开。 (4)区分大小写的链接检查:在Dreamweaver检查链接时,将检查链接的大小写与文 件名的大小写是否匹配。此选项用于文件名区分大小写的UNIX 系统。 (5)启用缓存:指定是否创建本地缓存以提高链接和站点管理任务的速度。如果不选 择此选项,Dreamweaver在创建站点前将再次询问是否希望创建缓存。最好选择此选项, 因为只有在创建缓存后“资源”面板(在“文件”面板组中)才有效。 2.遮盖 利用站点遮盖功能,可以从“获取”或“上传”等操作中排除某些文件和文件夹。还可以 从站点操作中遮盖特定类型的所有文件(如JPEG、FLV、XML等)。Dreamweaver会记住 每个站点的设置,因此不必每次在该站点上工作时都进行选择。 可以指定要遮盖的特定文件类型,以便Dreamweaver遮盖以指定形式结尾的所有文 件。例如,可以遮盖所有以.txt扩展名结尾的文件。 (1)遮盖站点中的特定文件类型。其设计界面如图3.13所示。 “遮盖具有以下扩展名的文件”复选框:在输入框中输入要遮盖的文件类型,然后单击 “确定”按钮。 44 网页设计与制作（第 4 版） 图3.“ 高级属性的设置界面 13 遮盖” 例如,可以输入.i以遮盖站点中名称以.i gf, gf结尾的所有文件。用一个空格分隔多个 文件类型,不要使用逗号或分号。 最后,在“文件”面板中,被遮盖的文件图标上会显示一条穿过受影响的文件的红线,指 示这些文件已被遮盖。 (2)取消遮盖站点中的特定文件类型。在图3.遮盖” 作之一,可以取消对特定文件的遮盖。 13 所示的“ 对话框中执行下列操 .取消勾选“遮盖具有以下扩展名的文件”选项,可以取消对其下面文本框中列出的所 有文件类型的遮盖。 .从输入框中删除特定文件类型,可以取消这些文件类型的遮盖 。 红线从受影响的文件上消失,指示它们已被取消遮盖 。 3. 设计备注 设计备注是为文件创建的备注。设计备注与它们所描述的文件相关联,但存储在单独 的文件中。对于添加了设计备注的文件,还可以在展开的“文件”面板中看到哪些文件具有 设计备注:“ 设计备注”图标会出现在“备注”列中。 通常使用设计备注记录与文档关联的其他文件信息,如图像源文件名称和文件状态说 明。例如,如果将一个文档从一个站点复制到另一个站点,则可以为该文档添加设计备注, 说明原始文档位于另一站点的文件夹中。 还可以使用设计备注记录因安全原因而不能放在文档中的敏感信息。例如,可以记录 某一价格或配置是如何选定的,或哪些市场因素影响了某一设计决策等信息。 通过“设计备注”子项对站点启用和禁用设计备注。启用“设计备注”时,如果需要,还可 以选择与他人共享“设计备注”如图3. , 14 所示。 图3.“设计备注”高级属性的设置界面 14 (1)维护设计备注:此复选框用于启用设计备注(取消勾选即禁用)。 (2)“ 清理设计备注”按钮:用于删除站点的所有本地设计备注文件,如果要删除远程 设计备注文件,则将需要手动删除。 第 3 章 站点设计 (3)启用上传并共享设计备注:勾选此复选框,与站点关联的设计备注将与其余的文 档一起上传。如果选择该选项,则可以和小组的其余成员共享设计备注。在上传或获取某 个文件时,Dreamweaver将自动上传或获取关联的设计备注文件。 如果未选择此选项,则Dreamweaver在本地维护设计备注,但不将这些备注与相关文 件一起上传。如果独自在站点上工作,取消选择此选项可改善性能。当存回或上传文件时, 设计备注并不会传输到远程站点,因此仍可以在本地为站点添加和修改设计备注。 4. 文件视图列 在展开的“文件”面板中查看Dreamweaver站点时,有关文件和文件夹的信息将在列中 显示。例如,可以看到文件类型或文件的修改日期。 通过“文件视图列”,用户可以自定义展开的“文件”面板中显示的文件和文件夹的详细信 息。可以通过以下任何操作对列进行自定义(某些操作仅适用于添加的列,不适用于默认列)。 (1)更改列的顺序,或将列重新排列。选择列名称,然后单击向上或向下的箭头按钮更 改选定列的位置。 .提示:可以更改除“名称”列之外任何列的顺序。“名称”列始终是第一列。 (2)添加、15 中选择一个列, 按钮添加 删除或更改详细列。在图3.然后单击加号(+) 一个列,或单击减号(-)按钮删除一个列。 图3.15 “文件视图列”高级属性的设置界面 .提示:单击减号(-)按钮将立即删除该列,且不经确认,因此,在单击减号(-)按钮 前,务必弄清是否确实要删除该列。 添加一个列时,会打开如图3.在该图的“ 框中输入列的名称。 16 所示的对话框, 列名称” 从“与设计备注关联”列表中选择一个值,或者输入自己的值。 .提示:必须将一个新列与设计备注关联,“文件”面板中才会有数据显示。 接着选择一种对齐方式,以确定该列中的文本对齐方式。选择或取消选择“显示”以显 示或隐藏列。最后,可以选择“与该站点所有用户共享”与连接到该远程站点的所有用户共 享该列。 5. 模板 模板是一种特殊类型的文档,用于设计“固定的”页面布局;然后,用户便可以基于模板 46 网页设计与制作（第 4 版） 图3.在“ 中添加列 16 文件视图列” 创建文档,创建的文档会继承模板的页面布局。设计模板时,可以指定在基于模板的文档中 哪些内容是用户可编辑的。 .提示:使用模板可以控制大的设计区域,以及重复使用完整的布局。如果要重复使 用个别设计元素,如站点的版权信息或徽标,可以创建库项目。 使用模板可以一次更新多个页面。用模板创建的文档与该模板会保持连接状态(除非 以后分离该文档)。可以修改模板并立即更新基于该模板的所有文档中的设计。 如果模板文件是通过将现有页面另存为模板创建的,则新模板在Templates文件夹 中,并且模板文件中的所有链接都将更新,以保证相应的文档相对路径是正确的。如果用户 以后基于该模板创建文档并保存该文档,则所有文档相对链接将再次更新,从而依然指向正 确的文件。 向模板文件中添加新的文档相对链接时,如果在属性检查器的链接文本框中输入路径, 则输入的路径名很容易出错。模板文件中正确的路径是从Templates文件夹到链接文档 的路径,而不是从基于模板的文档的文件夹到链接文档的路径。在模板中创建链接时,就要 使用文件夹图标或者使用属性检查器中的“指向文件”图标,以确保存在正确的链接路径。 Dreamweaver8以前的版本不对Templates文件夹中的文件进行更新(例如,假定在 Tempaes文件夹中有一个名为man. s 的文件,并且已将he=man. s"作为链接写 lticrf"ic 入模板文件中,则Dreamweaver在创建基于模板的页面时不会更新此链接)。 而Dreamweaver8对此行为进行了更改,这样,无论所链接文件从直观上体现的位置 在何处,创建基于模板的页面时所有文档相对链接都将更新。 Dreamweaver8之后的版本添加了一个用于启用和禁用更新相对链接行为的首选参数 (这个特殊的首选参数仅适用于指向Templates文件夹中的文件的链接,不适用于一般链 接)。默认行为是不更新这些链接,但是如果用户希望Dreamweaver在创建基于模板的页 面时更新这种链接,则可以取消选择这个首选参数。 若要使Dreamweaver将文档相对路径更新为Templates文件夹中的非模板文件,请在 “站点设置对象”对话框的“高级设置”下选择“模板”类别,然后取消勾选“不改写文档相对路 径”复选框。 除上述内容外,站点的“高级”设置还可以设置Bootstrap、jQuery、Web字体等项目。 第 3 章 站点设计 3.站点管理 3 创建本地站点之后,可以通过“管理站点”对话框对Dreamweaver中创建的全部站点进 行管理。选择“站点”→“管理站点”菜单命令,打开“管理站点”对话框,或者在“文件”面板中 选择“站点管理”子项。 在“管理站点” 参见3.编辑、复制、删除、 和导出等操作。 对话框中可以完成站点的创建(2节内容)、导入 .如果需要编辑某个站点,在“管理站点”对话框中选择这个站点的名称,然后单击“ 编 辑”按钮,就可以修改其站点设置,操作与创建站点的步骤类似 。 .站点复制操作将创建本站点的副本,副本将出现在站点列表窗口中,此操作容易 引 发混乱,因此不建议初学者使用 。 .站点删除操作:将删除所选站点,此操作无法撤销。需要注意的是,此操作仅删 除 Dreamweaver中的站点,不会删除磁盘上的文件夹以及相关文件 。 .导入/导出站点:可以将站点导出为包含站点设置的XML 文件,并在以后将该站 点 导入Dreamweaver。这样就可以在各计算机和产品版本之间移动站点,甚至与其 他 用户共享这些设置了 。 通常需要定期对站点执行导出操作,这样,即使该站点出现意外,也有它的备份副本。 若要导出站点,请执行以下操作:首先选择“站点”→“管理站点”菜单命令,打开“管理站 点”对话框,在该对话框中选择要执行导出操作的一个或者多个站点(按住Ctrl键单击每个站 点,可以选中多个站点;若要选择某一范围的站点,请按住Shift键单击该范围中的第一个和最 后一个站点), 然后单击“导出”按钮,对于要导出的每个站点,在“导出站点”对话框中选择需要 保存站点的位置,然后单击“ 按钮, 17 所示。Deevr会在指定位置将每个站 保存” 如图3.ramwae 点保存为后缀为.ste的XML 文件。最后,单击“完成”按钮,关闭“管理站点”对话框。 图3.“导出站点”对话框 17 48 网页设计与制作（第 4 版） 导入操作与导出操作相反。 本节初步介绍了Dreamweaver的站点管理功能,但是要真正体会到它的强大和快捷, 还要在以后的学习、工作中慢慢体会。 3.使用站点 4 3.4.1 管理文件 在“文件”面板上,从“站点”弹出式菜单中选择一个站点,就可以对相应的站点文件内容 进行维护管理了。如图3.ite1站点。 18 所示选择了myS 在“文件”面板中按列排序的方法是:单击要排序的列的标题。再次单击标题将反转之 前列的排序方式(升序或降序)。 右击,出现如图3.有对勾的选项表示在“ 面板中显示此信息, 19 所示的快捷菜单, 文件” 没有对勾表示隐藏。如果需要改变选项状态,把鼠标指针移到相应的选项上单击即可转换 其状态。 图3.“文件”面板图3.“文件”面板列的显示 18 19 通过在Dreamweaver中选择“编辑”→“首选项”菜单命令,打开“首选项”对话框。 在左侧的分类列表中选择“站点”会出现如图3.站点”首选项的选项,可以 根据需要进行个性化配置。 , 20 所示的“ 通过“文件”面板可以直接对站点中的文件或者文件夹进行操作,十分方便。例如,可以 打开文件,更改文件名,添加、移动或删除文件。下面具体讲解其主要操作。 1. 查看站点中的文件 具体步骤如下。 (1)按F8 键打开或关闭“文件”面板。 (2)在“站点”下拉列表框中选择要查看的站点。 (3)在“文件”面板中双击该文件的图标,或者右击该文件,在弹出的快捷菜单中选择 第 3 章 站点设计 图3.“首选项”对话框中的“站点”设置 20 “打开”命令。该文档会在Dreamweaver的“文档”窗口中打开。 2. 在站点中新建文件夹和文件 具体步骤如下。 (1)打开“文件”面板,选择要创建新文件夹或文件的根目录,如图3. 21 所示。 (2)右击根目录图标,在弹出的快捷菜单中选择“新建文件”或“新建文件夹”命令,如 图3. 22 所示。 图3.选择ns文件夹图3.为ns文件夹新建文件夹 21 ew22 ew (3)Dreaer将自动创建名为uttehtml的新文件或名为utted的文件夹, amwevnild.nil 50 网页设计与制作（第 4 版） 并自动设置为可改写状态,如图3. 23 所示。 图3.23 新建文件夹untitled并使其处于可写状态 (4)直接输入新的名称即可,如old。 3. 重命名文件或文件夹 重命名文件或文件夹有以下3种方法。 方法一:在“文件”面板中选中要重命名的文件或文件夹,然后单击使其进入可改写状 态,输入新的名称即可。 方法二:在要重命名的文件或文件夹图标上右击,在弹出的快捷菜单中选择“编辑”→ “重命名”命令也可进入可改写状态,输入新的名称即可。 方法三:先选中要重命名的文件或文件夹,再按F2 键,进入可改写状态,输入新的名称 即可。 4. 删除文件或文件夹 首先选中要删除的文件或文件夹,选中的文件或文件夹背景为蓝色,按Delete键,在打 开的“确认”对话框中单击“确定”按钮。也可以右击要删除的文件或文件夹图标,在弹出的 快捷菜单中选择“编辑”→“删除”命令,在打开的“确认”对话框中单击“确定”按钮确认删除 即可。 5. 移动文件或文件夹 通过以下两种方法可以实现文件或者文件夹移动。 方法一:首先在“文件”面板中选择要移动的文件或文件夹,复制该文件或文件夹,然后 粘贴在新位置,最后删除原文件或者文件夹。 会弹出如图3.更方法二:选中文件或文件夹后,将其拖到新位置。移动时, 24 所示的“ 新文件”对话框。从更新“文件”面板中可以看到该文件或文件夹在新位置上。 6. 刷新“文件”面板 如果站点文件较多,对于在“文件”面板中的操作,Dreamweaver不能及时自动刷新,导 第 3 章 站点设计 图3.“更新文件”对话框 24 致使用者看到的还是操作前的内容,这种情况会引起操作混乱。所以,建议使用者操作“文 件”面板后能手动刷新“文件”面板。手动刷新“文件”面板,请先右击任意需要刷新的文件或 文件夹,在弹出的快捷菜单中选择“刷新本地文件”命令。也可以单击“文件”面板工具栏中 的“刷新”按钮(或者按F5 键)。 7. 在站点中查找最近修改的文件 在折叠的“文件”面板中,单击“文件”面板右上角的“选项”菜单,然后选择“编辑”→“选 择最近修改日期”菜单命令, 25 所示。这时会打开如图3.选择最近修改日 如图3.26 所示的“ 期”对话框。完成此对话框设置,最后单击“确定”按钮保存刚才的设置。 图3.“选择最近修改日期”命令 25 图3.“选择最近修改日期”对话框 26 52 网页设计与制作（第 4 版） 通过上面的操作,Dreamweaver会在“文件”面板中高亮显示在指定时间段内修改的 文件。 3.4.2 管理资源 资源包括存储在站点中的各种元素,如图像或影片文件。 1. 在“资源”面板中查看资源 可以使用“资源”面板查看和管理当前站点中的资源。“资源”面板显示了与“文档”窗口 中的活动文档相关联的站点资源,如图3. 27 所示。 图3.“ 面板 27 资源” .提示:必须首先定义一个本地站点,然后才能在“资源”面板中查看资源 。 “资源”面板提供了以下两种列表 。 (1)“ 站点”列表:显示站点的所有资源,包括在该站点的任何文档中使用的颜色 和URL 。 (2)“ 收藏”列表:仅显示明确选择的资源。 在这两个列表中,资源被分成多个类别。“站点”列表和“收藏”列表都可用于除模板和 库项目外的所有资源类别。 默认情况下,给定类别中的资源按名称的字母顺序列出。表3.资源” 1列出了“ 面板中 的常用操作。 表3.“ 面板中的常用操作 1 资源” 操作具体步骤 打开“资源”面板 选择“窗口” → “资源”菜单命令。在“资源”面板中,默认情况下,“图像”类别处于 选定状态 查看“站点”列表在“资源”面板中,选择位于面板顶部的“站点”选项 查看“收藏”列表 在“资源”面板中,选择位于面板顶部的“收藏”选项 “收藏”列表为空,直到用户向其中显式添加资源 显示特定类别的资源单击“资源”面板左侧相应的图标 第 3 章 站点设计 续表 操作具体步骤 按不同顺序列出资源 单击某个列标题。例如,若要根据类型对图像列表进行排序(以便所有GIF 图像 在一起,所有JPEG 图像在一起,等等), 则应单击“类型”列标题 预览资源 在“资源”面板中选取资源。面板顶部的预览区域将显示该资源的可视化预览。 例如,当选择一个影片资源时,预览区域将显示一个图标。若要查看该影片,请单 击预览区域右上角的“播放”按钮(绿色三角形) 更改列的宽度拖动分隔两个列标题的线 更改预览区域的大小向上或向下拖动拆分条(在预览区域和资源列表之间) 2. 将资源添加到文档 可以将大多数类型的资源插入文档中,方法是:将它们拖动到“文档”窗口中的“代码” 视图或“设计”视图,或者使用“插入”按钮,具体操作如下。 若要将资源插入文档,首先将插入点放置在“设计”视图中希望资源出现的位置。接着, 在“资源”面板中,在面板左侧选择要插入的资源的类型。在面板顶部选择“站点”或“收藏”, 然后选择要插入的资源。 然后,执行下列操作之一。 (1)将资源从面板拖动到文档。可以将脚本拖动到“文档”窗口的文件头内容区域;如 果该区域未显示,则选择“查看”→“文件头内容”菜单命令。 (2)在面板中选择资源,然后单击面板底部的“插入”按钮,资源即被插入文档中(如果 资源为颜色,则该颜色将在插入点开始应用;也就是说,随后输入的内容将以该颜色显示)。 3.网页设计中的规范 5 快速建站往往会忽略一些小问题,从而使得网站的维护变得困难。设计人员需要遵守 网页设计中的相应原则和规范。 3.5.1 Dreamweaver 中的命名原则 良好的命名对网站开发起着至关重要的作用,对资源进行合理的命名,可以达到事半功 倍的效果。无论哪种命名规范,无论对哪种资源进行命名,其核心思想都是“用最少的字母 进行最全面的描述”,即“唯一性+描述性”是命名的灵魂。在网页设计过程中,对各方面进 行命名时,不能不考虑命名原则。如果只注重制作的速度与便利性,必将为日后的修改或维 护带来麻烦。 在Dreamweaver中,用户可以对一系列不同类型的对象进行命名,这些对象包括图片、 层、表单、文件、数据库、域等,将会被许多不同的工作引擎进行分析处理,这些工具包括各种 浏览器、JavaScript脚本解析器、网络服务器、应用程序服务器、查询语言等。 关于文件的命名,看似无足重轻,实际上如果没有良好的命名原则进行必要的约束,随 意命名,最终导致的结果就是整个网站或文件夹无法管理。所以,命名原则在这里非常 重要。 54 网页设计与制作（第 4 版） 在给文件和目录(文件夹)以及图片等其他资源命名时,需要注意以下原则。 1.唯一性 请确保某对象的名称与其他对象不同,保证其独一无二的属性。例如,可以将某对象命 名为fedback_buton_3。 2.小写 有些服务器和脚本解析器对文件名的大小写也进行检查,而为了避免因大小写引起的 不兼容问题,建议用户在命名时全部使用小写文件名。 3.不带空格以及特殊字符 不同的解析器对空格等符号的解析结果不同,例如,某些解析器会把空格视为某个十六 进制的数值,因此建议用户使用不带空格的单词作为文件对象的名称。 在文件以及文件夹的命名中避免使用特殊符号。特殊符号包括/、\、?、%、*、:、|、"、 <、>等,会导致网站不能正常工作的字符。尽管允许使用其他特殊字符,但最好仅使用字 母数字字符、连字符和下画线。 为了使某个对象的文件名独一无二,用户可以通过使用“_”符号更加详细地描述文件 名。在某些命名用词中,可以根据词义使用连字符将它们组合起来。例如,某对象的文件名 可以是jd_background_17 。 文件夹的名称最好不要采用诸如“,”“。”“;”“:”“”“”(空格)等符号,因为不同的操作 系统平台对这些符号的使用限制是不一样的。如果非要(.) 进行命名区分,请对比下面的命名 (以我的校园/校园书屋为例): wodexiaoyuanxiaoyshuwu20010220 wodexiaoyuan-xiaoyshuwu2001-02-20 wodexiaoyuan_xiaoyshuwu20010220 上面3组命名中,建议采用最后一(_) 种。(_) 按照栏目或日期进行命名,名称采用下画线连 接,所有的操作系统均支持这种命名方式。文件名的长度可以不限,但也不要太长,太长的 话不便于记忆。 4.以字母开始 有些浏览器不接受以数字开头的文件名。例如,在某些浏览器中的JavaScript脚本内 部,如果使用ala23这样的名称,就不会出现问题,而如果使用23ala这样的名称,就会 发生故障。 phph 除上述原则外,还需要注意一些其他情况,如文件名与系统的冲突。某些文件名虽然满 足上述标准,但还会导致故障,原因是它们与系统产生了冲突。 需要注意的是,网站文件或文件夹尽量避免使用中文字符命名。 如果某个对象的名称无法被某个解析器识别,就有可能导致故障,更麻烦的是,用户可 能很难发现导致该问题的原因。例如,某个具体的特效无法正确显示,或者在某个特殊阶段 无法正确显示,有时故障可能只会在某种特殊情况或在使用某个浏览器时发生,而在其他情 况下保持正常,这时用户很难分析出故障是由于命名问题而导致。 由于需要命名的对象的种类很多,对这些对象进行解析的引擎工具也很多,因此,用户 在给这些对象命名时应遵循一个标准,以确保兼容性。