阿飙专线Dreamweaver直通车──站点的创建和管理

 梦觉 
2001年 42期

#1    站点的创建和管理
　　　　编者按：很多朋友在学习时喜欢随心所欲地实验软件的各种功能，而缺乏系统的、正确的学习方法。网页制作面对的不是一个个孤立的页面，而是一组互相关联的站点中的文件群，因此本教程将从网站的角度来串讲Dreamweaver中的各项主要功能，在此以规范化的网站制作流程为线索，帮助大家以正确的学习步骤来逐渐接触和掌握Dreamweaver软件的主要功能，把已有的零散知识条理化和系统化。
　　　　“阿飙专线”直通车系列应广大读者要求再次开通，小编非常感谢大家的支持和信任。这次我们邀请了一位大师，通过这个Dreamweaver系列，可以使大家在使用过程中能尽快进入网页制作之门，减少常见的一些困惑和疑问。我们将从“站点的创建和管理、页面的合理布局、网页内容处理、网页设计、美化网页、动态交互、制作效率、站点维护”八个方面进行讲解，并且每篇文章都后附有相关内容的技巧，非常精彩哦！如果你刚接触Dreamweaver软件，这个系列你可别错过了：）
　　　　现在先给大家介绍Dreamweaver的站点管理功能（Site）。我们知道网站所面对的不是单独页面的集合，更多的还包含其他诸如图片声音、外部程序等等相关联的内容，因此如何正确的组织它们变得非常重要。很多初学者常常遇到如下一些问题：为什么我的网页传上去后看不到图片？为什么我的文件链接是错的？这些问题其实很多都是在开始之前，没有合理的创建好你的站点。良好的规划和准备工作可以减少很多的后续错误。
　　#2    一、站点目录的建立
　　　　在开始建设你的网站前，有必要建立好一个新的目录，你所搜集的一些资料如图片、声音、文字等都需要按照合理的原则放在这个目录下。我们假设要制作一个关于个人作品和教程的个人网站。首先在我们的硬盘上建立一个目录ExampleSite，在这个目录下面建立一个Images目录放置相关的图片；同时建立几个与栏目相关的目录，最后的目录结构如^42040701a^1所示；
　　　　这样的好处是站点结构清晰，管理起来方便。
　　#2    二、创建本地站点
　　　　虽然你的目录结构不一定要和这里一样，但是你应该有这种清晰的思路，即各个目录都是按照什么原则组织的。完成上面的目录规划以后，我们就可以启动Dreamweaver软件继续我们的工作了。启动Dreamweaver软件后，从主菜单中执行Site/New Site命令。屏幕上会出现Site Definition对话框，该对话框包含了5个不同的内容：Local Info（本地信息）、Web Server Info（Web服务器信息）、Check In/Out（登记/隔离）、Site Map Layout（站点布局图）、Design Note（设计注释）。对于我们普通的网页制作者来说，最主要的就是前面两个关于本地站点信息和Web服务器信息。^42040701b^2为Local Info（本地信息）：
　　　　Site Name（站点名称）：输入你为自己的站点所起的单独名称。
　　　　Local Root Folder（本地根目录文件夹）：选择你刚才创建的、放置你的站点所有文件的根目录。
　　　　Enable Cache（启用缓存）：这将把你的站点内的文件信息记录在一个缓存文件中，可以加快今后检查文件链接信息的速度。
　　#2    三、创建远程站点信息
　　　　我们在自己站点内做好的所有文件最终都要上传到Internet上的一个服务器中，才可以被其他人访问到。一般来说很多朋友都是申请一些免费的主页空间，根据这些空间的提供商给你的站点信息和你的个人资料，我们需要在定义站点时，将这些资料填好。^42040701c^3为Remote Info（远程信息）：
　　　　Remote Info（远程信息）：这里设置你的站点文件将来传到网上时，远端服务器的信息。绝大多数免费个人主页服务都提供了FTP方式的服务，我们从Access下拉选项里选择FTP方式并进行详细设定。
　　　　FTP Host：设置你将要上传文件的服务器地址。
　　　　Host Directory：主机目录设定了你本地站点根目录对应的远程服务器主机下那个子文件夹。
　　　　Login和Password分别设定你在远程服务器上的用户名和密码。
　　#2    四、快速搭建站点文件结构
　　　　在设置好你的站点信息后，就可以开始创建你的站点文件。有些朋友都是使用File→New命令开始一个一个地创建页面，其实这并不是一个好的工作习惯，因为这样你将不会对站点的整体结构有良好的控制和把握。好的工作方式是在站点窗口完成站点的基础页面的搭建和规划，这使你可以一开始就清楚了解你的工作范围并将你的设计想法变为初略的布局。下面我们就在站点窗口开始我们的工作。
　　　　打开站点窗口，我们可以看到^42040701d^4所示的窗口：
　　　　窗口的左边是将来上传后的远程站点结构，如果你已经链接到你的远端站点，这里将显示远端站点的目录结构。窗口的右边是本地站点的目录结构，我们的工作将从这里开始。
　　　　首先需要在站点根目录下创建index.htm文件，^42040701e^5所示：
　　　　右键点击站点根目录，在弹出菜单中选择New File，并定义为index.htm则Dreamweaver会定义一个index.htm页面，用同样的方法你可以在不同的目录里快速创建你需要的其他文件。^42040701f^6所示：
　　　　你也可以用这种方法快速创建新的文件夹。利用这种方法你可以很快了解你的工作量和目录结构，在后面添加文件之间的链接时，只须简单地选择这些文件即可。这有助于你的站点管理工作。
　　#2    五、站点管理注意事项
　　　　很多朋友常常会问，我为什么要建立站点？我就做简单的几个页面也需要这么繁琐的创建站点吗？创建站点对于后面的网页制作有什么好处？在这里需要强调的是创建好站点后，Dreamweaver就可以对站点内的所有文件进行统一的管理，并能很好地组织和解释他们之间的相互链接关系。由于网页就是一些文件的相互链接和组织，所以有必要简单理解链接的几种格式：绝对地址、相对地址。
　　　　绝对地址简单地说就是我们常用的网站地址，一般来说当我们需要链接到不属于我们自己网站内的某个页面时，就需要用绝对地址来表示这个外部的页面或网址。当然你也可以用你自己的网页绝对地址来表示你的页面，但这样做非常不好，因为如果你改变了你的网站地址，你就必须修改每一个相关的链接。
　　　　相对地址是指以当前站点内的根文件夹为起点，其他各个文件用与它的相互关系来表示。相对路径与站点将来的位置没有关系，这可以简化输入，并方便站点的管理，在以后站点可能出现转移时也不会出现问题。以我们前面创建的文件为例，当我们想要在index.htm文件中添加链接到Aboutme.htm文件的链接时，只须要写：About/aboutme.htm即可，而在aboutme.htm文件中添加返回index.htm文件的地址时，只须写：../index.htm，../代表返回上级目录。
　　　　知道了绝对地址和相对地址后我们再来看站点管理的意义，当我们建立了站点后，Dreamweaver就可以将各个文件之间的相互关系用相对路径来表示清楚，而如果你没有建立站点，你的文件之间的互相链接的表示方法是类似这样的：file://yourpath/yourfile.htm。这样当你将文件上传到远端服务器上时，浏览器并不会找到你本地机子中的file://yourpah路径，这也是很多初学者常犯的错误之一，导致很多图片显示不出来，链接无效等等。
　　#1    本期技巧提示：
　　　　1.使用网站地图可以快速制作网站雏形，并可以方便地在个页面之间加入导航链接。首先按如下图标“Map and Files”打开站点地图窗口；选中index.htm文件；点击并拖动站点导航（Site Navigation）窗口中index.htm文件右上角的小圆圈，将它拖动到左边文件窗口中的某一个文件上，^42040701g^7。
　　　　Dreamweaver会自动将其他页面的链接加入到index.htm文件中，同样的执行此操作多次后，导航窗口（^42040701h^8）。
　　　　此时打开index.htm文件，可以看到相应的连接文字和链接都已经添加好了。
　　　　2.改变网页位置或文件名称，Dreamweaver会自动更新链接，自动复制文件到当前默认站点。例如我们在站点窗口中改变一个文件的文件名后，Dreamweaver会自动更新链接，自动复制文件到当前默认站点。例如我们在站点窗口中改变一个文件的文件名后，Dreamweaver会自动提示你是否需要更新与此文件相关的所有链接。
　　　　3.自动生成站点地图（MAP）并可保存输出。打开File->Save Site Map命令，在弹出对话框中输入保存的文件名，Dreamweaver在当前站点的根目录下会自动生成一个bmp或png格式的站点图片。
　　　　4.快速修改页面标题。在站点窗口中的View命令下，执行Show Page Title命令，可以使站点导航窗口中显示每个文件的标题，即Title标签。随后我们可以在这里方便的修改页面的标题，而不需打开文件。
　　　　好了，关于Dreamweaver中站点的创建和管理我就介绍到这里，虽然这一讲的内容比较枯燥和文字化，不很直观，但是它对今后的工作有很大的帮助，良好的开始是成功的一半，下一讲开始我们来逐步介绍Dreamweaver的各项主要功能。
　　 
 