第四讲 Dreanweaver MX网页设计基础及
基本操作与文字编辑
主要内容:
一,Dreamweaver MX简介
二,Dreamweaver MX工作界面
三,Dreamweaver MX基本操作与文字编辑
四,Dreamweaver MX制作网页实例
五、本节小结
六、作业
Dreamweaver MX简介
Dreamweaver MX是 Macromedia公司
推出的最新版本的优秀的可视化、功能
强大的所见即所得的网页制作工具,一
直以来它是专业人事的首选。因为它不
但能够完成一般网页编辑器所能完成的
工作,而且还能制作出许多需要通过编
程才能达到的效果。而对于广大的爱好
者来说,该软件功能强大、界面友好、
操作方便、容易掌握。只要熟练掌握该
软件的使用,便能够制作出相当高水平
的网页。
必须注意:
Dreamweaver和现在市场上使用的其它的网
页制作软件如 Frontpage,微软的 Word等在
风格上有所不同,Dreamweaver采用的是
Macromedia浮动面板的设计风格,对于初
学者来说,可能会感到不适应。但当你习
惯了其操作方法后,就会发现 Dreamweaver
的直观性和高效性是 Frontpage和其它软件
所无法比拟的。更多的体会可能只能靠我
们同学学习、掌握、熟练使用该软件以
后 … 留给同学们自己总结了。
Dreamweaver MX 工作界面介绍
当我们第一次启动 Dreamweaver MX软件时,会
弹出一个工作界面选择窗口:
可以让用户根据自己的需要设置,可选
择的界面包括, Dreamweaver MX工作区,
和, Dreamweaver 4工作区, 。
(也就是说,Dreamweaver MX提供了有
二种工作界面的风格:)
第一种,将全部元素置于一个窗口的集
成布局风格,即, Dreamweaver MX工作
区, 。请看下图示例:
对象面板
属性面板
标题栏
主菜单
中间空白的就是网页
编辑区(文档窗口)状态栏
面板组
站点面板
Dreamweaver MX工作界面
第二种,非常类似于
Dreamweaver 4的浮动布局
风格,即, Dreamweaver 4
工作区, 。请看下图示例:
提示,如果不是第一次使用 Dreamweaver
MX,如何可以重新设置自己的需要的界
面?
也就是说:
选择一种工作区后要切换到另一个工作区
该怎么办?
操作方法是:
1、选择 Dreamweaver MX中的菜单, 编
辑, →, 参数选择, 命令,会弹出, 参
数选择, 对话框:
参数选择对话框
可以修
改工作
区的风

