Dreamweaver CC2018中文版入门与提高
上QQ阅读APP看书,第一时间看更新

2.1 创建本地站点

制作一个能够被其他人在浏览器上浏览的网站,首先需要在本地磁盘上制作这个网站,然后将这个网站上传到因特网的Web服务器上。放置在本地磁盘上的网站称为本地站点,位于Web服务器中的网站称为远程站点。Dreamweaver CC 2018提供了对本地站点和远程站点的强大的管理功能。

2.1.1 建立站点

在Dreamweaver中建立站点很方便,操作步骤如下。

(1)打开Dreamweaver CC 2018,执行“站点”|“新建站点”命令,弹出“站点设置对象”对话框,如图2-1所示。

图2-1 “站点设置对象”对话框(1)

(2)在“站点名称”文本框中输入站点名称,并指定本地站点文件夹的路径。

 站点名称:用于设置新建站点的名称。该名称仅供参考,并不显示在浏览器中。

 本地站点文件夹:用于设置站点在本地计算机中的存放路径,可以直接输入,也可以通过用鼠标指针单击右侧的“浏览文件夹”按钮,打开“选择根文件夹”对话框,从中找到相应的文件夹后保存。

(3)单击“高级设置”选项卡,然后在展开的子菜单中选择“本地信息”,如图2-2所示。在这里设置站点的默认图像文件夹、文档路径的类型和站点地址。

 默认图像文件夹:用于设置本地站点图像文件的默认保存位置。对于比较复杂的网站,图片往往不只存放在一个文件夹中,所以实用价值不大。

 链接相对于:用于设置文档路径的类型:文档相对路径、站点根目录相对路径。默认方式为文档相对路径。

 Web URL:用于设置网站在因特网上的网址,以便Dreamweaver CC 2018对文档中的绝对地址进行校验。如果目前没有申请域名,可以暂时输入一个容易记忆的名称,等将来申请域名后,再用正确的域名进行替换。

 区分大小写的链接检查:选中此项后,对站点中的文件进行链接检查时,等将检查链接的大小写与文件名的大小写是否相匹配。此选项用于文件名区分大小写的UNIX系统。

 启用缓存:创建本地站点的缓存以加快站点中链接更新的速度。

图2-2 “站点设置对象”对话框(2)

至此,一个简单的站点定义完成,单击“保存”按钮,即可完成站点创建,并关闭对话框。此时,“文件”面板展开,并自动切换到上述步骤创建的站点。

如果要创建动态网页,还需要测试服务器的服务,以便在进行操作时生成和显示动态内容。测试服务器可以是本地计算机、开发服务器、中间服务器或生产服务器。设置测试服务器的步骤如下。

(4)单击“服务器”类别,然后单击“添加新服务器”按钮,如图2-3所示。弹出添加服务器的界面,如图2-4所示。

图2-3 “站点设置对象”对话框(3)

图2-4 “添加服务器”对话框

(5)在“服务器名称”文本框中输入服务器的名称。

(6)在“连接方法”弹出菜单中选择连接到服务器的方式。

在通常情况下,都是先在本地站点中编辑网页,然后再通过FTP上传到远程服务器。在这种情况下应该选择“FTP”,如图2-4所示。

在选择“FTP”后,可以在其下出现的4个文本框中分别填写远程站点的FTP地址、远程站点存放在Web服务器上的文件夹、FTP的用户名和FTP的密码。最后选中“保存”复选框即可保存这些设置,单击“测试”按钮可以测试FTP的连接情况。

提示:FTP地址是计算机系统的完整Internet名称,如ftp.mindspring.com。因此,应输入完整的地址,并且不要附带其他任何文本,特别是不要在地址前面加上协议名。如果不知道FTP地址,可与Web托管服务商联系。

有些读者习惯于在本地计算机上存储文件或运行测试服务器,或连接到网络文件夹,在这种情况下应该选择“本地”|“网络”选项。

(7)在“服务器文件夹”文本框中指定远程文件夹地址。

提示:如果指定的本地文件夹与在运行Web服务器的系统上为站点文件创建的文件夹相同,则不需要指定服务器文件夹。这意味着该Web服务器正在本地计算机上运行。

