《中文版Dreamweaver CS5网页设计实用教程》第5章 编辑和管理站点

中文版DreamweaverCS5网页设计实用教程认识文件面板5.1第5章

编辑和管理站点5.25.35.45.55.6在站点中新建文件新建文件夹和移动文件删除和重命名文件使用设计备注实例分析5.1认识文件面板文件面板如图5-1所示。文件上传管理按钮当前站点结构视图网站名称视图状态弹出菜单按钮扩展/折叠图5-1文件面板5.1认识文件面板图5-2展开后的文件面板5.2在站点中新建文件

首先在当前站点中分别建立名为“index.html”、“poem1.html”、“poem2.html”、“poem3.html”和“poem4.html”的网页，具体方法如下：

（1）如图5-3所示，单击“显示站点”栏，在弹出的菜单中选择目标站点“cs5练习”。图5-3选择目标站点5.2在站点中新建文件（2）如图5-4所示，先点击右侧窗口中的站点文件夹图标，再执行“文件/新建文件”命令，在右侧的本地站点栏中显示新建文件。新建文件的默认名称为untitled.html，如图5-5所示。图5-4执行“文件/新建文件”命令5.2在站点中新建文件图5-5新建的文件untitled.html5.2在站点中新建文件（3）输入文件新名称后按【Enter】键完成重命名，如图5-6所示。本例中输入“index.html”。图5-6完成重命名5.2在站点中新建文件（4）用同样的方法分别建立名为poem1.html、poem2.html、poem3.html和poem4.html的网页，结果如图5-7所示。新建文件后，在结构视图中显示了新建文件的大小、类型和修改日期等信息。图5-7新建的网页结果5.3新建文件夹和移动文件（1）先单击面板右侧栏中的站点文件夹图标，再执行图5-8所示的“文件/新建文件夹”命令，新建一个文件夹。图5-8新建一个文件夹5.3新建文件夹和移动文件（2）如图5-9所示，输入文件夹的名称“web”，按【Enter】键，完成文件夹的建立。图5-9完成文件夹的建立5.3新建文件夹和移动文件（3）用同样的方法创建名为“image”的文件夹，如图5-10所示。图5-10创建名为“image”的文件夹5.3新建文件夹和移动文件若想在目标文件夹中建立一个文件夹，可以单击目标文件夹，然后执行新建文件夹命令。例如，要在image文件夹中建立文件夹，先单击image文件夹图标，再执行“文件/新建文件夹”命令，结果如图5-11所示。图5-11执行“文件/新建文件夹”命令的结果5.3新建文件夹和移动文件（4）如图5-12所示，移动鼠标指针到“poem1.html”文件图标上，按住鼠标左键拖动至“web”文件夹图标上。图5-12文件移至web文件夹中5.3新建文件夹和移动文件（5）释放鼠标左键后弹出如图5-13所示的更新文件对话框。单击“更新”按钮，完成文件的转移。图5-13完成文件的转移5.3新建文件夹和移动文件（6）用同样的方法分别将poem2.html、poem3.html、poem4.html文件移至web文件夹中，结果如图5-14所示。

图5-14文件移至web文件夹中5.3新建文件夹和移动文件（7）若要移动文件到站点的根目录下，可以直接拖动目标文件图标到站点文件夹图标上，如图5-15所示。

图5-15直接拖动目标文件图标到站点文件夹图标上5.3新建文件夹和移动文件（8）释放鼠标左键后，弹出图5-16所示的更新链接提示框。单击“更新”按钮，完成文件移动。图5-16更新链接提示框5.4删除和重命名文件图5-17重命名文件5.5使用设计备注使用设计备注的方法如下：（1）双击文件面板中的目标文件，打开该文件。设计备注是针对当前被编辑文件的提示信息，所以书写设计备注时需要先打开目标文件。（2）执行“文件/设计备注”命令，打开图5-18所示的设计备注提示框。（3）输入提示信息后，单击“确定”按钮，完成备注建立。可勾选“文件打开时显示”复选框。这样每次打开文件时都会先显示该页的设计备注。图5-18设计备注提示框5.6实例分析

建立一个明晰的站点地图，不仅对设计者而且对浏览者都是非常重要的。登录/网站的首页，拖动浏览器的右侧滚动条至首页最下方，如图5-19所示。图5-19登录网站的首页5.6实例分析