任务三：网站首页的制作 项目1 文本的设置.

Presentation on theme: "任务三：网站首页的制作 项目1 文本的设置."— Presentation transcript:

1 任务三：网站首页的制作 项目1 文本的设置

2 一、 输入文本 在Dreamweaver中输入文字可不象Word那样随心所欲，输入文本需要注意以下问题：
一、 输入文本 在Dreamweaver中输入文字可不象Word那样随心所欲，输入文本需要注意以下问题： 1、换行：按快捷键【Shift+回车】。 2、分段：直接按快捷键【回车】。 3、输入空格： 第一种方法是插入不换行空格，按快捷键【Ctrl+Shirt+Space】； 第二种方法是在确保输入法处于“全角”模式时输入空格。

3 二、 插入字符 执行【插入】->【HTML】->【特殊字符】命令，来插入所需的字符。
二、 插入字符 执行【插入】->【HTML】->【特殊字符】命令，来插入所需的字符。 最快捷的方法是：在“插入”栏的“文本”类别中单击“字符”按钮上的箭头，然后选择所需的字符。插入的字符可以为：不换行空格、货币符号（如英镑符号，日元符号等）、版权信息等。当然也可以插入其他字符。 或者执行【插入】->【HTML】->【特殊字符】->【其他字符】命令来打开“插入其他字符”对话框。 图1-1“文本”工具栏

4 三、 创建项目列表和编号列表 列表可以使网页要显示的结构和内容更加清晰。在Dreamweaver中创建列表非常简单，直接选中文字或在文字前面定位，单击属性面板中的“项目列表”或“编号列表”按钮即可。 但是注意一点：列表项都必须为段落文本格式，不是的话必须进行转换（多数初学者容易在这里出错!），正确方法是直接在当前行后面定位光标，然后按回车键就可以实现分段了。

5 四、 格式化文本 使用文本属性面板“文本”菜单或“文本”工具栏，可以方便地进行文本的格式设置。文本属性面板显示文档中被选中文本的格式属性。可以在文本属性面板中更改格式。Dreamweaver默认的属性面板即是文本属性面板，如图3-23所示。如果没有显示属性面板，可以通过执行【窗口】->【属性】命令打开它。

6 四、 格式化文本 文本属性面板各选项作用： “格式”下拉列表框：选择属性面板中的“格式”下拉列表框，可以设置选定文本的级别。
“字体”下拉列表框：选择字体。如果是第一次安装Dreamweaver，会发现中文字体非常少，选择字体下拉列表框中的“编辑字体列表…”项，这时弹出“编辑字体列表”对话框。在“可用字体”选项中选择一种字体比如“黑体”，单击 按钮，然后单击“确定”按钮，就可以把“黑体”字体加入字体列表中了，。 “样式”下拉列表框：设置文本的CSS样式。 “大小”下拉列表框：设置字体大小。 “文本颜色”选择器：设置文字颜色。

7 四、格式化文本 在文档中选择文本，然后在“格式”下拉列表框选择“标题3”，“字体”下拉列表框中选择“黑体”，并单击“ ”按钮使其以粗体显示；
文本属性面板还有设置字体粗细、文本对齐方式、文本超级链接等项。当然也可以通过菜单来设置文本属性，比文本属性面板的选项更多。 在文档中选择文本，然后在“格式”下拉列表框选择“标题3”，“字体”下拉列表框中选择“黑体”，并单击“ ”按钮使其以粗体显示； 在文档中选择文本，利用“文本颜色”选择器设置文本颜色，比如：#FF0000（红色）； 在文档中选择文本，单击“ ”按钮使其以斜体显示，再利用菜单【文本】->【样式】->【删除线】设置字体样式为删除线型。

8 四、 格式化文本 图1-2 编辑字体列表 1-3 “编辑字体列表”对话框

9 任务三：网站首页的制作 项目2 图像的应用

10 项目2- 项目效果展示 目标效果：图1 当前效果：图2

11 一、 常用网页图像格式 1. JPEG/JPG格式
扩展名是.jpg/.jpeg，是一种有损压缩格式，JPEG格式可以支持多达16M种颜色，能很好地实现全彩图像，有利于表现带有渐变色彩且没有清晰轮廓的图像。网络上自然风景图片、鲜花图片多为JPEG格式，如图所示。

