《Dreamweaver8和Flash8案例教程》第4章 表单、样式表.ppt

1、第4章西餐、样式表和网页中的其他目标；4.1案例11“电脑配置调查表”网页；4 . 1 . 1 . 1学习目标“电脑配置调查表”页面如图4-1-1所示。牙齿网页以表格形式列出了计算机主要附件的调查信息。按照页面上的提示进行选择或输入后，可以单击“提交”按钮，将网页上的信息提交到服务器上的数据库。图4-1-1“电脑配置调查表”网页的显示效果，表单是用户使用浏览器查询和添加web网站数据库的界面，用户可以使用表单向服务器提交信息，以便输入信息或选择选项等操作。牙齿查询方法称为交互或双向。这些西餐对象包括文本字段、下拉框、核取方块、单选按钮等。西餐对象是用户可以输入信息的地方，西餐字段是放置西餐对象

2、的区域，只有西餐字段中的西餐对象才能传递信息。4.1.2操作过程，创建1西餐字段和插入西餐对象(1)创建西餐字段和删除西餐字段：将光标移动到要插入西餐字段的位置，然后单击插入(西餐)栏上的“西餐”按钮，在网页编辑窗口中创建表单字段(如图4所示)、4.1.3相关知识、图4-1-2创建的表单字段按back space键收拢西餐字段。西餐字段在浏览器中不可见。显示西餐字段：创建西餐字段后，如果看不到西餐字段的矩形红色线，请单击“查看”“可视化助理”“不可见元素”菜单命令将其选中，以显示西餐字段的矩形红色线。删除西餐字段：单击西餐字段的边缘，选择西餐字段，然后按Delete键删除西餐字段。(2)选择西

3、餐字段的设置属性西餐字段后，西餐字段的“属性”栏将如图4-1-3所示。在图4-1-3西餐字段“属性”栏中，在“西餐名称”文本框：牙齿文本框中，输入西餐字段的名称。西餐字段的名称可用于控制西餐字段属性的脚本语言，如JavaScript和VBScript。动作文本框和按钮：用于输入包含脚本节目或脚本程序的HTML文件。方法下拉列表框：用于选择在客户端和服务器之间传输数据的方法。三个茄子选项为“默认值”、“GET”(将西餐值附加到URL并发送服务器GET请求)和“POST”(传递，在消息正文中发送西餐值并发送服务器POST请求)。“类”下拉列表框：您可以使用各种选项(如“重命名”、“管理样式”和“创

4、建的CSS样式名称”)选择CSS样式、重命名CSS样式以及创建新的CSS样式。(3)插入西餐对象的方法是，将光标移动到要插入西餐对象的表格，然后插入西餐对象。插入西餐对象的方式与插入表格的方式相同。单击，将光标移动到要插入西餐对象的位置，然后在插入(西餐)列中单击相应的按钮，以在光标中插入相应的西餐对象。或者，单击“插入”“西餐”菜单命令，弹出下一层级菜单。根据要插入的西餐对象的类别，还可以通过单击菜单中的菜单命令插入西餐对象。西餐对象的“属性”列包含名称文本框，您可以在该文本框中输入程序可用于指定西餐对象的西餐对象的名称。(1)设置文本字段属性：文本字段有时称为文本字段，在表单中经常使用文本

5、字段。可以是接收文本、数字和文字的单行或多行。文本字段的“属性”栏的工作方式如下图4-1-4所示：2西餐对象，图4-1-4文本字段，的“属性”列，“字符宽度”文本框：文本字段的宽度允许显示最大字符数。类型列：牙齿列包含三个茄子的单个选项，用于选择“单行”、“多行”或“密码”文本字段。密码文本字段的特征是“*”行，而不是用户输入文本时密码文本字段中显示的字符。选择“多行”单个选项时，相应的“属性”列将更改。“初始值”文本框更改为带有滚动条的多行文本框，“换行”下拉框处于活动状态，“字符宽度”文本框更改为“行数”文本框，您可以在其中输入文本框中的行数。初始值文本框：用于输入文本框的初始内容。“换行

6、”下拉框：仅在选择多行类型时有效。换行下拉列表框包含四个茄子选项，其含义如下：默认值：使用浏览器的默认值。关闭：输入超出文本框宽度的文字时，不会换行，但会显示滚动条。虚拟：如果输入字符超过文本框宽度，则自动换行，向服务器发送数据时不会换行。实体：如果输入的字符超出文本框的宽度，则会自动添加回车符并换行。(2)设置复选框属性：复选框处于选中和选中状态，允许您通过多个复选框选择多个项目。如图4-1-5所示，相应的特性列的工作方式如下：图4-1-5复选框的“属性”列，在选中“选定值”文本框：复选框的情况下用于输入数值(通常为1或0)。初始状态栏：牙齿栏包含两个茄子单个选项，用于设置复选框的初始状态。

