
模块2 Dreamweaver CS5基本操作
实训2 快乐驿站——创建与管理本地站点
实训目的
1.学会本地站点的创建与编辑方法。
2.学会网页文件的新建、保存、预览等基本操作。
实训步骤
1.在D盘根目录中新建文件夹klyz,将素材shixun2文件夹中的所有内容复制到klyz中。运行Dreamweaver CS5,选择菜单“站点→新建站点”命令,弹出“站点设置对象”对话框,如图2-1所示,输入站点名称“快乐驿站”,单击“本地站点文件夹”文本框后的“浏览文件夹”按钮,在打开的对话框中选择D:\klyz文件夹作为站点根目录,单击“保存”按钮。此时,新定义的站点“快乐驿站”出现在“文件”面板中,如图2-2所示。

图2-1 “站点设置对象”对话框

图2-2 “文件”面板
2.选择菜单“文件→新建”命令,弹出“新建文档”对话框,如图2-3所示,在左侧栏选择“空白页”选项,“页面类型”栏选择“HTML”,“布局”栏选择“无”,单击“创建”按钮,即可创建一个空白网页。选择菜单“文件→保存”命令,打开“另存为”对话框,输入文件名index.html,单击“保存”按钮,即可在“文件”面板中出现该文件。

图2-3 “新建文档”对话框
3.在“文件”面板中选择站点“快乐驿站”,单击鼠标右键,在弹出的快捷菜单中选择“新建文件夹”命令,如图2-4所示,输入文件夹名称images,用来保存图像文件,按【Enter】键完成。在“文件”面板中按住【Ctrl】键依次单击bj.gif、ch.jpg和lian.jpg这3个文件,按住鼠标左键拖动到images文件夹上,此时“文件”面板如图2-5所示。

图2-4 创建新文件夹

图2-5 “文件”面板
4.在“文件”面板中,双击打开chongshang.html,按【F12】键打开浏览器预览,如图2-6所示。

5.关闭浏览器窗口,将鼠标移到“文档”窗口上方的文件名标签上,单击“关闭”按钮,关闭该文件。在“文件”面板中,选择chongshang.html文件,按【Del】键将其删除。
6.选择菜单“站点→管理站点”命令,打开“管理站点”对话框,如图2-7所示,选择站点“快乐驿站”,单击“导出”按钮,打开“导出站点”对话框,如图2-8所示,选择保存位置,默认的站点定义文件名是“快乐驿站.ste”,单击“保存”按钮。

图2-7 “管理站点”对话框

图2-8 “导出站点”对话框