12 2.　GIF格式 扩展名是.gif，采用无损压缩存储，在不影响图像质量的情况下，它还支持透明色，可以去掉图像的背景。但是GIF只支持最多256色，因此多用于渐变色彩不明显或者轮廓清晰的图像。 GIF最突出的一个特点是可以制作动画图像。网络上很多图标、按钮、漫画卡 通图片等多为GIF格式，如图所示。

13 3.　PNG格式 扩展名是*.png，是专门为网络而生的图像格式。 PNG是一种能存储32位信息的位图文件格式，和GIF格式一样，png也使用无损压缩方式。类似于GIF，PNG也可以是动画，比GIF能容纳更多的颜色，如图所示。 缺点：体积太大

14 二、插入图像 1、前期准备： 创建站点：计算机文化基础精品课程 创建文件夹：img 将图像文件放入到文件夹中 2、插入方法
方法一：通过菜单插入 （1）选择要插入的位置 （2）选择“插入”菜单

15 （3）选择“图像”选项 （4）选择目标文件夹 （5）选择目标图片 （6）确定 方法二：(推荐) 在文件面板中拖动目标图片到 目标位置

16 三、图像大小调整 方法一：通过控制柄调节 步骤： （1）选择图片 （2）分别拖动位于图片下方、右侧和右下角的三个控制柄，调整图片高度和宽度。

17 方法二：通过属性面板调整 （1）选择图片 （2）在属性面板中调整图像的宽度和高度。

18 两种图像大小调整方法的比较： 方法一：拖动法： 不精确，适合于粗调 方法二：属性面板法： 精确，适合于微调

19 四、在层中插入图像及调整 插入方法和调整方法与在表格中插入方法相同。

20 五、 表格背景图片的设置 1、背景图片设置要求： 背景图片要服务于前景内容。 背景图片不能影响前景内容的显示效果。 颜色不能太鲜明。
五、 表格背景图片的设置 1、背景图片设置要求： 背景图片要服务于前景内容。 背景图片不能影响前景内容的显示效果。 颜色不能太鲜明。 边界要模糊。

21 2、行/列背景图片设置方法： （1）选中行/列 （2）在属性面板中，拖动“背景”后面的“文件指向图标”到站点中的目标图片。

22 3、单元格背景图片设置方法： （1）选中单元格 （2）在属性面板中，拖动“背景”后面的“文件指向图标”到站点中的目标图片。

23 六、网页背景图片的设置方法 1、网页背景图片设置要求： 背景图片要服务于前景内容。 背景图片不能影响前景内容的显示效果。 颜色不能太鲜明。
边界要模糊。

24 2、网页背景图片设置方法： 在网页空白处单击 在属性面板中单击“页面属性”按钮 在“背景图像”中点击“浏览”选择图片

25 2.2 插入图像

26 七、 小结 1、图片的分类：三类 2、图像的插入方法：两种 3、图像大小的调整方法：两种 4、在层中插入图像的方法
七、 小结 1、图片的分类：三类 2、图像的插入方法：两种 3、图像大小的调整方法：两种 4、在层中插入图像的方法 5、设置行、列、单元格背景的方法 6、设置网页背景的方法

27 项目三：多媒体元素 项目3 应用多媒体元素

28 【学习概述】 在网页中应用多媒体效果当前十分普遍，例如大量使用Flash动画、视频、声音、Java Applet等使网页动感十足，变化多端。本章内容包括插入Flash元素、插入背景音乐、插入视频、插入图像查看器等内容。本章的重点是插入Flash元素，难点是插入图像查看器。

29 一、多媒体基础 7.1.1 什么是Flash Flash 是由macromedia公司推出的交互式矢量图和 Web 动画的标准。网页设计者使用 Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。并且它是矢量的，所以即使放大也不会出现变形和模糊。这种动画文件体积小，效果华丽，还具有极强地的互动效果，甚至有人利用这种技术制作功能非常强大的游戏。Flash的源文件扩展名为“.fla”，生成的用于网络上传输的Flash格式为“.swf”。 7.1.2 视频格式 视频格式有很多种，但是在网络上应用的视频格式多为：avi、wmv、asf、 mpeg、rm、rmvb、mov、Flv等。 7.1.3 音频格式 在网络上应用的音频格式多为：wav、mp3、aif、midi、ra、ram、rpm等。

