结合实例浅谈网站结构

Macromedia公司的惊世之作——Dreamweaver MX发布之后，立刻吸引了众多网页制作爱好者的注意。从XP风格的精美大图标到重新整合后既好看又实用的界面，Dreamweaver MX带给了人们耳目一新的感觉；但这还不是最重要的，Dreamweaver MX最大的改进乃是增加了对ASP、PHP等网络编程语言的强力支持——无论高手还是新手（网络世界里没有低手，只有新手）都能在Dreamweaver MX中得到自己想要的东西。

首先说明，本文不是针对使用网络编程语言的高级使用者，而是针对使用免费空间的广大无产阶级网络爱好者（笑），因此不涉及有关网络编程语言的问题。

Dreamweaver MX的界面和以前颇为类似（当然），但风格却迥然不同。浮动的工具栏、属性栏终于固定下来了，而且和整个工作台整合的又是那么和谐，用起来应该说是更加顺手了。（当然高分辨率会让工作效率进一步提高。）但与此相对应，变化过大的部分老用户肯定就会不适应；在缺省状态中，Dreamweaver MX的站点管理器（Site Manager）和Dreamweaver4的差别很大。我们这就来解说一下。

在Dreamweaver4的缺省状态下，只要打开一个编辑窗口，就会出现站点管理器，就算编辑的只是单个网页（如寄给朋友的超文本电子贺卡）也是如此。这么做当然是有其道理的，Dreamweaver的强大不单表现在编辑网页上，在网站管理方面的表现也是有口皆碑的；而好的表现自然依赖于严格的控制，虽然其内在机制对普通用户来说是不可见的。但Dreamweaver MX却改变了这一点：首次打开Dreamweaver MX，你会发现站点管理器已经无影无踪了！怎么会这样？别着急，Macromedia这么做是有其深意的，我们不妨打开右边众多的工具标签，从中找到“文件”（File）工具。怎么样？原来，Dreamweaver MX中，站点管理器作为一个普通的工具，已经集成到整个编辑界面中了。（当然也可以选择将它恢复成原来的样子。）但这个站点管理器和以前稍微有点不同，我们结合实例来看看如何使用它。

·添加站点

如前所说，Dreamweaver MX里的“文件”工具就是原来的站点管理器（你也可以选择“站点”（Site）窗口的“站点文件”（Site File）或“站点视图”（Site Map）来打开它）。在一开始没有站点的时候，会出现很明显的蓝色的“添加新站点”（Adding a New Site）。点击它来建立一个新站点。（图一）

Dreamweaver MX中添加新站点的工作是通过一个向导来完成的，值得注意的是如果使用800 x 600或更低的分辨率的话，显示上就会出现问题。（这也从侧面说明Macromadia是确信全世界都使用大显示器了……看看Flash MX，打开属性窗口后在800乘600分辨率下的工作区简直小得可怜……）向导有“基本”（Basic）和“增强”（Advanced）两个模式，其实就是使用向导和自己填表；增强模式需要对网络有比较深入的了解，因此建议使用基本模式。

编辑文件（Editing Files）第一步，是输入站点名称。最好起一个具有描述性的名字，比如在这个例子中是“SuperArt@eTang”；SuperArt是网站的名字（“超级艺术”），后面的@eTang说明是亿唐分站。（图二）

第二步是询问主页空间是否支持诸如ColdFusion, ASP.Net, ASP, JSP或PHP之类。通常我们所使用的免费主页空间都是不支持的，因此选“否”。否则就要进行有关设置。（图三）

第三步的上面是一个选择，依次是“本地编辑后上传（推荐）”，“在局域网服务器上直接编辑”，和“使用FTP或RDS直接在服务器上编辑”。当然选第一项，就算真是用包月宽带也要在本地有个备份啊。下面则是你的网站在本地的目录，可以选择已存在的目录（网站存在的情形）和新建的空目录。在这里例子中是C:\My Documents\My Webs\SuperArt.etg\。（图四）