7、(3)设置单选按钮属性：单选按钮也称为单个选项，一次只能选择一组单选按钮中的一个。属性列如图4-1-6所示。牙齿“属性”列中的选项与复选框“属性”列中的相应选项作用相同。图4-1-6单选按钮的“属性”栏，(4)单选按钮组属性的设置：单选按钮组也称为单个选项组。单击“插入”(西餐)栏上的“单选按钮组”按钮后，将出现“单选按钮组”对话框，如图4-1-7所示。图4-1-7单选按钮组对话框。使用牙齿对话框可以设置单选按钮组中单选按钮的数量、名称和初始值。要添加选项，请单击按钮。要删除选项，请选择要删除的选项，然后单击按钮。要重新排列选项的显示顺序，请选择要移动的选项，然后单击或按钮。单选按钮组的属性栏

8、如图4-1-6所示。(5)设置按钮属性：按钮用于创建提交和重置按钮，还可以调用具有属性列的函数，如图4-1-8所示。每个选项的工作方式如下：“标签”文本框：用于在按钮上输入文字。动作栏：单击“牙齿”选项后，有三个茄子单个选项可用于选择发生的动作类型。提交西餐：选择此选项后，可以将整个表格提交给服务器。重置西餐：选择此选项后，可以取消以前的输入并重置表单。无选中此选项时，表示这是可用于调用脚本程序的普通按钮。图4-1-8按钮的“属性”栏，(6)设置列表/菜单属性：列表/菜单的作用是将一些选项放置在带有滚动条的列表框中。如图4-1-9所示，图4-1-9列表/菜单中的“属性”列、“类型”列：有两个茄

9、子单个选项：“菜单”和“列表”。“菜单”是下拉列表框。选择“列表”选项后，右侧的选项变为可选，滚动条出现在列表框的右侧。高度文本框：允许您输入列表的高度值，即可以显示的行数。“选择范围”复选框：选中时，表示列表中的每个选项可以同时选择多个项目。初始化时选定的列表框：允许您在首次弹出菜单时设置菜单的默认选项。“列表值”按钮：单击牙齿按钮时，将弹出“列表值”对话框，使用的方法与图4-1-7中所示的方法大致相同。牙齿对话框允许您输入菜单或列表中显示的选项内容(在“标签”列中)，以及提交选项后的返回值(在“值”列中)。，(7)设置跳转菜单属性：跳转菜单将链接跳转到下拉列表框，其外观与列表/菜单相同，是

10、菜单的另一种形式。如果使用者按一下牙齿选单中的其中一个选项，目前页面或框架会跳至其他页面。要创建跳转菜单，请执行以下操作：单击跳转菜单按钮后，将出现“插入跳转菜单”对话框，如图4-1-10所示。在“文本”文本框中输入菜单命令的说明文本，该文本将显示在“菜单项”列表框中。这些选项的工作方式如下：和按钮的作用与图4-1-7中显示的按钮相同。在“选择时转到URL”文本框中，输入要跳转到的档案的路径和文件名。也可以单击“浏览”按钮弹出“选择档案”对话框，然后选择链接文件。在打开URL自下拉列表框中，选择要打开文件的位置。在“菜单名称”文本框中，输入跳转菜单的名称。选项栏包含两个复选框。选中在菜单后插入

11、移动按钮复选框后，移动按钮将添加到菜单的右侧。如果选中了“更改URL后选择第一个项目”复选框，则跳转后菜单复盖的第一个选项将设置为默认选项。单击确定按钮将退出对话框，并在页面上显示跳转菜单。如图4-1-10所示，设置后，浏览器中显示的跳转菜单如图4-1-11所示。图4-1-10“插入跳转菜单”对话框，图4-1-11页面内的跳转菜单，选择您创建的跳转菜单时，属性栏与图4-1-9大致相同。4.2.1学习目标“硬盘性能指标”页面如图4-2-1所示。在牙齿网页中，使用样式表设置其中文字的样式。4.2 案例12“硬盘性能指标”网页，图4-2-1“硬盘性能指标”网页的显示效果网页中的许多字符使用相同的属性