2,在, 参数选择, 对话框中的左侧的
,分类, 列表中选择, 常规, 类。
3,单击, 更改工作区, 按钮。
4,选择一种工作区布局,然后单击, 确
定, 按钮。此时系统会出现一条警告信
息,通知您重新启动 Dreamweaver后将出
现新的布局。
5、退出 Dreamweaver MX,并重新启动
它,就换了一种工作界面。
DreamweaverMX工作区功能介绍
一,标题栏
标题栏用来显示当前编辑页面的标
题。标题的内容相当于 HTML中
TITLE标记引出的标题内容。在括
号中显示了当前文件所在的目录和
文件名。如果该文件尚未保存或尚
未保存的改动时,则文件名后面将
会有星号出现,提醒你保存。
二、主菜单
主菜单中包括文件( File)、编辑
( Edit)、查
看( View)、插入( Insert)、修改
( Modify)、文字( Text)、命令
( Commands)、站点( Site)、窗口
( Window)、帮助( Help)十个菜单
选项。
每个菜单中又包括许多命令和子菜单,
当单击菜单中的命令时,就会执行相应
的功能。主菜单中囊括了 Dreamweaver
中的所有功能和命令,这就像是
Dreamweaver的大本营一样。
三,对象面板(, 插入, 栏)
对象面板的作用就是在光标的后面加入不同的对
象,如表格、图像、图层等。它包含用于将各种
类型的, 对象, 插入到文档中的按钮。
对象面板共分 12项,分别是:常用、布局、文本、
表格、框架、表单、模板、字符、媒体、文件头、
脚本、应用程序。
对象面板是在网页中创建各种类型元素的重要工
具,使用对象面板时,只要单击对象按钮到页面
编辑窗口就可以插入对象了。根据插入的对象不
同,Dreamweaver会弹出相应的对话框,让用户
对插入的对象做进一步的设置。
四、状态栏
状态栏的左边是 HTML元素信息条,它以
HTML的方式显示光标当前位置的网页
元素信息。可以在此选中 HTML标签,
所以有的教科书把称为 HTML标签选择
器。
567× 289表示窗口大小信息栏,它可以显
示和调节窗口的大小。
1K/1秒表示当前文件的大小和下载的时间
(或者是网页的连接速度)。
五、属性面板(属性检查器)
属性面板用于检查或修改当前页面中被选
定元素的各种属性。当用户在属性面板中
修改对象属性后,大多数的属性都可以立
即在文档窗口中显示出来,如改变图像的
对齐方式等。而有些个别属性需要将当前
操作焦点跳出文本框或按 Enter键后才能更
新。如修改图像尺寸。
说明,属性面板的内容是动态变化的,它会
随当前选择对象的不同而变化,因为不同
类型的对象拥有不同的属性。
六、网页编辑区(文档窗口)
在 DreamweaverMX界面的中间空白处就是
网页编辑区,或者称为文档窗口,它显示
当前创建和编辑的文档。该窗口基本可以
显示页面在浏览器中的最终显示效果,其
中有些元素只能在浏览器中才能正确显示,
如一些图片或 Flash动画等。
运行 DreamweaverMX后会自动新建一个空
白的文档窗口,用户就可以在其中进行各
种输入、设计、编辑操作。
七、面板组,面板组是组合在一个标题下
面的相关面板的集合。
面板组包含有设计面板(包括, CSS样式,,
,HTML样式,,, 行为, )、代码面板、
应用程序面板、文件面板。若要使用某个
面板,(则要展开一个面板组),单击组
名左侧的展开箭头。若要取消停靠一个面
板组,请拖动该组标题条左边的手柄。
八,,站点, 面板:, 站点, 面板可以管
理组成站点的文件和文件夹。非常类似
Windows的资源管理器。
DreamweaverMX基本操作
主要介绍以下四个问题:
? 定义本地站点
? 创建主页文件
? 设置页面属性
? 输入文本并对文本进行编辑
什么是站点?
在第一次上课介绍网页基础知识时,我们简
单介绍了站点。
站点(或称 Web站点、网站) 指的是一组具
有共享属性(如相关的主题、类似的设计或
共同的目的)的链接文档。绝大多数网页设
计都是围绕站点目的进行的。
理解,将制作好的一些相关网页以一定形式
组织起来,这就是 站点 。
严格地说,站点 是网页文档的磁盘组织形式,
它是由文档和文档所在的文件夹组成(利用
不同的文件夹,将不同的内容分门别类地保
存,便于管理和更新) 。
介绍几个概念:
1、本地计算机,若你正在使用的一台计算
机,同时也是用来存放上传到服务器之前
时所有的网页及站点的内容,则这台电脑
称为本地计算机。
2、本地站点,指的是本地计算机创建的站
点。实质上它是指网站中所有的网页文件
在本地计算机的存放位置。
3、远程计算机,除了本地计算机外,还应
该有一台计算机来发布主页,供 Internet用
户浏览,这台计算机就叫做远程计算机。
实际上就是 Internet服务器。
4、远程站点,在本地站点设计完毕后,
可以利用各种 FTP程序将本地站点上
传到 Internet服务器上,形成远程站点 。
5、站点的规划和设计,指的是创建
Web站点通常是从对其进行规划开始
的:决定要创建多少页、每页上显示
什么内容、以及网页是如何互相链接
起来的。
创建本地站点的方法:
1、第一步必须先在本地计算机的磁盘
上建立一个文件夹。(作为本地站点
的根文件夹)
提示:为了方便以后管理站点上的文件,
先在本地文件夹中创建几个目录,htm、
img,others,分别存放网页设计中用到的
资源及网页文件。
2、建立本地站点,选择主菜单中的
,站点 /新建站点, 命令,在弹出的新
建站点对话框进行设置。
创建本地站点
新建站点的操作步骤:
第一步:选择菜单中的, 站点, →,新建站点”
命令,如图所示:
在弹出的对话框中选择, 基本, 选项卡,出现定义站
点向导,如下图所示:
为站点输入
一个名称,中、
英文均可
第二步:单击, 下一步, 按钮,询问是否要使用服务
器技术,选择, 否, 选项(表示目前该站点是一个
静态站点,没有动态页即不使用 Web应用程序:如
ASP,JavaServer Page JSP)
第三步:单击, 下一步, 按钮,选择, 编辑我的计算
机上的本地副本,完成后再上传到服务器(推荐),
单选项,然后指定本地机磁盘上的一个文件夹储存
站点文件(包括网页文件及设计网页用到的其它资
源)
指定的文件夹
称为站点的本
地根文件夹
第四步:单击, 下一步, 按钮,在弹出的对话框中设
置如何连接到远程服务器,单击下拉菜单,选择
,无, 。如下图所示:
第五步:单击, 下一步, 按钮,弹出如下图设置概要。
单击, 完成, 按钮,完成设置。
*使用, 高级, 选项卡定义站点操作方法:选择, 高级, 选项卡,
在, 分类, 区域中选择, 本地信息,,如下图所示:
说明:
? 在, 站点名称, 文本框中,输入站点的名称。
? 在, 本地根文件夹, 文本框中,指定本地计
算机的磁盘上用于存放所有站点文件的文件
夹。(如果本地根文件夹尚不存在,应先创
建好的文件夹)。
? 在, 自动刷新本地文本列表, 选项中,指定
每次文件复制到本地站点时,
DreamweaverMX是否自动刷新本地文件列表。
? 在, 默认图象文件夹, 文本框中,指定此站
点的默认图象文件夹的路径。
? 在, http地址, 文本框中,输入已完成的 Web
站点将使用的 URL。
? 对于, 启用缓存, 选项,指定是否创建本地
缓存以提高链接和站点管理任务的速度,这
是 DreamweaverMX 提供的很好的资源,要
选中。
在本地计算机上设计网页,本地站点的信息
设置已经足够了,远程站点的信息以后设置。
创建主页文件的步骤
方法一:
? 启动了 DreamweaverMX软件,如同启动
Word等其它应用软件一样打开了一个新的
空的网页文档,就可以在这个新的文档中
进行网页设计编辑;或者单击, 文件, 菜
单中的, 新建, 命令,或直接按 Ctrl+N键,
打开一个新页面,在该页面中也可以进行
网页的设计编辑。
? 网页设计编辑完毕后,保存网页文件:保
存的位置在战点根目录下,新文件取名为
,index.htm” 即建立了主页文件。
方法二:
? 打开站点管理窗口
? 在站点管理窗口右边的本地文件夹列表
框中建立新文件,新文件取名为
,index.htm” 按回车键,即建立了主页文
件。
? 双击, index.htm”文件,进入编辑
,index.htm”的网页文件窗口,进行主页
设计。
(操作演示说明)
设置页面属性
页面的属性包括页面的标题、背景
图像、背景颜色等(还记得,在什
么 HTML的标记中来设置这些参数
吗?)
操作方法:单击, 修改( Modify),
菜单中的, 页面设置( Page
Properties), 命令,或直接按 Ctrl+J
键,便可打开, 页面设置, 的对话
框进行设置。
输入文本并对文本进行编辑
使用 Dreamweaver输入文本及对文本进行编辑
的方法与我们学过的字处理软件的操作方法
非常类似,Dreamweaver系统也提供非常灵
活、方便快捷的菜单、命令对文字进行编辑
处理。其操作方法非常简单,很容易掌握。
(举例演示说明)
注意,1、在 Dreamweaver中的, 空格, 是中文
全角下按, 空格, 键。
2,换段 直接按回车键。(出现空一行)
3、段落中的 换行 按 Shift+Enter。(不空一行)
本节小结
本节主要向大家介绍了 Dreamweaver MX的
工作界面及功能简介,使初次接触
Dreamweaver MX的使用者能较快上手。
要求:通过本节的学习,同学们要熟悉网
页制作软件 DreamweaverMX工作界面,了
解各菜单和面板的功能。
重点掌握如何定义 本地站点 及建立 主
页 的方法。
作业
1、复习掌握今天的相关内容。
2、练习定义本地站点及建立主页。
3、在本地文件夹中建立三个目录,htm、
img,others,把自己准备的素材分别存放
在这三个目录中。
4、在你定义的本地站点中完成书中 P34~35页
的上机操作题。
5、试用 Dreamweaver设计上次课的两个网页。
这两个网页存放在自己定义的本地站点的
本地文件夹中。