dreamweaver mx工作环境使用和站点建立.docVIP

实验二 Dreamweaver MX工作环境的使用和站点的建立 【实验目的】 通过本实验，使学生熟悉利用Dreamweaver建立站点的方法。 【实验要求】 [1] 掌握 Dreamweaver MX的启动和退出的方法； [2] 熟悉 Dreamweaver MX的工作环境：菜单、工具栏、属性面板、浮动面板等； [3] 掌握创建站点、管理站点、操作站点文件的方法。 【实验内容】 [1] Dreamweaver MX的启动和退出； [2] HYPERLINK \l a 介绍Dreamweaver MX的工作环境； [3] HYPERLINK \l b 创建一个静态站点； [4] HYPERLINK \l c 在站点中创建网页。 【实验步骤】 　　一、熟悉Dreamweaver MX的工作环境 　　Dreamweaver MX的主界面分为标题栏、菜单栏、“插入”工具栏、“文档”工具栏、文档窗口、“属性”检查器、“标签”选择器、面板组等几个部分组成。如图1所示： 　　 图1 Dreamweaver MX的界面组成 　　　　 　　二、应用向导创建一个静态站点 1、选择“站点/管理站点”。（即从“站点”菜单中选择“管理站点”命令。）即会出现“管理站点”对话框。 图2 “管理站点”对话框。 　　2、单击“新建”命令按钮，在弹出的“菜单”中单击站点即出现“站点定义向导”的对话框，要求您为站点输入一个名称，如图3所示。在文本框中，输入一个名称以在Dreamweaver中标识该站点。该名称可以是任何所需的名称。例如，您可以将站点命名为“mysit”。　　 　　 　　 图3 建站向导——站点起名 　　3、单击“下一步”进入下一个步骤。出现向导的下一个屏幕，询问您是否要使用服务器技术。选择“否”选项指示目前该站点是一个静态站点，没有动态页。如图4所示。 　　 　　 图4 建站向导——静态和动态网站选择 　　4、单击“下一步”进入下一个步骤。出现向导的下一个屏幕，询问您要如何使用您的文件，如图5所示。 　　●选择标有“编辑我的计算机上的本地拷贝，完成后再上传到服务器（推荐）”的选项。 　　●文本框允许您在本地磁盘上指定一个文件夹，Dreamweaver 将在其中存储站点文件的本地版本。若要指定一个准确的文件夹名称，通过浏览指定要比键入路径更加简便易行，因此请单击该文本框旁边的文件夹图标。随即会出现“选择站点的本地根文件夹”对话框，在对话框中浏览到本地磁盘上可以存放所有站点的文件夹。然后单击“确定”。 　　 　　 图5 建站向导——定义站点文件的存储位置 　　5、单击“下一步”进入下一个步骤。出现向导的下一个屏幕，询问您如何连接到远程服务器。从弹出式菜单中选择“无”。 　　　　 　　 图6 建站向导——连接到远程服务器的设置 6、单击“下一步”进入下一个步骤。该向导的下一个屏幕将出现，其中显示您的设置概要。单击“完成”完成设置。“管理站点”对话框中将出现你新创建的站点，如图7所示。 　　图7 完成站点的建立之后，在文件面板中你会看到如图8所示的类似结果（本地视图）。 　　 图8 文件面板中的本地视图 　　三、在站点中创建你的文件和文件夹 1、在新创建的站点中新建两个文件夹，分别取名为image和text，用来存放你从平台上下载的图像素材和文本素材。创建文件或文件夹的方法是在“文件”面板下的站点文件夹上单击鼠标右键，在弹出的“快捷菜单”中选择相应的命令项，如图9所示。 图9 图10 2、在根目录下创建两个空白网页，分别取名为tangshi和digital_photo。建立好的站点中的内容应如图10所示。 3、tangshi.htm和digital_photo.htm网页的最终效果图分别如图11、图12所示。 图11 tangshi.html 图12 digital_photo.html 4、操作要点 【插入标题文字】 进入页面编辑“设计”视图状态。如图13所示，在“标题”后的文本框内输入标题。 图13 【设置文字的格式】在一般情况下，编辑器默认左对齐，光标在左上角闪烁，光标位置就是插入点的位置，如图14所示。输入文字后，选中文字，在图14所示的文本“属性”面板设置文本格式。 图14 文本“属性”面板 【设置网页的背景颜色或背景图片】 点击“修改”菜单选“页面属性”，或单击图14中的“页面属性”命令按钮，可打开页面属性对话框，如图15所示： 图15 页面属性对话框 【插入图像】 选择以下任意一种方法： （1）使用插入菜单：在“插入”菜单选“图像”，弹出“选择图像源文件”对话框，选中相应的图像文件，单击“确定”命令按钮，即可插入图片。如图16所示： 图16 “选择图像源文件”对话框 （2）使