dreamweaver mx工作环境的使用和站点的建立.docx
- 文档编号:8691468
- 上传时间:2023-02-01
- 格式:DOCX
- 页数:13
- 大小:587.06KB
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%。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- dreamweaver mx工作环境的使用和站点的建立 mx 工作 环境 使用 站点 建立