30 7.1.4 插入多媒体 要在网页中添加以上多媒体文件，可以执行【插入】->【媒体】下的子菜单命令如图7-1所示或在“插入”工具栏的“常用”类别中，选择“媒体”，然后单击所需的媒体图标按钮如图7-2所示。 图 7-1【媒体】子菜单 图7-2 插入媒体

31 二、多媒体网页效果 7.2.1 插入Flash动画 目前flash动画备受世人瞩目，flash动画被大量地用于网页。这种动画文件体积小，效果华丽，还具有极强地的互动效果，甚至有人制作功能非常强大的游戏。 新建站点“dmt”（站点名称为“多媒体”），创建网页文档“dmt.htm”。然后创建一个1行2列的表格，如图7-4所示。 图7-4 一个1行2列的表格

32 （2）选择Flash文件（本例为本章目录下的“banner.swf”文件）。
（1）在第二个单元格内定位光标。执行【插入】->【媒体】->【Flash】命令或在“插入”工具栏的“常用”类别中，选择“媒体”，然后单击“插入 Flash”图标按扭。显示“选择文件”对话框，如图7-5所示。 （2）选择Flash文件（本例为本章目录下的“banner.swf”文件）。 图7-5 “选择文件”对话框

33 （3）单击“确定”按钮，显示“对象标签辅助功能属性”对话框，如图7-6所示。各个属性如下：  标题：媒体对象的标题。
 标题：媒体对象的标题。  快捷键：输入等效的键盘键（一个字母）。例如，您输入A作为快捷键，则使用“Ctrl+A”键在浏览器中选择该对象。  Tab键索引：输入一个数字以指定该对象的Tab键顺序。 设置各个选项如图。 图7-6 “对象标签辅助功能属性”对话框

34 （4）单击“确定”按钮，文档中效果如图7-7所示。
图7-7 文档中Flash效果 （5）选择该动画，单击Flash属性面板中的播放按钮。Flash动画就可以在文档中直接播放了，如图7-8所示。 图7-8 在文档中播放Flash

35 选择Flash动画后，显示Flash属性面板，如图7-9所示。在这里读者可以设置Flash动画的属性。
名称：标识影片的名称，比如命名为“banner”。 宽：以像素为单位指定影片的宽度。 高：以像素为单位指定影片的高度。 文件： Flash文件的路径。单击文件夹图标可以选择一个文件，或者直接键入文件路径。 源文件：指定 Flash 源文档（后缀名为.FLA）的路径。 编辑：启动 Flash软件以编辑FLA文件。 重设大小：重新设置选定影片的大小。

36 循环：若选中该选项时影片将连续播放；若没有选中该选项，则影片在播放一次后即停止播放。
自动播放：若选中该选项，则在加载页面时自动播放影片，一般要选中此项。 垂直边距：指定影片上、下空白的像素数。 水平边距：指定影片左、右空白的像素数。 品质：设置影片播放期间的质量。设置越高，影片的观看效果就越好，但速度慢。设置越低，速度快但影片的观看效果就越差，“高品质”选项是注重外观而非速度。“自动低品质”选项是首先注重速度，然后才是外观。“自动高品质”选项是首先注重品质，然后才是速度。 比例：影片如何适合在宽度和高度文本框中设置的尺寸。默认值设置显示整个影片。有“无边框”和“严格匹配”两选项。 对齐：设置影片在页面上的对齐方式。 背景颜色：设置影片的背景颜色。 参数：影片的附加参数。单击“参数”按钮，显示“参数”对话框，如图7-10所示。在对话框中可以设置多种“参数—值”。 图7-10 “参数”对话框

37 在Dreamweaver中可以直接制作并插入Flash文本。Flash文本是动态效果的文本。插入Flash文本的步骤如下：
（1）在上面制作的表格中第一个单元格内定位鼠标光标。 （2）在“插入”栏的“常用”类别中，选择“媒体”，然后单击“Flash文本”图标 按扭，或执行【插入】->【媒体】->【Flash文本】命令。 （3）显示“插入 Flash 文本”对话框，对话框中各项属性设置如图7-11所示。 图7-11 “插入 Flash 文本”对话框