然后是共享文件（Sharing Files）。第一步最上面是选择连接方式，目前绝大多数免费主页都采用FTP（File Transport Protocol，文件传输协议）的方式。FTP下分别是服务器FTP地址（FTP Address）、远程根目录（Remote Folder）、用户名（Login）、密码（Password，可以选择保存密码Save），最下面是测试连接（Testing Connection）。FTP服务器地址在申请空间的时候会得知，比如亿唐的是homeftp.etang.com；而网易可以使用两个，分别是ftp.go.163.com和ftp1.go.163.com（当然这里只能填一个，可以先测试一下本地使用哪个服务器比较好）。远程根目录应该是/，除非是使用朋友的FTP服务器等特殊情况，那样就是/superart/了，不一而足。（图五）

第二步，是否采用“文件进出检查”？采用的话可以保证你和协作者（如果有的话）不能同时更新相同的文件（就是数据库理论中所谓的“X锁”）。缺省不采用，可能会降低效率的说……

做完这些之后，Dreamweaver MX会显示一个摘要画面，点击“完成”（Done）即可。这就完成了站点的设置，随后Dreamweaver MX会自动扫描本地文件夹并分析其中的资源，以便更新使用。好了，现在就可以在“文件”工具的“站点”（Site）标签页里管理站点了。

·关于网站结构

上面我们谈了如何在Dreamweaver MX中加入站点并进行有关设置，关于整个“文件”工具的使用，本文不再赘述。接下来我们主要谈谈制作网站中技术以外的东西，就是如何设计网站结构。

网站设计初期，往往由于结构简单，用户便采用把所有文件放到一个目录下的方法；的确，这样在编辑网页插入超链接、上传网站的方面都比较方便。但网站终究是要发展的（当你看到一个网站里写着“热烈庆祝澳门回归！最近更新：2000年1月6日”，你会怎么想？），长此以往，用户便会发现根目录文件过多，不易整理，于是每加一个新栏目便新建一个文件夹，每次更新都上传新文件夹，结果文件夹越来越多……最后整个网站乱成一团，维护、更新都殊为不易，用户终于激情丧失，网站废弃中。这不能不说是很不明智的，因为这样的结果完全可以避免！下面，我就结合一个实例（同一个例子，“超级艺术”站）来讲解一下如何设计网站结构。

在这之前，首先介绍一下文件和文件夹起名的方法。现在大家都使用Windows ??操作系统，所以对起名大都持“无所谓”的态度；但由于各个FTP服务器采用的技术不同，有可能形成你的文件名无法被系统识别的情况因此建议大家使用DOS时代最基本的“8.3”命名法。

所谓“8.3”命名法，就是文件名由主名（不超过八个字符）+“.”+扩展名（不超过三个字符，一般目录没有扩展名，文件的扩展名为三个字符）构成，字符不包括某些符号（/ \ : “ * ? < >等）和所有全角字符（如汉字）；事实上，一般只使用小写字母和下划线_，这样可以保证最大的兼容性。主名应该做到具有描述性，在八个字符的限制下要做到这一点是很不容易的，对中文网页可以用网页的标题（Title）的汉语拼音首字母来命名，如将“漫画世界”命名为mhsj.htm；这样的优点是根据网页的链接就能找到文件，而且重名的可能性较低（一旦重名则只能在后面加注数字，因此首字母最多可定为六个，如网页“即时战略系统研究”和“即时战略形态意见”可分别命名为“jszlxt01.htm”和“jszlxt02.htm”），但只看文件名的话无法对网页内容作出正确的判断。或者采用网页标题的英文的第一个单词和后面单词的首字母，如“Comix World”（漫画世界）可以命名为comixw.htm，这样根据文件名就能初步推断网页内容，但缺点也是明显的，重名率高且很容易无法坚持这个原则（如首单词过长）。当然还有很多别的方法，如根据内容（链接页面、说明页面、文章页面、音乐页面……）分类等，大家可以在实践中掌握。

至于扩展名，相信大家在上计算机课的时候都知道.com是系统文件（不是商业网站^^）.exe是可执行文件之类的东西了吧！在不涉及网页编程的情况下，常见的网页文件包括.htm或.html超文本文件（但是按照上面所说，不推荐用.html做扩展名；这样有可能降低兼容性。Dreamweaver便使用.htm），.jpg .gif .png .bmp（……）图象文件等等。比较简单，不再赘述；只是要注意最好是小写。有的软件生成的文件（如图象文件）的名字全是大写，最好手动改一下。

