2.1 入门——基本概念与基本操作_Dreamweaver CS6网页设计入门、进阶与提高-QQ阅读男生武侠网

上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

2.1 入门——基本概念与基本操作

要制作一个能够被公众浏览的网站，首先需要在本地磁盘上制作这个网站，然后把这个网站上传到Internet的Web服务器上。放置在本地磁盘上的网站被称作本地站点，处于Internet上Web服务器里的网站被称作远程站点。Dreamweaver CS6提供了对本地站点和远程站点强大的管理功能。

2.1.1 站点的规划和定义

在了解了Dreamweaver CS6的工作界面后，下面就要迈出制作网页的第一步了。无论是一个网页制作的新手，还是一个专业的网页设计师，都要从站点规划和定义本地站点开始。所谓本地站点，就是指本地硬盘中存放远程网站所有文档的文件夹。建立网站的通常办法是，在本地硬盘建立一个文件夹，用来存放网站的所有文件，以后就在该文件夹中创建和编辑文档。待网页设计和测试好后，再用远程上传工具，把它们上传发布到网站上，供浏览者查询浏览。

1．站点结构

如果没有对整个网站站点的结构进行认真研究就匆匆上马，日后的维护工作量将会很大，网页的布局也会杂乱无章、风格各异。因此，一开始就要精心规划好整个站点，把站点资源分门别类，存于不同文件夹中，便于日后维护与管理。如图2-1所示是一个简单站点的结构。

图2-1 站点结构图

在上述站点结构中，文件名一般用自己便于记忆的英文单词或缩写来命名，如Webpage文件夹用来存放与网站设计有关的网页，data文件夹则用来存放数据库方面的内容，这样便于查找和管理，在需要的情况下，也可以创建子文件夹。

提示

设置站点结构时，本地和远程站点应该使用相同的结构。先用Dreamweaver CS6建好本地站点，然后设置好站点上传的参数，按一定的层次结构把所有的文档上传到远程站点，Dreamweaver CS6也能确保把本地结构精确地复制到远程站点。

2．站点导航

做站点规划时，还要考虑站点导航系统的设计。浏览者进入网站的主要目的，就是要找到他所需要的信息。这就要求我们在网站设计时合理设置好导航栏，帮助浏览者找到他所需要的信息，而且也要让他清楚现在处在网站的什么位置以及怎样返回到顶层的页面。

此外，在规模较大的网站中，应该设置搜索功能和索引，让浏览者很快找到他们所需要的信息，还要提供一种反馈渠道，让浏览者能够与网站管理员或与本网站有关的其他人员联系。

3．模板和库

使用Dreamweaver CS6的模板和库，可以在不同的文档中重用页面布局和页面元素，给网页的维护带来很大的方便。因此，在规划站点时也应该考虑模板和库的使用。

例如，如果网站中有很多网页使用相同的布局，最好使用Dreamweaver CS6的创建模板功能为这些布局相同的网页设计一个模板，然后以该模板为基础创建新的网页。当要修改这些网页的布局时，只要修改网页的模板就可以了。对模板的修改将反映到所有应用该模板的网页上，无须一页一页进行修改，这就大大方便了我们对网页的维护。

如果有某一元素（如一幅图像）将在网站的很多页面中使用，应该先设计好该元素，并把它存入库中，然后在网页中调用它。当要修改该元素时，只要修改库中的该元素即可，修改后的元素将出现在所有调用它的网页上，免除了逐页修改的麻烦。

4．定义本地站点

规划好站点之后，就可以着手定义本地站点了。本地站点就是网站文件的本地存储区。定义本地站点要求给站点命名并指定一个计划用于存储所有网站文件的本地根文件夹。

提示

定义站点时，不要使用驱动器作为站点的根，也不要使用Dreamweaver的文件夹。一个好的组织方法是创建一个新的文件夹，然后在这个文件夹中创建本地根文件夹。

定义本地站点的步骤说明如下。

1 选择菜单命令“站点”→“新建站点”，如图2-2所示。

图2-2 设置新站点

2 在弹出的“站点设置对象”对话框中，选择左侧类型列表中的“站点”项，如图2-3所示，并进行如下设置。

图2-3 站点设置对象对话框

在“站点名称”文本框中输入一个站点名。该站点名出现在“站点”窗口和“站点”→“管理站点”中。站点名称可以是任何字符。

在“本地站点文件夹”文本框中，指定本地用于存放所有站点文件的文件夹。当Dreamweaver CS6解析相对根的链接时，就建立相对于此文件夹的链接。单击该文本框右边的文件夹图标，选择想要的文件夹，也可以在文本框中直接输入路径和文件名。

3 单击“保存”按钮，完成设置。

4 单击“保存”按钮后，即弹出“文件”面板，如图2-4所示。

图2-4 “文件”面板

使用“文件”面板中的按钮和命令，可以设置“文件”面板显示的内容和显示形式，实现对本地站点和远端站点中文件的控制和传输。“文件”面板中主要按钮的作用如表2-1所示。

表2-1 “文件”面板中主要按钮的作用说明

在Dreamweaver CS6的“文件”面板中，还包括两个下拉列表：左侧的“站点”下拉列表中列出了在Dreamweaver CS6中定义的所有站点；右侧的“视图”下拉列表中显示了可以选择的站点视图的类型，本地视图、远程视图、测试服务器和地图视图。

2.1.2 站点的其他操作

选择要编辑的站点，鼠标单击如图2-5所示的“编辑”按钮，可以打开站点设置面板修改选中站点的属性。

图2-5 编辑站点

面板中其他按钮的功能说明如下。

复制：复制站点。

删除：删除站点（只是从Dreamweaver的站点管理器中删除，文件还保留在硬盘中）。

导出：把选中站点的设置导出成为一个XML文件，在今后需要的时候还可以再次导入。

导入：把已导出站点设置的XML文件再次导入。

当在本地站点中把整个网站制作完毕，需要上传到远端站点中时，我们就可以在Dreamweaver CS6中定义远端站点了。在开始定义远端站点之前，必须要了解远端站点的FTP地址、用户名和密码。如果还没有网站空间和域名的话，可以到网络公司去付费申请一个。如果忘记用户名和密码，也可以打电话或者发邮件到申请空间和域名的网络公司去查询一下。在收集好这些信息后，就可以开始定义远端站点了。具体步骤说明如下。

1 展开“文件”面板上的“站点”下拉列表，选择“管理站点”选项，如图2-6所示。