38 （4）单击“确定”按钮，显示“对象标签辅助功能属性”对话框，对话框中各项属性设置如图7-12所示。
图7-12 “对象标签辅助功能属性”对话框 （5）单击“确定”按钮。单击属性面板中的“播放”按钮，播放效果如图7-13所示，当鼠标移动到该Flash文本上时，效果如图7-14所示。 图7-13 文档中播放效果 图7-14 鼠标移动到文本效果

39 Dreamweaver可以快速创建动态Flash按钮，步骤如下： （1）在文档中创建表格并定位光标，如图7-15所示。
图7-15创建表格并定位光标 （2）在“插入”栏的“常用”类别中，选择“媒体”，然后单击“Flash 按钮”图标或执行【插入】->【媒体】->【Flash 按钮】命令。 显示“插入 Flash 按钮”对话框，如图7-16所示。 图7-16“插入 Flash 按钮”对话框

40 （3）设置完成后，单击确定按钮。文档中效果如图7-17所示。 （4）然后再连续插入几个按钮，按快捷键【F12】预览如图7-18所示。
图7-17 文档中Flash 图7-18预览Flash 按钮

41 7.2.5 插入Flash Video Flash Video现在在网站上非常流行。Flash 视频文件后缀名为“.FLV”。插入Flash视频是Dreamweaver 8版本新增加的功能。插入Flash 视频步骤如下。 （1）在文档“dmt.htm”右边的空白单元格内定位鼠标。 （2）在“插入”栏的“常用”类别中，选择“媒体”，然后单击“Flash video”图标或执行【插入】->【媒体】->【Flash视频】命令，显示“插入Flash视频”对话框。 （3）在“插入Flash视频”对话框中，从“视频类型”弹出式菜单中选择“累进式下载视频”或“流视频”。若选择“累进式下载视频”；将 Flash 视频文件下载到站点访问者的硬盘上，然后播放。若选择“流视频”；对Flash视频内容进行流式处理，边缓冲边播放该内容。 （4）比如“视频类型”选择“累进式下载视频”选项：  URL：指定FLV文件的路径。  外观：指定Flash视频组件的外观。  宽度：以像素为单位指定FLV文件的宽度。  高度：以像素为单位指定FLV文件的高度。  自动播放：当网页打开时是否播放视频。  自动重新播放：指定播放控件在视频播放完之后是否返回起始位置。

42 （5）如果必要，提示用户下载 Flash Player：在页面中插入代码，该代码将检测查看Flash视频所需的Flash Player版本，并在用户没有所需的版本时提示它们下载Flash Player的最新版本，设置各个选项如图7-19所示。 图7-19 “插入Flash 视频”对话框

43 （6）单击“确定”按钮，插入Flash 视频操作完成，如图7-20所示。
图7-20 文档中Flash Video效果

44 插入shockwave对象 插入java applet 插入activeX对象 插入背景音乐 插入视频文件

45 三、 总结与提高 1、flash背景透明化 参数，wmode transparent 2、插入图像查看器 插入，媒体，图像查看器

46 项目四、CSS样式 第4章 CSS 样式表

47 【学习概述】 CSS样式表的主要优点有： 一、防止文字大小因浏览器的设置而改变，影响页面布局 二、便于对网页整体风格进行控制；
三、便于网站更新。 四、提高网页内容格式的设置速度。 本章内容包括： CSS样式表的基本概念，CSS样式表面板的使用方法，CSS样式表的创建、使用、修改、删除， 附加样式表的创建与使用，CSS样式表的属性设置，CSS样式表滤镜效果，不同CSS样式表的冲突等内容。 本章重点内容是：CSS样式表的创建、使用、修改、删除，附加样式表的创建与使用 本章难点内容是：附加样式表的创建与使用。

