任务1 站点的创建与管理

任务说明

本任务将创建一个Dreamweaver CS6站点，并对该站点进行管理，最终效果如下图所示。

任务目标

通过本任务的学习，读者能够掌握如何创建站点，如何管理站点，以及如何新建、编辑文件和文件夹。

实训步骤

（1）在D盘创建文件夹website，将文件夹D：\website作为网站的本地根目录。制作网站的过程中，有关的网页、图片、动画、视频等文件与素材统一存放在该文件夹内。

提示：网站制作对文件和文件夹命名的要求：

①网站的本地根目录不推荐存放在系统的桌面。

②文件或文件夹的名称建议使用小写英文字母、拼音或数字。

③文件或文件夹的名称不可以使用中文和空格之类的非法字符。

④文件或文件夹的命名应有规律，易于理解，便于日后管理。

⑤网站素材应该分类存放在不同的文件夹，如图片文件存放在根目录下名为“images”的文件夹中，其他文件可根据其所属类型，存放于不同的文件夹。

（2）运行Dreamweaver CS6，默认启动界面如图1-1-1所示。

（3）在弹出的对话框中，单击“新建—Dreamweaver站点”弹出“站点设置对象”对话框，创建新的Dreamweaver站点，如图1-1-2所示。或者执行“站点—新建站点”命令，如图1-1-3所示。

（4）选择“站点设置对象”对话框左侧的“站点”选项，在右侧的“站点名称”中输入“webpage”；单击“浏览文件夹”按钮，弹出“选择根文件夹”对话框，在该对话框中选择站点的本地根目录位置D：\website，如图1-1-4所示；单击“选择”按钮后返回“站点设置对象”对话框，如图1-1-5所示；最后单击“保存”按钮，完成站点的创建，如图1-1-6所示。

（5）设置Dreamweaver的首选参数。执行“编辑—首选参数”命令，弹出“首选参数”对话框，左侧选择“常规”，右侧勾选“允许多个连续的空格”，如图1-1-7所示。左侧选择“新建文档”，在右侧“默认编码”中选择所需的文档编码类型，默认编码为“Unicode（UTF-8）”，本书的所有网页文件采用“Unicode（UTF-8）”编码；设置该选项后，在“文件”面板中新建的网页文件将全部采用所设的编码类型，如图1-1-8所示。

提示：对于已有的网页文件，可执行“修改—页面属性—标题/编码”命令重新设置文档的编码类型。

（6）打开如图1-1-6所示的“文件”面板，在想新建文件夹的位置右击，在弹出的快捷菜单中选择“新建文件夹”命令，如图1-1-9所示；将新建的文件夹命名为“images”，如图1-1-10所示。右击要新建文件夹的位置，在弹出的快捷菜单中选择“新建文件”命令，如图1-1-9所示；将新建的文件命名为“0101.html”，如图1-1-10所示。

（7）选中要移动的文件或文件夹，直接拖曳文件或文件夹到相应的位置即可完成移动操作。另外，选中要编辑的文件或文件夹，右击弹出快捷菜单，可执行“编辑”命令，进行剪切、拷贝、粘贴、删除、复制和重命名的操作，如图1-1-11所示。

（8）执行“站点—管理站点”命令，或在“文件”面板中执行“管理站点”命令，可对站点进行管理，如图1-1-12和图1-1-13所示。

（9）执行“管理站点”命令后打开“管理站点”对话框，如图1-1-14所示。

（10）在“管理站点”对话框中，选中要编辑的站点，点击“编辑当前选定的站点”按钮，打开如图1-1-5所示的“站点设置对象”对话框，对站点进行编辑。另外，在“管理站点”对话框中还可以点击按钮删除当前选定的站点，点击按钮复制当前选定的站点，点击按钮导出当前选定的站点（保存为“站点定义文件.ste”），点击按钮从Dreamweaver站点定义文件中导入站点，点击按钮创建Dreamweaver站点。

（11）在“文件”面板中，双击需要编辑的网页文件（如0101.html），可以在Dreamweaver的“文档编辑区”打开相应的文件进行编辑，如图1-1-15所示。

（12）如图1-1-15所示的Dreamweaver CS6用户界面，可通过执行“查看”菜单的命令或“窗口—工作区布局”的命令进行工作区的布局，如图1-1-16和图1-1-17所示。

（13）Dreamweaver CS6用户界面的各主要组成部分介绍如下：

①“菜单栏”，如图1-1-18所示。

②“文档编辑区”，如图1-1-19所示。

③“状态栏”，如图1-1-20所示。

④“属性面板”，如图1-1-21所示。

⑤“面板组”，如图1-1-22所示（可以通过“窗口”菜单显示其他面板）。

拓展练习

按照以下要求建立Dreamweaver站点（本地路径为D：\CS6）：①站点文件夹中包括主页文件（文件名为“index.html”），文件夹html、images、admin、database、others；②在文件夹images中建立dopic与donepic两个子文件夹；③在文件夹admin中创建页面文件adminindex.html。