(8)在“Web URL”文本框中输入Web站点的URL。Dreamweaver CC 2018使用Web URL创建站点根目录相对链接,并在使用链接检查器时验证这些链接。

(9)单击“高级”按钮,切换到“高级”选项卡。在这一步中,可以设置站点需要用到的服务器技术,如图2-5所示。

提示:Dreamweaver CC 2018默认自动将文件推送到测试服务器以便实现在实时视图中无缝编辑动态文档。用户通过取消选中“将文件自动推送到测试服务器”禁用文件自动推送功能。

图2-5 设置服务器模型

(10)单击“保存”按钮,然后在“服务器”类别中,通过单选按钮指定刚添加的服务器为远程服务器或测试服务器,如图2-6所示。

图2-6 设置服务器类别

注意:指定测试服务器时,必须在“基本”选项界面中指定Web URL。Dreamweaver CC 2018允许指定特定服务器作为测试服务器或远程服务器,但不能同时指定两者。如果打开一个站点或导入在早期版本的Dreamweaver中创建的站点的设置,并指定某个服务器同时作为测试服务器和远程服务器,则系统会创建一个重复的服务器条目。然后,将一个标记为远程服务器(使用_remote后缀),将另一个标记为测试服务器(使用_testing后缀)。

(11)单击对话框中的“保存”按钮,即可关闭“站点设置对象”对话框。至此,站点创建完成。此时的站点为空站点,没有网页。

教你一招:如果本地磁盘上有创建好的网页,也可以将这些现有的网页组织为本地站点打开。例如本地计算机E:\fashion\目录下有一些网页,通过在“站点设置对象”对话框“站点”类别下的“本地站点文件夹”文本框中填入相应的根目录信息,可以将这些网页生成一个站点,便于以后统一管理。从这里也可以看出站点的概念与文档不同。换句话说,站点只是文档的组织形式。

2.1.2 上机练习——创建“美食天下”网站

2-1 上机练习——创建“美食天下”网站

练习目标

2.1.1节简要介绍了创建站点的操作步骤,下面通过实例的讲解进一步掌握建立本地站点的方法和注意事项。

设计思路

首先设置站点的名称、本地站点的文件夹和默认图像文件夹,接着设置本地站点与服务器的连接方式,然后设置站点使用的服务器技术,最后添加测试服务器,完成本地站点的建立。

操作步骤

(1)打开Dreamweaver CC 2018,执行“站点”|“新建站点”命令,弹出“站点设置对象”对话框,输入站点名称“美食天下”;在“本地站点文件夹”文本框中输入站点文件夹路径“G:\food\”,如图2-7所示。

图2-7 设置站点名称和文件夹

(2)展开“高级设置”分类,选择“本地信息”分类,在“默认图像文件夹”文本框中输入“G:\food\images\”;链接相对于“文档”;“Web URL”显示为无网络链接,如图2-8所示。

(3)切换到“服务器”分类,单击“添加新服务器”按钮,在弹出的屏幕中输入服务器名称foodServer;连接方法选择“本地/网络”;服务器文件夹设置为G:\food\,此时Web URL自动填充为http://localhost/,如图2-9所示。

(4)由于本网站将使用ASP.NET制作动态网页,因此,单击“高级”按钮,在“服务器模型”下拉列表中选择“ASP.NET VB”,其他选项保留默认设置,如图2-10所示。

图2-8 设置图像文件夹和Web URL

图2-9 填写服务器信息

图2-10 定义使用的服务器技术

(5)单击“保存”按钮,返回“站点设置对象”对话框,此时在服务器列表中可以看到添加的服务器,Dreamweaver CC 2018默认将该服务器设置为远程服务器,单击“测试”单选按钮,将它设置为测试服务器,如图2-11所示。

(6)单击“保存”按钮,关闭对话框。“文件”面板将自动展开,并切换到“美食天下”站点,如图2-12所示。

(7)执行“站点”|“管理站点”命令,在打开的“管理站点”对话框中也可以看到新创建的站点,如图2-13所示。

图2-11 设置服务器类别

图2-12 显示新创建的站点

图2-13 “管理站点”对话框