要制作一个能够被公众浏览的网站,首先需要在本地磁盘上制作这个网站,然后把这个网站上传到Internet的Web服务器上。放置在本地磁盘上的网站被称作本地站点,处于Internet上Web服务器里的网站被称作远程站点。Dreamweaver CS5提供了对本地站点和远程站点强大的管理功能。
在了解了Dreamweaver CS5的工作界面后,下面就要迈出制作网页的第一步了。无论是一个网页制作的新手,还是一个专业的网页设计师,都要从站点规划和定义本地站点开始。所谓本地站点,就是指本地硬盘中存放远程网站所有文档的文件夹。建立网站的通常办法是,在本地硬盘建立一个文件夹,用来存放网站的所有文件,以后就在该文件夹中创建和编辑文档。待网页设计和测试好后,再用远程上传工具,把它们上传发布到网站上,供浏览者查询浏览。
1.站点结构
如果没有对整个网站站点的结构进行认真研究就匆匆上马,日后的维护工作量将会很大,网页的布局也会杂乱无章、风格各异。因此,一开始就要精心规划好整个站点,把站点资源分门别类,存于不同文件夹中,便于日后维护与管理。如图2-1所示是一个简单站点的结构。
在上述站点结构中,文件名一般用自己便于记忆的英文单词或缩写来命名,如Webpage文件夹用来存放与网站设计有关的网页,data文件夹则用来存放数据库方面的内容,这样便于查找和管理,在需要的情况下,也可以创建子文件夹。
图2-1 站点结构图
提示
设置站点结构时,本地和远程站点应该使用相同的结构。先用DreamweaverCS5建好本地站点,然后设置好站点上传的参数,按一定的层次结构把所有的文档上传到远程站点,Dreamweaver CS5也能确保把本地结构精确地复制到远程站点。
2.站点导航
做站点规划时,还要考虑站点导航系统的设计。浏览者进入网站的主要目的,就是要找到他所需要的信息。这就要求我们在网站设计时合理设置好导航栏,帮助浏览者找到他所需要的信息,而且也要让他清楚现在处在网站的什么位置以及怎样返回到顶层的页面。
此外,在规模较大的网站中,应该设置搜索功能和索引,让浏览者很快找到他们所需要的信息。还要提供一种反馈渠道,让浏览者能够与网站管理员或与本网站有关的其他人员联系。
3.模板和库
使用Dreamweaver CS5的模板和库,可以在不同的文档中重用页面布局和页面元素,给网页的维护带来很大的方便。因此,在规划站点时也应该考虑模板和库的使用。
例如,如果网站中有很多网页使用相同的布局,最好使用Dreamweaver CS5的创建模板功能为这些布局相同的网页设计一个模板,然后以该模板为基础创建新的网页。当要修改这些网页的布局时,只要修改网页的模板就可以了。对模板的修改将反映到所有应用该模板的网页上,无须一页一页进行修改,这就大大方便了我们对网页的维护。
如果有某一元素(如一幅图像)将在网站的很多页面中使用,应该先设计好该元素,并把它存入库中,然后在网页中调用它。当要修改该元素时,只要修改库中的该元素即可,修改后的元素将出现在所有调用它的网页上,免除了逐页修改的麻烦。
4.定义本地站点
规划好站点之后,就可以着手定义本地站点了。本地站点就是网站文件的本地存储区。定义本地站点要求给站点命名并指定一个计划用于存储所有网站文件的本地根文件夹。
提示
定义站点时,不要使用驱动器作为站点的根,也不要使用Dreamweaver CS5的文件夹。一个好的组织方法是创建一个新的文件夹,然后在这个文件夹中创建本地根文件夹。
定义本地站点的步骤说明如下。
1 选择菜单命令“站点”→“新建站点”,如图2-2所示。
2 在弹出的“站点设置对象”对话框中,选择左侧类型列表中的“站点”项,如图2-3所示,并进行如下设置。
图2-2 设置新站点
图2-3 站点设置对象对话框
在“站点名称”文本框中输入一个站点名。该站点名出现在“站点”窗口和“站点”→“管理站点”中。站点名称可以是任何字符。
在“本地站点文件夹”文本框中,指定本地用于存放所有站点文件的文件夹。当Dreamweaver CS5解析相对根的链接时,就建立相对于此文件夹的链接。单击该文本框右边的文件夹图标,选择想要的文件夹,也可以在文本框中直接输入路径和文件名。
3 单击“保存”按钮,完成设置。
4 单击“保存”按钮后,即弹出“文件”面板,如图2-4所示。
图2-4 “文件”面板
使用“文件”面板中的按钮和命令,可以设置“文件”面板显示的内容和显示形式,实现对本地站点和远端站点中文件的控制和传输。“文件”面板中主要按钮的作用如表2-1所示。
表2-1 “文件”面板中主要按钮的作用说明
在Dreamweaver CS5的“文件”面板中,还包括两个下拉列表:左侧的“站点”下拉列表中列出了在Dreamweaver CS5中定义的所有站点;右侧的“视图”下拉列表中显示了可以选择的站点视图的类型,本地视图、远程视图、测试服务器和地图视图。
选择要编辑的站点,鼠标单击如图2-5所示的“编辑”按钮,可以打开站点设置面板修改选中站点的属性。
面板中其他按钮的功能说明如下。
复制: 复制站点。
删除: 删除站点(只是从Dreamweaver的站点管理器中删除,文件还保留在硬盘中)。
导出: 把选中站点的设置导出成为一个XML文件,在今后需要的时候还可以再次导入。
导入: 把已导出站点设置的XML文件再次导入。
图2-5 编辑站点
当在本地站点中把整个网站制作完毕,需要上传到远端站点中时,我们就可以在Dreamweaver CS5中定义远端站点了。在开始定义远端站点之前,必须要了解远端站点的FTP地址、用户名和密码。如果还没有一个空间和域名的话,可以到网络公司去付费申请一个。如果忘记用户名和密码,也可以打电话或者发邮件到申请空间和域名的网络公司去查询一下。在收集好这些信息后,就可以开始定义远端站点了。具体步骤说明如下。
1 单击“文件”面板上的“站点”下拉列表,选择“管理站点”选项,如图2-6所示。
提示
合理的站点设置对象和站点结构,是每一个网站制作前所必需的,尤其是内容很多的大型网站。可能在定义的时候工作量会大一些,但是有了好的站点结构,当我们查找和更新网站中的页面或者其他文件的时候将会非常方便和快捷。
2 在弹出的“管理站点”对话框中选择刚刚创建好的站点“我爱音乐网”,单击“编辑”按钮,如图2-7所示。
图2-6 管理站点命令
图2-7 “管理站点”对话框
3 在弹出的“站点设置对象”对话框中选择左侧的“服务器”项,然后单击窗口右侧的“+”按钮,如图2-8所示。
图2-8 单击“+”按钮
4 在弹出的面板中进行相应的设置,如图2-9所示。
5 该面板中的各项设置具体说明如表2-2所示。
图2-9 弹出的设置面板
表2-2 远程站点设置中各个选项的作用说明
远端站点参数设置完毕后,就可以把本地站点中制作好的网站内容上传到远端的服务器中,这样别人就可以通过浏览器来进行访问了。
通常Dreamweaver站点管理器要对多个网站进行管理,这就需要专门的工具完成站点的切换、添加、删除等操作。打开“文件”面板,单击“站点”下拉列表,选择“管理站点”,可以打开多站点管理窗口,如图2-10所示。多站点管理窗口可以实现如下功能。
用Dreamweaver CS5编辑网页或进行网站管理时,每次只能操作一个站点,在站点面板左侧的下拉列表框上选中某个已创建的站点,就可以切换到这个站点进行操作,如图2-10左侧的文件面板所示。
另外,也可以在图2-10右侧的“管理站点”对话框中选中要切换到的站点,单击“完成”按钮,这样在站点管理器中就会显示选择的站点。
图2-10 站点的切换管理