接着讨论网站结构。在一开始建站的时候，相信大家都会对自己的网站有着明确的计划吧！我也不例外，我心中的“超级艺术”网站主要是发表自己的一些作品（如图画、照片、文章、歌曲等等），同时向大家推荐一些网上的资源。在这个指导思想下，有必要在建站初期就建立起良好的网站视图。一级目录结构设计如下：

_note		用下划线_打头的文件夹一般是系统文件夹。这个就是Dreamweaver自己使用的文件夹。
superart	最重要的文件夹，包含自己的所有作品
bgm		存放.mid背景音乐
image		存放图像文件
comic		存放和漫画有关的文件
game		存放和游戏有关的文件
software	软件介绍
music		关于音乐的介绍
resource	存放资源文件
drdoom		一个叫做“Doctor Doom的游戏世界”的子网站
wanderer	朋友Blue Wanderer使用的文件夹
ads		存放与广告有关的文件
temp		Temperary，临时文件夹

这样的分类在建站初期就算比较全面了，如果以后要加入关于魔兽争霸三的网页，就可以放在game里；而要加入关于2002世界杯的介绍，就要新建一个sport文件夹了。注意要添加文件夹的话一定要添加大类，否则一级文件夹就会太多，难于控制。

image是网页需要的素材等文件，真正自己的作品应该放在superart里。因此在superart中应该设立二级文件夹：

_note		Dreamweaver保留
image		自己创作的美术作品
photo		自己的照片
music		自己创作的音乐

由于个人网站不可能有太多内容，所谓“漫画”、“游戏”只是提供链接，因此一个专区（如VOS专区、星级专区等）只是一个网页而已。注意引用资源时应注明出处，否则便会被视为盗链，大不了一个个人网站，犯不上（笑）。

而“资源”文件夹中会提供一些资源的本地下载，因为总会有一些特别有价值的东西。尽管少，最好还是分一下类：

software	提供一些软件的本地下载
mp3		存放.mp3格式音乐文件的文件夹，以便本地下载

至于迷你游戏下载等，加个文件夹就可以了。这个架构具有良好的可扩展性。

那么网站的根目录下应该有什么文件呢？最主要的当然是首页index.htm，这是不能缺少的。但是把所有链接都放在里面并不好。因为网站总要包括更新，更新来更新去文件就会越来越大，把一个很大的文件作为首页是不恰当的。因此首页中应该只包含网站的Logo（可以是一幅图片，也可以是Flash动画），“欢迎进入XX网”的说明，友情链接，免费主页要求的广告，计数器等等，总之是一些“五十年不变”的东西。正式的页面可以命名为mainpage.htm或default.htm，当然如果采用Frame架构的就还需要top.htm、bottom.htm、left.htm……等等了。

而规划网站还有一个小技巧：每个目录下都配置一个index.htm文件；也就是说，根目录下的自然是首页，superart目录下的index.htm文件则是介绍自己所有作品的网页，game目录下的index.htm列出所有的游戏页面的名称……这样做的好处是，要访问“超级艺术游戏专区”，只需要输入地址“http://superart.myetang.com/game/”就可以了，既好记又有整体感。当然相应地在更新时工作量就稍微大一些，比如加入一个魔兽三页面，不单要更新首页（或mainpage.htm），还要更新game/index.htm文件。

说到更新，上面谈的架构最大的缺点就是在更新时要频繁更换目录，比如加入魔兽三页面，除了更新根目录下的文件（mainpage.htm）外还要更新game目录下的文件。但和它带来的方便相比，这点工作是微不足道的，况且有些软件如cuteftp中还支持自动更新文件（就是自动查找本地改动过的文件，然后有选择地上传）；规划好自己的网站吧，不要让“发展”造就“终结”！

注：

本文中的“文件夹”（Folder）和“目录”（Directory）不过是同一种事物在Windows和DOS中的不同叫法，大家知道即可。

六月

2003 1