48 一、 CSS 样式表概述 8.1.1什么是CSS？ 当初一帮技术人员想出HTML，主要侧重于定义内容，比如<p>表示一个段落，<h1>表示标题，而并没有过多设计HTML的排版和界面效果。随着Internet的迅猛发展，HTML被广泛应用，上网的人们当然希望网页做得漂亮些，因此HTML排版和界面效果的局限性日益暴露出来。为了解决这个问题，人们也走了不少弯路，用了一些不好的方法，比如给HTML增加很多的属性，过多利用表格来排版，直到CSS出现。 CSS也被称为层叠样式表，是一系列格式设置规则，它们可以精确控制 Web 页面内容的外观。 为什么称样式表为层叠的呢？ 打一个不很准确的比喻：如我们评价一个人，需要听取大家的意见再汇总，有人说，这个人诚实，有的说干事踏实，有的说很有责任心.....，这样通过这些意见的“层叠”，就可大体地知道这个人的品质；即使是同样的标志，也可以通过层叠使它们显示出不同的特性来，随着学习的深入，你会发现层叠的具体含义及一些妙用的。

49 8.1.2 CSS样式面板 位置： 面板组上方的第一个 功能：
在CSS样式面板中可以查看与当前文档相关联的样式定义以及样式的层次结构。可以使用CSS样式面板附加外部CSS样式表、创建、编辑和删除CSS样式。

50 8.1.3 CSS 样式的类型 CSS类型包括三种：类、标签和高级。在Dreamweaver中可以轻松设定不同类型的CSS样式。
1．类（可用于任何标签） 可作为 class 属性应用于文本或文本块的自定义样式。 注意：类名称必须以句点开头，可以包含任何字母和数字。如果创建时没有输入开头的句点，Dreamweaver 将自动输入句点

51 2．标签（重新定义特定标签的外观） 重定义特定 HTML 标签的默认格式。
当读者选择该选项时，可以在“标签”项的下拉菜单中选择一个标签或直接输入一个标签。

52 3．高级（ID、伪类选择器等） 为具体某个标签组合或所有包含特定 Id 属性的标签定义格式。提供的选择器包括 a:active、a:hover、a:link 和 a:visited四种。

53 二、在网页在中应用CSS样式 8.2.1 CSS样式的创建、应用、编辑与删除 1、创建CSS样式： （1）创建需要格式设置的网页文档。
（3）在“新建CSS 规则”对话框中，设置“选择器类型”为“类”，“名称”为“.biaoti”，“定义在”为“仅对该文档”。 （4）单击【确定】按钮，显示“.biaoti的CSS 规则定义”对话框。 （5）在“.biaoti的CSS 规则定义”对话框中选择“类型”属性，设置各个选项的值。 （6）单击【确定】按钮，完成CSS样式的创建。

54 8.2.2 扩展应用 补充：创建“类”样式的简便方法： 2、应用CSS样式： 3、修改CSS样式： 4、删除CSS样式：
（2）在属性面板中选择“样式”下拉菜单并选择样式“biaoti”。 3、修改CSS样式： 在CSS样式面板中选择要编辑的CSS样式名称，单击CSS样式面板上的“编辑”按钮 。 4、删除CSS样式： 在CSS样式面板中选择要删除的CSS样式名称，单击CSS样式面板上的“删除”按钮。 扩展应用 1、创建“标签”CSS样式 2、创建“高级” CSS样式 补充：创建“类”样式的简便方法： 直接在编辑窗口中设置文本属性

55 8.2.3 外部样式表的创建与使用 1、创建外部样式表 （1）创建需要格式设置的网页文档。
（2）在“CSS 样式”面板中，单击面板右下侧的“新建 CSS 规则”按钮，显示“新建CSS 规则”对话框。 （3）在“新建CSS 规则”对话框中，设置“选择器类型”为“类”，“名称”为“.timu”，“定义在”为“新建样式表文件”。 （4）单击【确定】按钮，显示“保存样式表文件”对话框，选择样式表文件存放的路径，填写样式表文件的名称:dra。 （4）单击【确定】按钮，显示“.timu的CSS 规则定义”对话框。 （5）在“.timu的CSS 规则定义”对话框中设置各个选项的值 （6）单击【确定】按钮，完成CSS样式的创建。

56 2、使用外部样式表 （1）在CSS样式面板中选择“附加样式表”按钮 （2）在“链接外部样式表”对话框中选择需要链接的外部样式表，点击确定。
（3）选择外部样式表文件在本文件中的使用方式：链接或者导入，点击确定。 （4）在CSS面板中可以看到样式表文件和样式规则。 （5）在需要设置格式的网页中，选择要设置CSS样式的文字。 （6）在属性面板中选择“样式”下拉菜单并选择需要的样式。

