一dreamweaver mx工作环境的使用和站点的建立.docx

1、一dreamweaver mx工作环境的使用和站点的建立实验一 Dreamweaver MX工作环境的使用和站点的建立【实验目的】通过本实验，使学生熟悉利用Dreamweaver建立站点的方法。【实验要求】1 掌握 Dreamweaver MX的启动和退出的方法； 2 熟悉 Dreamweaver MX的工作环境：菜单、工具栏、属性面板、浮动面板等； 3 掌握创建站点、管理站点、操作站点文件的方法。 【实验内容】1 Dreamweaver MX的启动和退出；2 介绍Dreamweaver MX的工作环境；3 创建一个静态站点；4 在站点中创建网页。【实验步骤】一、熟悉Dreamweaver M

2、X的工作环境Dreamweaver MX的主界面分为标题栏、菜单栏、“插入”工具栏、“文档”工具栏、文档窗口、“属性”检查器、“标签”选择器、面板组等几个部分组成。如图1所示： 图1 Dreamweaver MX的界面组成二、应用向导创建一个静态站点1、选择“站点/管理站点”。（即从“站点”菜单中选择“管理站点”命令。）即会出现“管理站点”对话框。 图2 “管理站点”对话框。2、单击“新建”命令按钮，在弹出的“菜单”中单击站点即出现“站点定义向导”的对话框，要求您为站点输入一个名称，如图3所示。在文本框中，输入一个名称以在Dreamweaver中标识该站点。该名称可以是任何所需的名称。例如，您

3、可以将站点命名为“mysit”。 图3 建站向导站点起名3、单击“下一步”进入下一个步骤。出现向导的下一个屏幕，询问您是否要使用服务器技术。选择“否”选项指示目前该站点是一个静态站点，没有动态页。如图4所示。 图4 建站向导静态和动态网站选择4、单击“下一步”进入下一个步骤。出现向导的下一个屏幕，询问您要如何使用您的文件，如图5所示。选择标有“编辑我的计算机上的本地拷贝，完成后再上传到服务器（推荐）”的选项。文本框允许您在本地磁盘上指定一个文件夹，Dreamweaver 将在其中存储站点文件的本地版本。若要指定一个准确的文件夹名称，通过浏览指定要比键入路径更加简便易行，因此请单击该文本框旁边的

4、文件夹图标。随即会出现“选择站点的本地根文件夹”对话框，在对话框中浏览到本地磁盘上可以存放所有站点的文件夹。然后单击“确定”。 图5 建站向导定义站点文件的存储位置5、单击“下一步”进入下一个步骤。出现向导的下一个屏幕，询问您如何连接到远程服务器。从弹出式菜单中选择“无”。 图6 建站向导连接到远程服务器的设置6、单击“下一步”进入下一个步骤。该向导的下一个屏幕将出现，其中显示您的设置概要。单击“完成”完成设置。“管理站点”对话框中将出现你新创建的站点，如图7所示。图7完成站点的建立之后，在文件面板中你会看到如图8所示的类似结果（本地视图）。 图8 文件面板中的本地视图三、在站点中创建你的文件

5、和文件夹1、在新创建的站点中新建两个文件夹，分别取名为image和text，用来存放你从平台上下载的图像素材和文本素材。创建文件或文件夹的方法是在“文件”面板下的站点文件夹上单击鼠标右键，在弹出的“快捷菜单”中选择相应的命令项，如图9所示。 图9 图102、在根目录下创建两个空白网页，分别取名为tangshi和digital_photo。建立好的站点中的内容应如图10所示。3、tangshi.htm和digital_photo.htm网页的最终效果图分别如图11、图12所示。图11 tangshi.html图12 digital_photo.html4、操作要点【插入标题文字】进入页面编辑“设

6、计”视图状态。如图13所示，在“标题”后的文本框内输入标题。图13【设置文字的格式】在一般情况下，编辑器默认左对齐，光标在左上角闪烁，光标位置就是插入点的位置，如图14所示。输入文字后，选中文字，在图14所示的文本“属性”面板设置文本格式。图14 文本“属性”面板【设置网页的背景颜色或背景图片】点击“修改”菜单选“页面属性”，或单击图14中的“页面属性”命令按钮，可打开页面属性对话框，如图15所示： 图15 页面属性对话框【插入图像】选择以下任意一种方法： （1）使用插入菜单：在“插入”菜单选“图像”，弹出“选择图像源文件”对话框，选中相应的图像文件，单击“确定”命令按钮，即可插入图片。如图1

7、6所示： 图16 “选择图像源文件”对话框（2）使用“插入”工具栏（如图17，图18所示有两种显示形式，可互相转换），在“常用”菜单中找到“图像”图标，单击它即可弹出“选择图像源文件”对话框。 图17 “插入”工具栏菜单形式图18 “插入”工具栏制表符形式（3）使用面板组“资源”面板（如图19）：在展开根目录的图片文件夹中，选中相应图片，用鼠标拖动至工作区合适位置。 图19 “资源”面板【设置图像的格式】插入图像后，选中图像，在图20所示的图像“属性”面板设置图像格式。注意图像与文本对齐方式的设置图20 图像“属性”面板【插入水平线】使用“插入”工具栏，在“HTML”菜单中找到“水平线”图标，

8、单击它即可产生一条水平线。 图21 【插入日期】使用“插入”工具栏，在“常用”菜单中找到“日期”图标，如图22所示，单击它即可弹出“插入日期”对话框。 图 22【滚动文字】标记格式或其中：#1=left或right。Left值使文字从右向左绕圈移，right值使文字从左向右绕圈移。#2=scroll, slide, alternate。 scroll值使文字绕圈移动；slide值使文字从右移动到左边；alternate值使文字来回移动。文字移动区域的底色设置 属性为：bgcolor=#文字移动面积设置面积属性有两个，一个是高height，另一个是宽width。属性格式：height=# width=#，其中：#的取值可以是像素、百分比等。百分比表示相对占浏览器窗口的百分比。例如：文字移动！该示例设置的面积是高占40像素，宽为显示的页面宽度的50%。