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

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

《一dreamweaver mx工作环境的使用和站点的建立.docx》由会员分享，可在线阅读，更多相关《一dreamweaver mx工作环境的使用和站点的建立.docx（13页珍藏版）》请在冰豆网上搜索。

一dreamweavermx工作环境的使用和站点的建立

实验一DreamweaverMX工作环境的使用和站点的建立

【实验目的】

通过本实验，使学生熟悉利用Dreamweaver建立站点的方法。

【实验要求】

[1]掌握DreamweaverMX的启动和退出的方法；

[2]熟悉DreamweaverMX的工作环境：

菜单、工具栏、属性面板、浮动面板等；

[3]掌握创建站点、管理站点、操作站点文件的方法。

【实验内容】

[1]DreamweaverMX的启动和退出；

[2]介绍DreamweaverMX的工作环境；

[3]创建一个静态站点；

[4]在站点中创建网页。

【实验步骤】

　　一、熟悉DreamweaverMX的工作环境

　　DreamweaverMX的主界面分为标题栏、菜单栏、“插入”工具栏、“文档”工具栏、文档窗口、“属性”检查器、“标签”选择器、面板组等几个部分组成。

如图1所示：

图1DreamweaverMX的界面组成

　　二、应用向导创建一个静态站点

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所示。

图11tangshi.html

图12digital_photo.html

4、操作要点

【插入标题文字】

进入页面编辑“设计”视图状态。

如图13所示，在“标题”后的文本框内输入标题。

图13

【设置文字的格式】在一般情况下，编辑器默认左对齐，光标在左上角闪烁，光标位置就是插入点的位置，如图14所示。

输入文字后，选中文字，在图14所示的文本“属性”面板设置文本格式。

图14文本“属性”面板

【设置网页的背景颜色或背景图片】

点击“修改”菜单选“页面属性”，或单击图14中的“页面属性”命令按钮，可打开页面属性对话框，如图15所示：

图15页面属性对话框

【插入图像】

选择以下任意一种方法：

（1）使用插入菜单：

在“插入”菜单选“图像”，弹出“选择图像源文件”对话框，选中相应的图像文件，单击“确定”命令按钮，即可插入图片。

如图16所示：

图16“选择图像源文件”对话框

（2）使用“插入”工具栏（如图17，图18所示有两种显示形式，可互相转换），在“常用”菜单中找到“图像”图标，单击它即可弹出“选择图像源文件”对话框。

图17“插入”工具栏菜单形式

图18“插入”工具栏制表符形式

（3）使用面板组“资源”面板（如图19）：

在展开根目录的图片文件夹中，选中相应图片，用鼠标拖动至工作区合适位置。

图19“资源”面板

【设置图像的格式】

插入图像后，选中图像，在图20所示的图像“属性”面板设置图像格式。

注意图像与文本对齐方式的设置

图20图像“属性”面板

【插入水平线】

使用“插入”工具栏，在“HTML”菜单中找到“水平线”图标，单击它即可产生一条水平线。

图21

【插入日期】

使用“插入”工具栏，在“常用”菜单中找到“日期”图标，如图22所示，单击它即可弹出“插入日期”对话框。

图22

【滚动文字】

标记格式

┉┉

或┉┉

其中：

#1=left或right。

Left值使文字从右向左绕圈移，right值使文字从左向右绕圈移。

#2=scroll,slide,alternate。

scroll值使文字绕圈移动；slide值使文字从右移动到左边；alternate值使文字来回移动。

文字移动区域的底色设置

属性为：

bgcolor=#

文字移动面积设置

面积属性有两个，一个是高height，另一个是宽width。

属性格式：

height=#width=#，其中：

#的取值可以是像素、百分比等。

百分比表示相对占浏览器窗口的百分比。

例如：

文字移动！

该示例设置的面积是高占40像素，宽为显示的页面宽度的50%。