57 四、 设置CSS各种样式属性 1、“类型”属性： 在“类型”属性中可以设置字体、大小、粗细、样式、变体、行高、大小写、修饰、颜色等。 注意：
文本大小以像素为单位可以有效地防止浏览器破坏文本。 2、“背景”属性 在“背景”属性中可以设置背景颜色，背景图像，重复，水平位置，垂直位置，附件等属性。

58 3、“区块”属性 在“区块”属性中可以设置单词间距，字幕间距，垂直对齐，文本对齐，文字缩进，空格，显示等属性。 4、“方框”属性 在“方框”属性中可以设置宽，高，浮动，清除，填充，边界等属性 5、“边框”属性 在“边框”属性中可以设置样式，宽度，颜色等属性 6、“列表”属性（标签，li） 在“列表”属性中可以设置类型，项目符号图像，位置 7、“定位”属性（层） 在“定位”属性中可以设置类型，宽，高，显示，Z轴，溢位，置入，裁切 8、“扩展”属性（光标，help） 在“扩展”属性中可以设置分页，视觉效果

59 五、 使用样式表设置超级链接样式 1、选择器类型：高级 2、a:link 3、设置字体，大小，颜色等 4、确定
5、分别设置a:visited，a:active，a:hover 6、设置超级链接

60 六、 css的冲突 将两个或更多 CSS 规则应用于同一文本时，这些规则可能会发生冲突并产生意外的结果。浏览器按以下方式应用 CSS 规则：
如果应用于同一文本的两种规则的属性发生冲突，则浏览器显示最里面的规则（离文本本身最近的规则）的属性。因此，如果外部样式表和内联样式同时影响文本元素，则应用内联样式。 如果有直接冲突，则自定义 CSS 规则（使用 class 属性应用的规则）中的属性将覆盖 HTML 标签样式中的属性。

61 <body> <p class="green">如果两个样式发生冲突时，<br /> <font class="red" color="blue">浏览器一般按照与网页元素关系远近来显示。</font><br /> HTML与CSS样式有冲突时，浏览器优先按CSS样式中定义的属性来显示。</p> </body> </html>

62 项目五：表单 第5章 表单

63 【学习概述】 表单的作用是非常重要的。比如获得Web站点用户的信息，访问者可以在表单对象中输入信息，然后提交这些信息。其他的如在站点内加入搜索引擎等也必须利用表单技术。本章重点内容是：文本域、复选框、单选按钮、列表/菜单的使用。难点内容是：制作发送电子邮件表单、制作跳转菜单和在网页中加入搜索引擎等较为高级的内容。

64 一、 表单概述 什么是表单 表单是实现网页互动的元素，与客户端和服务器端脚本进行结合使用，可以实现互动性。表单支持客户端-服务器关系中的客户端。当访问者在Web浏览器中显示的表单中输入信息，然后单击【提交】按钮时，这些信息将被发送到服务器，服务器端脚本或应用程序对这些信息进行处理，最后服务器端将处理结果返回给客户端。用于处理表单数据的常用服务器端技术包括cgi、asp/asp.net、jsp、PHP等。 处理表单分为3个步骤进行： （1）执行【客户端填写表单内容并提交表单】->【服务器端调用脚本处理表单内容】->【服务器端将处理结果返回给客户端】命令，如图12-1所示。 图12-1处理表单流程图

65 表单对象 Dreamweaver提供的表单对象包括表单、文本字段、隐藏域、文本区域、复选框、单选按钮、单选按钮组、列表菜单、跳转菜单、图像域、文件域、按钮、标签、字段集等。可以通过执行【插入】->【表单】命令来插入表单对象（如图12-2所示），也可以单击“插入”栏的“表单”类别中的表单对象按钮（如图12-3所示）。 图12-2 表单子菜单 图12-3 表单工具栏

66 创建表单 （1）新建一个网页，将光标定位在希望表单出现的位置上。 （2）执行【插入】->【表单】->【表单】命令，或选择“插入”栏上的“表单”类别，然后单击“表单”按钮。 （3）这时文档中将插入一个空的表单，如图12-5所示。在“设计”视图中，红色的虚轮廓线表示表单。 注意：如果没有看到红色的虚轮廓线，请检查是否选中了【查看】->【可视化助理】->【不可见元素】选项。 图12-5红色的虚轮廓线表示表单 （4）选定上面的表单，显示表单属性面板，如图12-6所示。 图12-6表单属性面板