12、设置时，所有字符也必须执行相同的属性设置。这可能会在制作网页时发生很多重复性任务，并且web页上的HTML文件太大，导致网页传输和下载速度变慢。要解决牙齿问题，可以通过设置经常出现在页面上的具有相同或相似属性的对象的完整属性来创建样式表。层叠样式表(CSS)是1996年开发的，可以统一设置版面设计、背景、字体大小、颜色和表格等属性，然后将其用于页面上的相应对象。4.2.2工作流程，1创建CSS样式表(1)CSS样式表编辑器CSS样式表可以均匀设置版面设计、背景、字体大小、颜色和表格等属性，然后将其应用于页面上的相应对象。单击“窗口CSS样式”菜单命令，然后弹出“CSS样式”面板(也称为CSS样

13、式表编辑器)，如图4-2-2所示。这些选项的工作方式如下：4.2.3相关知识，显示窗格：显示所有样式表的名称，“(未定义样式)”表示没有样式。附加样式表按钮：单击可弹出“链接外部样式表”对话框，如图4-2-5所示。再次单击“浏览”按钮将显示“选择样式表档案”对话框，您可以在其中导入外部样式表(档案扩展名为.是CSS)。图4-2-5“链接外部样式表”对话框，“新建CSS规则”按钮(也称为“新建CSS样式”按钮):单击后，将出现“新建CSS规则”对话框(如图4-2所示)，您可以使用牙齿对话框创建新样式。“剪辑样式”按钮：仅当在“CSS样式”面板中选择了样式时有效。图4-2-4所示，可以执行样式表编

14、辑的对话框(例如。style1的CSS规则定义对话框)。可以编辑style1样式。“删除CSS规则”按钮(也称为“删除CSS样式”按钮):单击以删除选定的样式。(2)创建CSS样式表打开“新建CSS规则”对话框(图4-2-3所示)，在“选择器类型”列中选择第一个单个选项，然后在“名称”下拉列表框中输入样式表名称。名字是“.”(您必须以开始，单击对话框中的“确定”按钮后，对话框将退出，并出现“CSS规则定义”对话框，如图4-2-4所示。)。使用“CSS规则定义”对话框定义样式表中的各个对象属性。完成定义后，单击“确定”按钮完成样式表定义。新建样式表的名称将出现在“CSS样式”面板中。(1)在“C

15、SS规则定义”对话框(如图4-2-4所示)左侧的“分类”列中，单击“类型”选项。牙齿对话框如图4-2-4所示。使用牙齿对话框可以设置CSS样式的字体、大小、样式、颜色等。单击“应用”按钮将设置的样式应用于页面。2 CSS样式表定义，(2)在背景属性定义图4-2-4所示对话框左侧的“分类”列中，单击“背景”选项。“CSS规则定义”对话框的“背景”列如图4-2-6所示。您可以使用“背景”栏中的“背景颜色”和“背景图像”按钮以及文本框定义背景颜色和背景图像。其他选项的工作方式如下：图4-2-6“背景”栏，“重复”下拉框：用于设置背景图像的重复方式。“不重复”(左上角只显示一个图像)、“重复”(水平和

16、垂直重复)、“水平重复”(水平重复)和“垂直重复”(垂直重复)。附件档案下拉列表框：设置在内容滚动时是否滚动图像。水平位置和垂直位置下拉列表框：用于为选定对象设置图像的水平和垂直相对位置。选择“值”(value)选项后，右侧的下拉列表框将有效，您可以选择单位。(3)在块属性定义图4-2-4所示的对话框左侧“分类”列中单击“块”选项后，对话框的“块”列将如图4-2-7所示。这些选项的工作方式如下：图4-2-7“块”列，“单词间距”下拉列表框：用于设置单词间距。选择值选项后，您可以输入数值，然后从右侧的下拉列表框中选择数值的单位。您可以在此使用负值。“字符间距”下拉列表框：用于设置字符间距。(值)

17、选项使您可以输入数值，然后从右侧的下拉列表框中选择数值的单位。您可以在此使用负值。垂直对齐下拉列表框：用于设置选定对象相对于父对象或其行的垂直对齐。文字对齐下拉框：用于设置对象第一行文字的对齐方式。文字缩排文本框：可让您输入文字的缩排量。空格下拉列表框：用于设置如何使用文本空格。这包括“正常”(填充所有空格)、“保留”(在用户输入时控制)和“不换行”(添加标签时自动换行)选项。(4)单击框属性定义图4-2-4所示对话框左侧“分类”列中的“框”选项。牙齿对话框右侧的“框”列如图4-2-8所示。这些选项的工作方式如下：图4-2-8“长方体”列、“宽度”和“高度”下拉框：用于设置对象的宽度和高度。它