1、通过本章学习，应该掌握以下内容：Dreamweaver MX的基本操作 利用Dreamweaver MX站点管理 利用Dreamweaver MX创建网页的基本对象,第5章 利用Dreamweaver MX制作网页,Dreamweaver是Macromedia公司的出品的一款“所见即所得”的网页编辑工具。与FrontPage不同，Dreamweaver采用的是Mac机浮动面版的设计风格，对于初学者来说可能会感到不适应。一旦习惯了其操作方式后，就会发现Dreamweaver的直观性与高效性是FrontPage所无法比拟的。,5.1 Dreamweaver MX基本操作,5.1.1 Dreamwe
2、aver MX的界面,1Dreamweaver MX的界面,（1）菜单栏菜单栏提供了所有的菜单命令，是提供软件最完整功能的方式。（2）工具栏工具栏提供了常用命令的快捷启动方式，例如可以使用工具栏中的“标题”框方便地设置网页的标题。（3）插入面板插入面板是Dreamweaver MX中新添的部件，其实就是Dreamweaver 4中的对象面板，在其中包含一些用于创建不同类型对象的按钮。,（4）浮动面板浮动面板是一种方便操作的界面方式，使用者可以随时获得特定功能。 （5）文档窗口文档窗口是显示用户所编辑文档的地方，显示结果与文档在浏览器中显示的结果基本相同。 （6）属性面板属性面板上显示的是被选取
3、对象或文本的各种属性，在属性面板上还可以检查和编辑当前选定页面元素的属性。,2. Dreamweaver的视图,单击工具栏上的视图切换按钮 ，即显示设计视图；使用工具栏中的按钮 ，则可以很方便地切换到代码视图，以便查看当前编辑网页的HTML源代码；如果需要同时查看代码视图和设计视图，可以单击工具栏上的显示代码和设计按钮 ，此时Dreamweaver将同时在窗口中显示代码视图和设计视图。,（1）代码视图与设计视图,（2）文档窗口文档窗口是显示用户所编辑文档的地方，显示结果与文档在浏览器中显示的结果基本相同。文档窗口的标题栏显示页面标题，圆括号内显示的是文件名，如果文档有未保存的部分，则还会出现一
4、个星号。控制被选文本或对象的标记符出现在文档窗底部左边的标记符选择器上。单击这些标记符可以准确地选取标记符及其控制的内容。单击窗口大小下拉菜单，用户可以将文档窗口的大小设为预设值或自定义值。,（3）插入面板选择“窗口”|“插入”命令，出现插入面板，如图5-5所示。在插入面板上包含了多种不同类型的按钮，用于在文档中创建不同类型的对象。默认情况下，插入面板中显示的是“常用”工具组中的工具图标。单击插入面板上的对象类型标签，会打开相应的插入面板，显示插入面板上所包含对象的类型。,图5-5 文档窗口,5.1.2 Dreamweaver MX文件操作,Dreamweaver MX可以打开多种格式的文件，
5、它们的扩展名分别是html、shtml、asp、js、dwt、xml、1h、as、css等。 （1）直接打开文件选择“文件”|“打开”命令，则会打开“打开”对话框。用户在文件名框里选择需要打开的文件，并单击“打开”按钮，即可打开该文件。,1文件的打开,（2）打开库文件在框架网页中，选择“文件”|“在框架中打开”命令，则会打开“选择HTML文件”对话框，如图5-7所示。在此方式下只能打开以HTML为扩展名的文件。,在Dreamweaver MX中创建新的网页文件，有以下3种方法：启动Dreamweaver MX，即可直接创建一个新的网页文件，等候编辑。如果Dreamweaver MX已经启动，要
6、创建新网页，可以选择“文件”|“新建”命令，打开“新建文档”对话框。从该对话框中选择一种需要创建的文件格式，然后单击“创建”按钮即可。,2. 文件的新建,如果要基于模板创建文档，则可以通过选择“文件”|“新建”命令，在出现的“新建文档”对话框中单击“模板”标签，该对话框变为“从模板新建”对话框，如图5-9所示。然后从该对话框左边的列表框中选择模板所在的站点，再在右边的模板列表中选择一个模板，用户还可以通过预览区域预先浏览所选择模板的样式，看看是否符合自己的要求。选择需要使用的模板后，单击“创建”按钮，即可基于模板创建新文档。,如果同时打开了多个Dreamweaver MX窗口，而保存的目的只是
7、为了保存文件，则切换到要保存的文档所在的窗口，然后选择“文件”|“保存”命令。如果所需要保存的网页文件中带有框架文件，而保存的目的是保存该网页文件中所有的文件，则应该选择“文件”|“保存全部”命令。 如果希望将一个网页文档以模板的形式保存。首先切换到要保存的文档所在的窗口，然后选择“文件”|“另存为模板”命令。,3. 保存网页文件,在Dreamweaver MX的编辑窗口，选择“窗口”|“站点”菜单，即可打开站点面板。在站点面板中，用户可以选择菜单“站点”|“新建站点”命令创建新站点，也可以使用“站点”|“编辑站点”命令编辑已有的站点。,5.2 站点管理,5.2.1 定义站点,1. 站点面板,
8、Dreamweaver MX的站点面板,返 回,在Dreamweaver MX中创建站点的方法有两种:（1）通过站点定义向导创建站点在编辑窗口或站点面板选择命令菜单“站点”|“新建站点”选项，弹出“站点定义”对话框1，选择“基本”选项卡，然后,按照提示进行选项设置.,2. 创建站点,（2）直接定义站点在编辑窗口或站点面板选择命令菜单“站点”|“新建站点”选项，弹出“站点定义”对话框1，选择“高级”选项卡，然后,按照提示进行选项设置.,如果要打开站点，可执行如下操作之一： （1）选择菜单栏“站点”|“站点文件”命令，即可在站点面板中打开当前编辑文件所在的本地站点，同时在文档窗口中可以进行该站点文
9、档的编辑操作。 （2）在站点面板中打开工具栏的“站点”下拉列表框，选择需要打开的站点，文件窗口中即会显示该站点文件夹和文件信息。,5.2.2 站点的基本操作,1打开站点,若要复制当前站点，可以使用文档窗口或站点面板中“站点”菜单的“编辑站点”命令，打开“编辑站点”对话框。选中要复制的站点名称，单击“复制”按钮即可对当前站点进行复制操作。执行复制站点操作后，系统会自动复制一个所选择的站点，并且会为复制的站点加上一个“拷贝”字样的站点名称。,2. 复制站点,如果要更改当前站点设置，比如对站点进行修改站点名称、设置参数选项等编辑操作，可以利用上面的方法打开“编辑站点”对话框，选中一个站点后单击“编辑
10、”按钮，即可打开该“站点定义为”对话框，选择“高级”选项卡进行站点编辑。,3编辑站点,在Dreamweaver MX中删除一个站点非常容易，在弹出的“编辑站点”对话框中，单击“删除”按钮就可以删除选中的站点。,4删除站点,注意：此删除操作并未真正删除站点文件夹和其中的内容，而只是无法再用Dreamweaver管理该文件夹而已。如果需要再次用Dreamweaver管理该文件夹，只要用新建站点的方式再次将该文件夹指定为站点根目录即可。,页面布局是进行网页设计最基本最重要的工作之一。Dreamweaver MX提供了一个布局工具布局视图。使用这个工具，页面布局变得轻松快捷。,5.3 创建网页的基本要
11、素,5.3.1 网页布局及属性设置,1页面的布局,在创建文档前，或创建文档后还需要对页面的属性进行必要设置，设定一些影响整个网页的参数。设置页面属性的方法如下：选择“修改”|“页面属性”命令，出现“页面属性”对话框，在该对话框中对页面的属性进行设置。,2设置页面属性,1）换行（1）自动换行：在输入文字时，若某一行的长度超过了Dreamweaver MX窗口的显示范围，文字将自动换到下一行。（2）利用“Enter”换行：在输入文字后按“Enter”键，文字成段，且上下段之间空一行。（3）利用“Shift+Enter”键换行：如果想要将文字手动换行，中间又不能出现空白行，可以按“Shift+Ent
12、er”键。,5.3.2 在网页中插入文本,1编辑文本,Dreamweaver MX中，在文本开始处按空格键是不会输入空格的，在文字之间按空格键可以输入半个空格。如果要在网页中输入空格，可以采用如下三种方法：（1）按住“Ctrl+Shift”键，按一次空格键，键入半个空格。（2）将输入法由半角状态切换到在全角状态，按一次空格键，键入一个空格。（3）将编辑窗口切换到代码视图，在要输入空格的地方输入代码代码，产生半个空格。,2）输入空格,有时为了内容的需要，要在网页中插入一些键盘上没有的特殊字符，在Dreamweaver MX中，这些特殊字符不仅可以通过“插入”菜单下的“特殊字符”命令来插入，还可以
13、通过插入“字符”面板来直接插入。,3）插入特殊的字符,在网页中加入适当的注释文字，可以为日后修改、管理网页提供方便。由于批注只有在编辑网页时或查看原代码时才能看到，所以不必担心批注文字会破坏版面。将光标移到想要插入的注释地方，然后在插入“常用”面板中单击“注释”按钮，或选择“插入”|“文本对象”|“注释”命令，弹出“注释”对话框，再单击“确定”按钮即可。,4）加入注释文字,5）插入水平线,在页面中插入水平线的方法如下：首先确定插入水平线的位置，然后单击插入面板上“常用”选项卡中的按钮 ，或选择“插入”|“水平线”菜单命令，则可在页面中插入了一条水平线。选中水平线，打开水平线属性面板，可以设置水
14、平线的属性。,如果要在文档中查找或替找某个文字，可利用Dreamweaver MX提供的查找和替换功能。选择“编辑”|“查找和替换”命令，打开“查找和替换”对话框。在该对话框中进行查找和替换操作。,2. 查找/替换文本的内容,在Dreamweaver MX中设置文本格式可以通过属性面板，类似于Microsoft Word中对文本的属性设置，包括段落的格式、字体、字号、字的颜色、字体加粗/倾斜、对齐方式（左对齐/居中/右对齐）、文字所链接的路径或URL等。,3. 设置文本格式,4. 添加和删除中文字体,在Dreamweaver MX英文版中，默认状态只有西文的字体可供选择，要使用中文字体可以事先
15、将计算机里的中文字体添加到Dreamweaver MX的字体列表中。,在Dreamweaver中插入图像非常简单，具体操作步骤如下：（1）打开网页，将光标移到将要插入图像的位置。（2）用下列3种方法中的任意一种方法，打开“选择图像源”对话框，如图所示。 在插入“常用”面板中，单击插入图像按钮。 直接拖曳插入“常用”面板中的插入图像按钮至页面的光标处。选择Dreamweaver MX主菜单中的“插入”|“图像”命令。,5.3.3 使用图像,1插入图像,“选择图像源”对话框,返 回,（3）在对话框中选择查找图像文件的路径，选中“预览图像”复选框，选定图像的预览图就显示在对话框的右侧。 （4）如果文
16、件存放在网站的目录中，那么将“相对于”下拉列表调整到“文档”项。 （5）然后单击“确认”按钮，图像就插入到网页中了。,在文档中插入图像后，用鼠标单击图像，图像四周出现可编辑的缩放手柄，说明该图像被选定。这时属性面板中显示出关于图像的属性信息，如图所示。,2图像属性参数,图像属性面板的左上方有一个缩略图，它的右边是“图像”字样，“图像”的右边是当前文件大小，下方的空格可以键入名称，以便将来使用时好调用该文件。,改变图像的尺寸大小，可以通过在属性面板中的“宽”和“高”文本框中直接输入数值来改变图像的尺寸大小，当在网页中需要精确地定位元素时，这种方法可以帮助设计者达到预想的效果。不过这种方法有一个弊
17、端，如果数值输入不当，可能造成图像在浏览器中无法正常显示。此外，还可以通过拖放图像四周的缩放边框来改变图像的尺寸。,3改变图像的尺寸,Dreamweaver中调整图像位置的方法很简单，简述如下：（1）选中页面中要编辑的图像；（2）打开图像属性面板中的“对齐”下拉列表，在列表中选择需要的选项。,4调整图像在网页中的相对位置,Dreamweaver MX中设置背景图像的方法如下：（1）选择主菜单中的“修改”|“页面属性”命令，打开“页面属性”对话框。（2）单击“背景图像”右边的“浏览”按钮，打开“选定图像源文件”对话框。（3）选择一幅图像后，单击“确认”按钮，所选择的图像作为网页背景图像。不管图像
18、的尺寸多大，一旦将其设置为背景图像，Dreamweaver自动将其重复拼接，铺满整个背景区。,5设置图像背景,在浏览网页时，可能会遇到下列情况。当图像不能被浏览器正常显示时，图像区变成了空白区域。 利用Dreamweaver中为图像加文字说明的功能，可使网页中的图像在不能被浏览器正常显示时，以说明文字代替，以帮助访问者了解图像的信息。,6. 在Dreamweaver MX中巧妙地处理图像,1）给图像加文字说明,2）制作低分辨率图像,低分辨率图像是相对于高分辨率图像而言的，高分辨率图像一般指的是图像的色彩丰富逼真、压缩比较小的图像，这种图像文件容量比较大，浏览器要费很长时间来下载。而低分辨率图像
19、包含的色彩少、压缩比较大，所以这种图像文件容量较小，能够较快地被浏览器下载。因此经常要为高质量、大尺寸的图像制作一个副本，这个副本图像采用的是较低的分辨率，从而减小了文件的大小，缩短了图像的下载时间。,3）为图像添加热点,热点即图像上不可见的区域，该区域分配了一个超链接。为图像添加热点就是在图像上划分区域，从而设定图像上制作超链接的范围。 在Dreamweaver中为图像添加热点的方法为：（1）选定图像，打开图像属性面板，选择设置热点按钮，单击鼠标左键并拖动，在图像中设置热点形状。（2）在属性面板中设置热点的超链接。,（1）创建Flash按钮Flash按钮是Dreamweaver MX自带的F
20、lash效果，可 以实现一些动态的按钮效果，其制作方法如下： 将光标定位到要插入Flash按钮的位置。 单击插入“媒体”面板上的按钮，打开“插入Flash按钮”对话框。 在该对话框中设置相应的选项，单击“确定”按钮，完成Flash按钮的创建。,7.使用多媒体对象,（2）创建Flash文本Flash文本是与Flash按钮类似的一种动态效果，当鼠标指针悬停在Flash文本上时，该文字可以显示为其他颜色。制作Flash文本的步骤如下： 将光标定位到要插入Flash文本的位置。 单击插入“媒体”面板上的按钮，打开“插入Flash文本”对话框。 在该对话框中设置相应的选项，单击“确定”按钮，完成Flas
21、h文本的创建。,（3）插入Flash动画如果要在网页中插入用Flash制作好的动画，可以进行如下操作： 将光标定位到要插入Flash动画的位置。 单击插入“媒体”面板或插入“常用”面板上的按钮，在打开“选择文件”对话框中选择要插入的Flash动画即可。,（4）插入Fireworks制作的图像利用Fireworks可以制作多种适用于网页的图像效果，例如分割的反转图、弹出式菜单等。制作完成这些效果后，要将其插入到网页中，才可以使其成为网页的一部分。插入Fireworks制作的图像的步骤如下： 将光标定位到要插入Fireworks图像的位置。 单击插入“常用”面板上的按钮，打开“插入Firework
22、s HTML”对话框。 单击“浏览”按钮选择要插入的HTML文件。,5.3.4 使用表格,1创建表格,利用Dreamweaver MX创建新表格时，首先打开插入“常用”面板，然后可以通过下列四种方式中的任意一种： （1）在插入“常用”面板上，单击插入表格按钮 。 （2）通过主窗口的菜单“插入”|“表格”命令。 （3）使用快捷组合键“Ctrl+Alt+T”。（4）在插入“常用”面板上，拖动表格 按钮到主窗口的工作区中。,1) 创建新表格,（1）如果要选择整个表格，可进行如下的操作之一： 将光标置于表格中的某个单元格中，选择“修改”|“表格”|“选择表格”命令。 将光标置于表格中的某个单元格中，再
23、按两次组合键“Ctrl+A”。 将光标置于表格中的某个单元格中，单击鼠标右键，在弹出的快捷菜单中选择“表格”|“选择表格”命令。 将光标置于表格的尾部（在表格的同一行，但不在表格之内），向左拖动鼠标。 单击表格的边线。,2）选择表格,（2）选择单个单元格的方法有以下几种： 将光标置于所要选择的单元格中，按一次组合键“Ctrl+A”。 将光标置于所要选择的单元格中，向右拖动鼠标。 将光标置于所要选择的单元格中，选择“编辑”|“全选”命令。 按住Ctrl键，单击所要选择的单元格，再单击一次则取消对单元格的选择。,（3）选择多个单元格的方法有以下几种： 按住Ctrl键，单击所要选择的所有单元格。 将
24、光标置于单元格中，拖动鼠标，选择多个单元格。 如果要选择整行，将光标置于该行的左边缘，当光标变成图标时单击鼠标左键。 如果要选择整列，将光标置于该列的上边缘，当光标变成图标时单击鼠标左键。,（4）选择的全部单元格的方法有以下几种： 将光标置于第1个单元格中，并拖动鼠标至最后一个单元格。 将光标置于第1个单元格中，按住Shift键，再单击最后一个单元格。 将光标置于第1行的左边缘，当光标变成图标时，向下拖动鼠标至最后一行。 将光标置于第1列的上边缘，当光标变成图标时，向右拖动鼠标至最后一列。,（1）在现有的表格中插入单元行，可以选择以下的操作之一： 将光标移到要插入单元行的下一行，选择“修改”|
25、“表格”|“插入行”命令。 将光标移到要插入单元行的下一行，按组合键“Ctrl+M”。 将光标移到要插入单元行的下一行，单击鼠标右键，在弹出的快捷菜单中选择“表格”|“插入行”命令。,3) 添加/删除行列,（2）在现有的表格中插入单元列，可以选择以上的操作之一： 将光标移到在插入单元列的右边一列，选择“修改”|“表格”|“插入列”命令。 将光标移到要插入单元列的右边一列，按组合键“Ctrl+Shift+A”。 将光标移到要插入单元列的右边一列，单击鼠标右键，在弹出的快捷菜单中选择“表格”|“插入列”命令。,（3）如果想在现有的表格中添加多行或多列，可执行以下操作：首先将光标移到要插入行或列附近
26、的单元格中，单击鼠标右键，在弹出的下拉菜单中选择“表格”|“插入行或列”命令，或是选择“修改”|“表格”|“插入行或列”命令，将弹出如图4-5所示的“插入行或列”对话框。在此对话框中进行相关的设置，然后单击“确定”按钮，设置的多列或多行将插入到页面中。,（4）删除整行/整列，可以采用下列办法之一：先选择欲删除的整行或整列，直接按Del键，即可删除。先将光标移到要删除的行或列中，选择“修改”|“表格”|“删除行”或“删除列”命令。将光标移到要删除的行或列中，单击鼠标右键，在弹出的快捷菜单中选择“表格”|“删除行”或“删除列”命令。,4）导入表格数据文件,在Dreamweaver MX中，利用插入
27、列表数据命令可以很容易把表格数据加入到网页中。在插入外部数据前，首先要将表格数据文件转换成 .txt（文本文件）格式，并且该文件中的数据要带有分隔符，如逗号、分号、冒号等。 要加入外部数据，选择如下的任何一种操作： （1）选择“文件”|“导入”|“表格式数据”命令。 （2）选择“插入”|“表格对象”|“导入表格式数据”命令。 （3）单击插入“常用”面板上的“表格数据”按钮 。,（1）设置表格的宽度及高度在Dreamweaver MX中，修改表格的大小有以下两种方法。 通过鼠标拖曳法可以粗略地调整表格的大小。 通过“表格属性”对话框可以精确地调整表格的大小。在创建表格时，可以通过表格对话框来设置
28、表格的宽度，但无法设置表格的高度，如果要设置表格的高度，可以通过表格属性面板来确定。,2编辑表格,（2）合并/拆分单元格,1）合并单元格首先在表格中选择需合并的单元格，属性面板变成单元格属性面板，然后选择下列操作之一：选择“修改”|“表格”|“合并单元格”命令。单击鼠标右键，在弹出的快捷菜单中选择“表格”|“合并单元格”命令。按组合键“Ctrl+Alt+M”。单击单元格属性面板上的合并单元格图标 。,2）拆分单元格首先在表格中选择需拆分的单元格，选择下列任何一种操作： 选择“修改”|“表格”|“拆分单元格”命令。 单击鼠标右键，在弹出的下拉菜单中选择“表格”|“拆分单元格”命令。 按组合键“C
29、trl+Alt+S”。 单击属性面板上的拆分单元格图标 。在“拆分单元格”对话框中，可以选择拆分成行和列以及行/列的数量。,（3）设置单元格的宽度及高度在默认情况下，单元格的宽度是随表格的宽度而定的，表格中每一列的宽度基本上都相等，也就是说每一个单元格的宽度都是相同的。如果不指定表格的高度，则表格中同一行的高度也是相等的，即单元格的高度相同。在属性面板上可以改变单元格默认的宽度和高度。将光标置于需要设置宽度或高度的单元格中，此时属性面板显示单元格属性。在属性面板上的“宽”或“高”文本框中输入适当的数值即可。但单元格宽度与高度的单位只可以使用像素，不能使用百分比。,3. 表格属性的设置,要将表格
30、背景设为单一的颜色，首先选择整个表格，再单击属性面板上“背景颜色”后面的颜色框，在弹出的调色板中选择颜色，或者是在后面的文本框中直接输入颜色的色码；要将图像设为表格的背景，首先选择整个表格，再在属性面板上的“背景图像”文本框中输入图像所在的路径，或是单击其后的文件夹图标，在弹出的对话框中选择图像文件。,1）设置表格的背景,2) 设置表格的边框颜色和宽度,设置表格的边框颜色和宽度时，必须指定表格的边框线的宽度不为0。 要为表格的边框指定颜色和宽度，可按如下步骤进行。 （1）选择表格，单击其属性面板上“边框颜色”的颜色框 ，在弹出的调色板中选择颜色，或者是在后面的文本框中直接输入颜色的色码，即可为
31、表格的边框添加颜色。（2）在表格属性面板上的“边框”文本框中输入边框的宽度数值。,4表格的应用技巧,（1）制作1象素细线表格（2）制作细线分隔线（3）制作隔距表格,在Dreamweaver MX中创建框架的具体操作步骤如下： （1）选择主菜单中的“文件”|“新建”命令，打开一个新文档窗。 （2）将插入面板切换到“框架”类，插入面板如图所示。,5.3.5 创建框架网页,1. 建立框架,（3）执行以下操作之一，即可创建框架。 选择“插入”|“框架”命令，从弹出的子菜单中选择任意一个选项。 选择“修改”|“框架页”命令，从弹出的子菜单中选择任意一个选项。 单击插入“框架”面板上的任一种插入框架图标按
32、钮。,2. 编辑框架网页,框架创建好以后，就可以对框架进行编辑了。每一个框架里都是一个文档，可以直接添加内容，也可以在框架内打开已经存在的文档。,演示编辑框架网页,3. 保存框架网页,每一个框架都包含一个文档，因此一个框架集会包含多个文档。在保存文档的时候，不能只简单地保存一个文档，要将整个网页文档都保存下来。,演示保存框架网页,（1）选择整个框架 要选择整个框架可执行以下操作之一： 将鼠标指针移到整个边框位置的同时，按住Alt键，当鼠标指针变为垂直箭头（或水平箭头）时，单击边框即可选中整个框架。 如果当前选择的是一个子框架，需要重新选择整个框架，可以将鼠标指针移到第一次分割框架的边框位置，当
33、鼠标指针变为垂直箭头（或水平箭头）时，单击边框即可选中整个框架组。 除了上述方法之外，选择框架还可以通过“框架”面板来完成。,4选择框架,（2）选择子框架在文档窗口中按住Alt键，然后用鼠标单击欲选择的子框架。文档窗口中该子框架的周围被虚线包围，表示它已经被选中，同时在状态栏上加黑显示标记符。同样也可以通过“框架”面板来选择子框架。只要在框架面板中单击相应的子框架即可，,5删除框架,将光标放在框架的边框上，当光标变成垂直箭头（或水平箭头）时，按住鼠标左键，将框架的边框拖出父框架或页面之外，即可将这个框架删除。,6. 框架属性及框架组属性设置,1）框架属性,利用框架属性面板可以查看和设置框架的属
34、性，如为框架命名、设置框架的边框及颜色等。首先选择“窗口”|“其它”|“框架”命令，或按快捷键“Shift+F2”，打开“框架”面板；然后在框架面板中选中框架，此时属性面板所显示的即为框架的属性面板，如图所示。在框架属性面板中设定框架的属性。,新创建的框架组默认属性值为：无边框，无滚动条，在浏览器中无法看到创建的框架，要改变这些属性，需在属性面板中修改相应的选项。首先单击框架的边框，选中框架组，此时属性面板中将自动切换显示框架组的属性，如图所示。 在框架组属性面板中设定框架组的属性。,2）框架组属性,7设置框架的大小,可以在属性面板中进行框架尺寸的设置。设置框架尺寸的步骤如下： （1）单击框架
35、边界，选定一个框架组。 （2）选择“窗口”|“属性”命令，打开框架组属性面板。 （3）单击框架组属性面板右侧图框中的区域，选定框架组中的行或列。 （4）在“值”文本框中输入调整框架尺寸的数值，然后在“单位”下拉列表框中选择一种度量单位。,Dreamweaver MX提供了一个专门的表单对象插入面板，面板上包含了各种表单对象。选择“窗口”|“插入”命令，打开插入面板，单击插入面板上的“表单”标签，切换到插入“表单”面板如图所示。,5.3.6 使用表单,1. 创建空白表单,因为在发送表单时是以整个表单发送的，所以在插入表单元素前，先要在网页中插入空白的表单，然后才能在表单中插入表单元素（如文本框、
36、按钮、列表/菜单、图片等），以达到整体发送的效果。,演示创建空白表单的过程 。,2. 插入文本框,文本框是一个接受文本信息的空白框。在文本框中几乎可以容纳任何类型的文本数据。利用它可以使网页设计师不必限制访问者提交的内容。在网页中，常见的文本框有3种形式：单行文本框 只能用来输入一行的信息。多行文本框 可以由设计者限定行数，并决定是否出现滚动条。该文本框可以输入多行信息。密码文本框 在该文本框中输入的信息，都会以“*”显示在屏幕上。,1） 插入文本框,（1）插入单行文本框 先输入提示信息，然后选择“插入”|“表单对象”|“文本域”命令。此时会在表单中插入一个单行文本框。 （2）插入多行文本框
37、先输入提示信息，然后选择“插入”|“表单对象”|“文本区域”命令。此时会在表单中插入一个单行文本框。,（3）插入密码文本框先输入提示信息，然后选择“插入”|“表单对象”|“文本域”命令。此时会在表单中插入一个单行文本框。用鼠标单击此单行文本框，在属性面板上的“类型”下单击“密码”单选按钮，则单行文本框变成了密码文本框。,2）设置文本框属性 在表单中插入文本框后，选择所插入的文本框，d打开属性面板设置文本框属性。,3. 插入单选按钮,1）插入单选按钮,要在表单中插入单选按钮，首先将光标置于表单中的相应位置，输入提示信息，然后单击插入“表单”面板上的图标 ，或选择“插入”|“表单对象”|“单选按钮
38、”命令，插入单选按钮。,2）设置单选按钮的属性,在表单中选择单选按钮后，属性面板将变为如图所示。,（1）单选按钮：给单选按钮命名。同一组的单选按钮的名称必须相同，这一点非常重要。 （2）选定值：设置单选按钮被选时的取值。当用户提交表单时，该值被传送给处理程序（如CGI脚本），应赋给同组的每个单选按钮不同的值。（3）初始状态：指定首次载入表单时单选按钮是“已勾选”还是“未勾选”。一组单选按钮中，只能有一个按钮的初始状态被设为选中。,1）插入复选框,4. 插入复选框,将光标置于表单中适当位置，输入提示信息“兴趣”，再给复选框添加说明性语言“读书”、“旅游”、“体育”和“音乐”；然后单击插入“表单”
39、面板上的图标 ，或选择“插入”|“表单对象”|“复选框”命令，在选项的合适位置加入复选框。,在表单中选择复选框后，其属性面板的显示与单选按钮属性面板基本相同（只是图标不同）。但在给复选框命名时，要注意复选框与单选按钮命名的区别。单选按钮是以“组”为单位的，而复选框则是以“个”为单位的，所以每一个复选框的名称都不应该相同。,2）设置复选框的属性,5. 插入下拉列表框,1）插入下拉列表框,要在表单中插入下拉列表框，应按如下步骤进行： （1）将光标定位在表单中适当位置，输入提示信息。 （2）单击插入“表单”面板上的图标 ，或选择“插入”|“表单对象”|“列表/菜单”命令，则在表单中出现下拉列表框的框
40、架；选中该下拉列表框，属性面板变成下拉列表属性面板，如图所示；,（3）选择“类型”为“列表”，单击属性面板上的“列表值”按钮（确保下拉列表框处于选择状态），弹出“列表值”对话框，如图所示。,（4）在“列表值”对话框的“项目标签”下输入要在列表框中显示的内容，在“值”下输入与显示内容相应的值（传送到服务器中的即为该值），即可为列表框加入显示的内容。,在表单中插入下拉列表框后，选择所插入的下拉列表框，其属性面板如图所示。,2）设置下拉列表框属性,根据要求完成下拉列表框类型、高度、列表值、选定范围等属性的设置。,6. 插入按钮,1）插入“提交”按钮,首先将光标置于需要插入按钮的表单中，单击插入“表单
41、”面板上的图标 ，或选择“插入”|“表单对象”|“按钮”命令，则在表单中将插入一个“提交”按钮。,2）插入“重置”按钮,首先在表单中插入“提交”按钮，选中此按钮，在属性面板上的“动作”下单击“重设表单”单选按钮。则在表单中出现“重置”按钮。,3）插入普通按钮,普通按钮的创建方法与“重置”按钮的创建方法基本上相同，但在属性面板上的“动作”下要选择“无”单选按钮。,4）按钮属性设置,表单中的3种按钮可以通过选择属性面板“动作”中的不同选项实现相互转换。,习 题 1在Dreamweaver MX中，分别用站点定义向导和直接定义站点两种方法创建一个名为“MyWeb”的站点。 2在Dreamweaver MX中有哪几种换行方式？ 3如何在Dreamweaver MX文档窗口中加入空格？ 4在Dreamweaver MX中，如何添加和删除中文字体？ 5在Dreamweaver MX中，如何调整图像在网页中的相对位置？ 6在Dreamweaver MX中，如何给图像加文字说明？,