67 表单属性： 表单名称：标识该表单的惟一名称。命名表单后，就可以使用脚本语言（如JavaScript 或VBScript）引用或控制该表单。 动作：指定处理该表单的动态网页或脚本的路径（如asp/asp.net、php、jsp等）。可以在“动作”文本框中键入完整路径，也可以单击文件夹图标以选择一个动态网页或脚本。 方法：选择将表单数据传输到服务器的方法，POST方法将在HTTP请求中嵌入表单数据；GET方法是将值附加到请求该页面的URL中；默认方法是使用浏览器的默认设置将表单数据发送到服务器。 MIME类型：指定对提交给服务器进行处理的数据使用MIME编码类型，默认设置为 “application/x-www-form-urlencode”通常与POST方法协调使用。如果要创建文件上传域，需指定“multipart/form-data MIME”类型。 目标：设置提交表单后的目标浏览器。 插入文本字段 文本域可以接受任何类型的输入内容。文本可以单行或多行显示，也可以以密码域的方式显示。 插入文本字段步骤如下： （1）定位光标在表单中，在表单中插入表格，并填充内容，如图12-7所示。

68 图12-7 在表单中插入表格 （2）将光标定位在“用户名”右边的单元格中，执行【插入】->【表单】->【文本域】命令，或选择“插入”栏上的“表单”类别，然后单击“文本字段”图标，显示“输入标签辅助功能属性”对话框，如图12-8所示。 图12- 8 “输入标签辅助功能属性”对话框

69 （3）若以后不想在插入表单元素时显示“输入标签辅助功能属性”对话框，单击对话框下面的链接文字“请更改‘辅助功能’首选参数”，显示“首选参数”对话框，如图12-9所示，取消“表单对象选项”。
图12-9 取消“表单对象选项” （4）单击“确定”按钮，保持“输入标签辅助功能属性”对话框中的值不变，单击“确定”按钮，文本字段被插入文档中，如图12-10所示。 图12-10文本字段被插入文档中

70 （5）选择该文本域，显示文本域属性面板，如图12-11所示。
图12-11 文本域属性面板 文本域属性： 文本域：指定该文本域惟一的名称。 字符宽度：设置文本域中最多可显示的字符数。 最多字符数：设置单行文本域中最多可输入的字符数。 换行：选中了“多行”选项，指定当用户输入的信息较多时如何换行显示。 类型：指定文本域为单行、多行还是密码域。 初始值：指定在载入表单时文本域中要显示的内容。 （6）为表格增加一行，并在该行左边的单元格中输入说明文字。将光标定位在该行右边的单元格中，然后执行【插入】->【表单】->【文本字段】命令，插入一个文本字段。选中该文本字段，在属性面板中将“类型”由“单行”改为“密码”，则创建一个密码域。 （7）为表格增加一行，并在该行左边的单元格中输入说明文字。将光标定位在该行右边的单元格中，然后执行【插入】->【表单】->【文本字段】命令，插入一个文本字段。选中该文本字段，在属性面板中将“类型”由“单行”改为“多行”，则创建一个多行文本域。此时文档中页面效果如图12-12所示。

71 图12-12 插入多行文本字段文档中页面效果 （8）保存，按快捷键F12预览，在文本字段中输入文字，效果如图12-13所示。 图12-13 预览并在文本字段中输入文字 注意：要插入多行文本字段也可以直接执行【插入】->【表单】->【文本区域】命令，效果和插入多行文本字段一样。

72 插入单选按钮 使用单选按钮，只能在一组选项中选择一个选项，单选按钮通常成组出现，并且同一组中的所有单选按钮必须具有相同的名称。插入单选按钮步骤如下： （1）为刚才的表格增加一行，并在该行左边的单元格中输入说明文字。将光标定位在该行右边的单元格中，然后执行【插入】->【表单】->【单选按钮】命令，插入一个单选按钮。选中该单选按钮，属性面板如图12-14所示。 图12-14 单选按钮属性面板 单选按钮属性： 单选按钮：在文本框中，为该对象指定一个名称。 选定值：设置在该单选按钮被选中时发送给服务器的值。 初始状态：当在浏览器中载入表单时，该单选按钮是否被选中。 （2）选中该单选按钮，在属性面板中将“初始状态”由“未选中”改为“已选中”，并在该单选按钮右边输入文字说明。 （3）再插入一个单选按钮，并在该单选按钮右边输入文字说明，此时文档中页面效果如图12-15所示。

73 图12-15 插入单选按钮 插入单选按钮组 插入单选按钮可以一个一个地插入，也可以用插入单选按钮组的方法一次插入多个单选按钮。插入单选按钮组步骤如下： （1）为刚才的表格增加一行，并在该行左边的单元格中输入说明文字。将光标定位在该行右边的单元格中，然后执行【插入】->【表单】->【单选按钮组】命令，显示“单选按钮组”对话框，如图12-16所示。 图12-16 “单选按钮组”对话框

74 （2）在“单选按钮组”对话框中各个参数如下：
名称：指定该单选按钮组的名称。 单选按钮：在单选按钮组列表中，显示了创建的单选按钮组中各个单选按钮的“标签”和“值”对。单击加号“+”按钮向组添加一个单选按钮，单击向上或向下箭头重新排序这些按钮。 布局，使用：选择希望 Dreamweaver 对这些按钮进行布局时使用的格式，可以使用换行符或表格来设置这些按钮的布局。 在“单选按钮组”对话框中设置各选项如图12-17所示。 图12-17 在“单选按钮组”对话框中设置各选项 （3）单击“确定”按钮，此时文档中页面效果如图12-18所示。

75 图12-18 插入单选按钮组 （4）选中该行第一个单选按钮，在属性面板中将“初始状态”由“未选中”改为“已选中”。 插入复选框 复选框可以让用户从一组选项中选择多个选项，每个复选框都是一个独立的元素，各自必须有一个惟一的名称。插入复选框步骤如下： （1）为刚才的表格增加一行，并在该行左边的单元格中输入说明文字。将光标定位在该行右边的单元格中，然后执行【插入】->【表单】->【复选框】命令，这样就插入了一个复选框。 （2）在该复选框右边输入文字说明。选中该复选框，设置复选框属性面板中的各项属性。

76 复选框属性： 复选框：在文本框中为该对象指定一个名称。 选定值：设置在该复选框被选中时发送给服务器的值。 初始状态：确定在浏览器中载入表单时，该复选框是否被选中。 （3）按照上面的方法再插入几个复选框，并输入必要的文字。此时文档中页面效果如图12-19所示。 图12-19 插入复选框 插入列表/菜单 列表/菜单在一个列表中显示选项值，用户可以从该列表中选择多个选项。插入列表/菜单步骤如下： （1）为刚才的表格增加一行，并在该行左边的单元格中输入说明文字。将光标定位在该行右边的单元格中，然后执行【插入】->【表单】->【列表/菜单】命令，列表/菜单被插入文档中。 （2）选中该列表/菜单，在属性面板中单击“列表值”按钮。显示“列表值”对话框，如图12-20所示。

77 图 “列表值”对话框 （3）在“列表值”对话框中，设置如图12-21所示的“项目标签-值”对 图12-21 编辑“项目标签-值”对 （4）单击“确定”按钮，选中列表/菜单，属性面板如图12-22所示。 图12-22 列表/菜单属性面板

78 列表/菜单属性： 列表/菜单：为该列表/菜单指定一个惟一的名称。 类型：指定为“菜单”选项，还是显示“列表”选项。 高度：设置“列表”类型要显示的项数。 选定范围：用户是否可以从“列表”类型列表中选择多个项。 列表值：打开一个对话框，可以在该对话框中向菜单中添加菜单项。 初始化选定：设置列表中默认选择的菜单项。 （5）此时文档中页面效果如图12-23所示。 图12-23 插入列表/菜单 （6）若在列表/菜单属性面板中选择“类型”为“列表”，如图12-24所示设置各个选项。 图12-24 列表/菜单属性面板

79 文件域属性： 文件域名称：指定该文件域对象的名称。 字符宽度：指定该域最多可显示的字符数。 最多字符数：指定域中最多可容纳的字符数。 （3）保存，按快捷键F12预览，网页效果如图12-27所示，单击“浏览”按钮，会显示“选择文件”对话框。 图 “选择文件”对话框