网页设计与制作课件第9章.pptx

1、案例一目录页 CONTENTS PAGE 项目九 应用表单和行为案例二应用行为为学校网页添加弹出框应用行为3 项目九 应用表单和行为案例说明使用Dreamweaver可以创建带有文本字段、单选按钮、复选框和文件域等输入类型的表单，这些输入类型又被称为表单对象。本案例将要制作的“欢乐购”注册页面，效果如右图所示。该页面包含了表单中的几个主要元素：文本框、密码框、单选按钮、复选框等。通过制作该页面，可以掌握在网页中插入表单标签，以及使用各种结构标签对表单元素进行布局的方法，并了解表单标签在页面中的默认显示效果。4 项目九 应用表单和行为相关知识相关知识表单多用于填写用户信息。右图为京东网注册页面，

2、当用户填写完信息，单击“立即注册”按钮后，所填信息将提交到网站数据库中。一、表单基础知识严格来说，一个完整的表单设计应该分为两部分，即表单对象部分和应用程序部分，它们分别由网页设计师和程序设计师来完成。一般首先由网页设计师制作出一个表单页面（就是表单对象部分），此时的表单只是一个空壳，并不具备工作的能力；还需要程序设计师来编写程序（应用程序部分），实现表单与数据库之间的连接。5 项目九 应用表单和行为二、插入表单由于默认状态下插入的表单是以100%的宽度显示，所以在插入表单前一般都要先创建一个表格或Div，之后将表单插入到单元格或Div中。启动Dreamweaver CC，新建一个网页文档，并

3、在其中插入一个1行1列，“表格宽度”为“600像素”，其他各项均为0的表格。步骤 01将插入点置于表格单元格中。然后单击“插入”面板“表单”类别中的“表单”按钮，在表格中插入表单。步骤 02文档编辑窗口中的表单显示为红色虚线框，浏览器中的表单是不可见的。6 项目九 应用表单和行为接下来设置表单属性，将插入点置于表单区域中，“属性”面板中将显示表单属性。步骤 03u ID：设置表单名称，可用于程序调用。页面中插入的第1个表单默认名为“form1”，后面插入的依次为“form2”“form3”。u Class（类）：对表单应用定义好的CSS样式。u Action（动作）：用于指定处理该表单的动态页

4、或脚本文件的路径，可以直接键入完整的路径，也可以单击编辑框右侧的文件夹图标 来选择站点中的文件。u Method（方法）：选择传送表单数据的方式。u Enctype（编码类型）：指定提交给服务器的数据所使用的编码类型。u Target（目标）：选择打开返回信息网页的方式。7 项目九 应用表单和行为三、插入表单元素可以把表单看做一个容器，表单对象就是放在这个容器里的东西，只有添加了表单对象，表单才能真正起作用，才可以让访问者输入数据或执行其他操作。常用的表单对象主要有文本字段、单选按钮、复选框和按钮等，下图显示了常见的表单对象。8 项目九 应用表单和行为在插入文本字段之前，应确保已经插入一个表单

5、，并且将插入点置于表单中。步骤 01单击“插入”面板“表单”类别中的“文本”按钮，即可在表单中插入一个文本字段。文本字段默认处于选中状态，“属性”面板中显示其属性，如下图所示。步骤 029 项目九 应用表单和行为u Name：用于设置文本字段名称，每个文本字段都必须有一个唯一的名称。u Size（字符宽度）：用英文字符单位来指定文本字段宽度。u Max Length（最多字符数）：设置文本字段中最多可输入的字符数。u Disabled（禁用）复选框：选择该项后，文本字段的边框将变为灰色，并且整个文本框不可用。u Required（复选框）：选中该复选框可将文本框设置为在提交之前必须输入内容。u

6、 Auto Complete复选框：设置表单是否启用自动完成功能。提示 表单对象的名称不能包含空格或特殊字符，可以使用字母、数字或下划线的组合。提示 最好根据文本字段的内容设置合适的“最多字符数”，防止个别浏览者恶意输入大量数据，影响系统的稳定性。u Auto Focus复选框：设置在支持HTML 5的浏览器中打开网页时，鼠标光标自动聚焦在文本字段中。u Read Only（只读）复选框：选择该项后，文本字段中的内容将不可更改。10 项目九 应用表单和行为案例实施案例实施一、网页、网站和主页在学习了表单和表单对象的基础知识后，下面通过创建“欢乐购”注册页面，来进一步学习表单和表单对象在实际网页

7、制作中的应用。11 项目九 应用表单和行为案例实施案例实施将“huanlegou”文件夹拷贝至本地磁盘，然后启动Dreamweaver CC，在其中创建站点“huanlegou”，将该文件夹设置为站点根文件夹。一、网页、网站和主页步骤 01一、网页、网站和主页一、构建HTML结构在站点“huanlegou”中新建一个名为“huanlegou_lx.html”的网页文档并打开。步骤 02分析页面结构。该页面需要分为3部分，以安排各元素在网页中的位置，以及在后面使用CSS分别设置相应元素的样式。步骤 031对网页进行整体布局 logo部分：包括欢乐购logo及右侧的广告，可以用标签来构造。表单部分

8、：将无序列表标签放到这部分来进行简单的布局，大结构用标签来构造。版权层：最后一行文本所在部分，可以用HTML 5中的新标签来构造。12 项目九 应用表单和行为案例实施案例实施一、网页、网站和主页在Dreamweaver设计界面中定位插入点，然后单击“插入”面板“HTML”类别中的“Div”按钮，打开“插入Div”对话框，在id编辑框中输入“logo”，然后单击“确定”按钮，如左图所示，插入Div的效果如右图所示。步骤 0413 项目九 应用表单和行为案例实施案例实施一、网页、网站和主页在代码界面中将插入点置于代码此处显示 id“logo”的内容后面，然后参照步骤4的方法插入一个id值为“mai

9、n”的div，如下图所示。步骤 0514 项目九 应用表单和行为案例实施案例实施一、网页、网站和主页在代码界面中将插入点置于代码此处显示 id“main”的内容后面，然后单击“插入”面板“HTML”类别中的“Footer”按钮，打开“插入Footer”对话框，如左图所示，单击“确定”按钮插入Footer标签，如右图所示。步骤 0615 项目九 应用表单和行为案例实施案例实施一、网页、网站和主页插入用于布局的标签。在代码界面中删除id为main的标签对之间的文本，然后将插入点置于该标签对之间，单击“插入”面板“HTML”类别中的“项目列表”按钮，插入标签，如下图所示。步骤 012制作表单部分1添

10、加列表和输入框标签提示 根据案例效果图可以看出，页面中要添加的表单元素标签包括文本框、密码框、单选按钮、复选框、文本区域及按钮。为避免页面上嵌套过多的标签增加页面布局的难度，故表单部分采用ul无序列表的方式来布局。16 项目九 应用表单和行为案例实施案例实施一、网页、网站和主页在ul标签中添加表单。在代码界面中将插入点置于标签对中，单击“插入”面板“表单”类别中的“表单”按钮，插入表单标签，如下图所示。步骤 02提示 书写HTML网页代码时，要注意标签之间的嵌套，它们决定了元素的包含关系。此外，为使代码层次分明，方便后期查看和调试，可将标签放在不同的行中，并利用代码界面左侧“工具栏”中的“缩进

11、代码”按钮，对不同层次的标签进行不同的缩进。17 项目九 应用表单和行为案例实施案例实施一、网页、网站和主页添加li标签。需要制作的注册页面上属于表单部分的内容有：会员账号、登录密码、确认密码、会员性别、个人爱好、出生日期、按钮、阅读协议、协议文本域共9项内容。此处使用列表对这些元素进行布局，为此，将插入点置于标签对中，然后单击“插入”面板“HTML”类别中的“列表项”按钮，插入标签，按照同样的方法共添加9个标签，如下图所示。步骤 03 后添加的标签一定要在前一个标签的后面。当添加下一个标签时，如果不在代码界面中将插入点移到前1个标签对的后面，就会将新的标签添加到前1个标签的内部。例如，添加完

12、第1个标签后，代码为：，如果不移动光标就直接添加新的标签，结果就会变成：，这显然是错误的。提示18 项目九 应用表单和行为案例实施案例实施一、网页、网站和主页插入文本框。在设计界面中，将插入点置于第1个标签中，单击“插入”面板“表单”类别中的“文本”按钮，插入文本框和标签。步骤 04在代码界面中修改标签为会员账号：，修改标签为。步骤 0519 项目九 应用表单和行为案例实施案例实施一、网页、网站和主页添加密码输入框。首先参照步骤4，在设计界面中，将插入点置于第2个标签对中，然后单击“插入”面板“表单”类别中的“密码”按钮，插入密码框和标签，如下图所示。步骤 06 文本框、复选框、单选按钮等表单

13、元素的标签均为，这是一个单标签，其type属性的值决定了元素的类型，如“text”表示文本框；name属性用于定义元素名称；id和class属性用于定义元素的id和类别名。提示20 项目九 应用表单和行为案例实施案例实施一、网页、网站和主页在代码界面中修改标签为登录密码：，修改标签为。步骤 07添加确认密码输入框。参照步骤6和步骤7的操作，在第3个标签对中添加确认密码输入框及其对应的标签，此时的网页效果如下图所示。步骤 08使用“插入”面板插入文本框和密码框时，若将插入点放在设计界面中，将自动添加标签；若将插入点放在代码界面中，将只添加标签。提示21 项目九 应用表单和行为案例实施案例实施一、

14、网页、网站和主页添加“会员性别”单选钮。在代码界面中，将插入点置于第4个标签对中，单击“插入”面板“表单”类别中的“标签”按钮，添加标签对，并在其中输入文字“会员性别:”；然后将插入点放在该标签对后面，单击“插入”面板“表单”类别中的“单选按钮”，插入单选按钮标签，如下图所示。步骤 013制作表单部分2添加单选按钮和复选框22 项目九 应用表单和行为案例实施案例实施一、网页、网站和主页为标签添加属性。在代码界面中，在标签中输入代码：name=rdoSex value=0 checked，以设置其属性。步骤 02添加代表会员性别的图标。在设计界面中将插入点置于刚才添加的单选按钮后面，单击“插入”

15、面板“HTML”类别中的“Image”按钮，在打开的对话框中选择“images”文件夹中的“male.jpg”文件，单击“确定”按钮插入图像，效果如下图所示。步骤 03以上代码中，name、type和value属性分别决定了表单元素的名称、类型和值；checked属性表示单选按钮默认为选中状态。知识库23 项目九 应用表单和行为案例实施案例实施一、网页、网站和主页在代码界面中，将插入点置于前面添加的图像标签后面，参照步骤1的操作添加另一个单选按钮（“值”为1，其他属性与上一个相同）和对应图像“female.jpg”，效果如下图所示。步骤 04 一组单选按钮中，所有单选按钮的name属性值必须一

16、样，否则就无法产生单选的效果，这一点必须要注意。后面添加的复选框也需要遵循此规则。本例将两个单选按钮的name值都设置为rdoSex。知识库24 项目九 应用表单和行为案例实施案例实施一、网页、网站和主页添加复选框。首先在代码界面的第5个标签对中添加 标签对，并在其中输入文字“个人爱好：”；然后将插入点移到标签对后面，单击“插入”面板“表单”类别中的“复选框”按钮，插入复选框标签，为其添加name和value属性，并在其后输入文字“运动”，如下图所示。步骤 0525 项目九 应用表单和行为案例实施案例实施一、网页、网站和主页添加其他复选框。参照上述方法，在“运动”文字后面接着添加2个复选框以及

17、其对应的文字“聊天”和“游戏”，代表聊天复选框的“value”属性值为chat；代表游戏复选框的“value”属性值为game；2个复选框的“name”属性均为cbxHobby，效果如下图所示。步骤 0626 项目九 应用表单和行为案例实施案例实施一、网页、网站和主页添加日期标签。在设计界面中，将插入点置于第6个标签对中，单击“插入”面板“表单”类别中的“日期”按钮，同时插入标签和日期标签。步骤 014制作表单部分3添加日期、按钮和文本区域标签在标签对中输入文字“出生日期：”，将原来的“Date:”删除；为标签添加value=“2015-08-04”属性，如下图所示。步骤 02日期标签是HTM

18、L 5中的新标签，目前IE还不支持该标签，在预览网页时可以使用360或Google Chrome浏览器。27 项目九 应用表单和行为案例实施案例实施一、网页、网站和主页添加按钮。在设计界面中，将插入点置于第7个标签对中，单击“插入”面板“表单”类别中的“提交按钮”，插入按钮，将其“value”值修改为“同意以下条款并提交注册信息”，如下图所示。步骤 0328 项目九 应用表单和行为案例实施案例实施一、网页、网站和主页添加“重置”按钮。在设计界面中，将插入点置于前面插入的按钮后面，单击“插入”面板“表单”类别中的“重置按钮”，插入“重置”按钮，效果如下图所示。步骤 0429 项目九 应用表单和行

19、为案例实施案例实施一、网页、网站和主页添加协议图像和文字。在设计界面中将插入点置于第8个标签对中，利用“插入”面板“HTML”类别中的“Image”按钮插入本书配套素材“images”文件夹中的“read.gif”图像，然后在图像后面输入文字“阅读欢乐购服务协议”，效果如下图所示。步骤 0530 项目九 应用表单和行为案例实施案例实施一、网页、网站和主页添加文本区域。在代码界面中，将插入点置于第9个标签对中，单击“插入”面板“表单”类别中的“文本区域”按钮，插入文本区域标签对，并为其添加属性name=“textarea”cols=“70”rows=“5”，如下图所示。步骤 0631 项目九 应

20、用表单和行为案例实施案例实施一、网页、网站和主页在文本区域中添加文字。在代码界面文本区域的标签对中输入欢乐购用户协议，完成后的页面效果如下图所示。步骤 0732 项目九 应用表单和行为案例实施案例实施一、网页、网站和主页修改id为logo的标签内容。将id为logo的标签中系统默认输入的内容删除，然后参照前面的步骤，在该标签中添加2张图像（image文件夹中的logo.jpg和reg.jpg文件），完成后的效果如下图所示。步骤 015添加logo图像等内容33 项目九 应用表单和行为案例实施案例实施修改footer标签的内容。将footer标签中的系统默认内容删除，然后输入文本“Copyrig

21、ht 2005-2015 版权所有”，效果如下图所示。步骤 02至此，欢乐购注册页面结构部分全部完成，按【F12】键预览网页，效果如下图所示。步骤 0334 项目九 应用表单和行为案例实施案例实施指定在页面中引入CSS样式的方法。本例使用内嵌样式，单击“CSS设计器”面板“源”窗格中的“添加CSS源”按钮，在其下拉列表中选择“在页面中定义”，此时在代码界面中自动添加style标签。一、网页、网站和主页步骤 01一、网页、网站和主页二、设置CSS样式35 项目九 应用表单和行为步骤 02案例实施案例实施设置页面中所有文本的默认字体为微软雅黑。新建“body”选择器，并设置其font-family

22、属性为“微软雅黑”，如下图所示。36 项目九 应用表单和行为案例实施案例实施一、网页、网站和主页设置3个结构标签的统一样式。首先新建#logo选择器，设置其width属性值为700px，margin属性上下值为0，左右值为auto，然后在代码界面#logo选择器名后面输入“,#main,footer”，为这3个标签设置统一样式，如下图所示。步骤 03该样式中使用了“微软雅黑”字体，如果用户的电脑中没有安装该字体，则系统会默认选择宋体。提示37 项目九 应用表单和行为案例实施案例实施一、网页、网站和主页设置id为main的标签的样式。新建选择器#main，设置其height属性为380px，如左

23、图所示。步骤 04设置id为main的中列表项的样式。新建嵌套选择器#main li，设置其height属性为35px，list-style属性为none，如右图所示。步骤 0538 项目九 应用表单和行为案例实施案例实施一、网页、网站和主页设置id分别为user，psw1和psw2的三个文本框的共同样式。此处直接给出代码如下。步骤 06#user,#psw1,#psw2height:20px;/*设置文本框高度为20像素*/width:150px;/*设置文本框宽度为150像素*/border:#157782 1px solid;/*设置文本框边框颜色，宽度和线型*/background-c

24、olor:#ffd4e2;/*设置文本框背景颜色*/为了使文本框与整个页面的色调更加协调一致，此处将文本框背景颜色设置为粉色。提示39 项目九 应用表单和行为案例实施案例实施一、网页、网站和主页设置id分别为user，psw1和psw2的三个文本框hover状态时的样式。具体表现为，当将鼠标指针移到表单文本框上方时，文本框的背景颜色变为白色。步骤 07设置标签的样式，代码如下。步骤 08#user:hover,#psw1:hover,#psw2:hover background-color:#FFF;/*设置hover状态时的背景颜色*/footer font-size:16px;/*设置文字

25、大小为16像素*/height:40px;/*设置高度为40像素*/line-height:40px;/*设置行高为40像素*/text-align:center;/*设置文字位置为居中*/background-color:#FF6699;/*设置背景色*/这样，一个带有CSS美化效果的表单就制作完成了，保存并预览网页。步骤 09案例一目录页 CONTENTS PAGE 项目九 应用表单和行为案例二41 项目九 应用表单和行为案例说明在Dreamweaver中合理运用“行为”，可以方便地为网页对象添加一些动态效果和简单的交互功能，如浮动的广告、交换图像、可以收缩放大的图像等。42 项目九 应用

26、表单和行为相关知识相关知识一、认识行为行为由事件和动作两部分组成，事件是指“用户的操作”，如鼠标移到对象上方、离开对象或双击对象等；而动作是指“发生什么”，如打开浏览器窗口、播放声音或弹出信息等。事实上，动作是预先写好的能够执行某项任务的脚本语言代码段。一般的行为都是由事件来引发动作。例如，当用户把鼠标移动至对象上（事件），该对象会发生预定义的变化（动作）。事件是为大多数浏览器理解的通用代码，浏览器通过释译来执行动作。一个事件也可以触发许多动作，可以定义它们执行的顺序。43 项目九 应用表单和行为二、“行为”面板要在Dreamweaver中应用行为，首先要打开“行为”面板。在菜单栏中选择“窗口

27、”“行为”菜单或按下【Shift+F4】组合键，均可打开“行为”面板，如下图所示。u 转到URL：发生指定事件时跳转到指定的网页。u 打开浏览器窗口：在新窗口中打开网页，并可设置新窗口的宽度和高度等属性。u 弹出信息：显示带指定信息的JavaScript警告。44 项目九 应用表单和行为在Dreamweaver CC中，可以将事件分为不同的种类，有的与鼠标有关，有的与键盘有关，如鼠标单击，按下键盘某个键；有的还和网页相关，如网页下载完毕，网页切换等。在添加某个行为后，单击左侧的事件，可打开“事件”列表。u 调用JavaScript：调用网页中包含的Javascript程序。u onMouseO

28、ver：鼠标指针移至对象上方时发生的事件。u onMouseUp：当按下的鼠标按键被释放时发生的事件。u onMouseDown：单击鼠标左键（不必释放鼠标键）时发生的事件。u onMouseMove：鼠标指针经过对象时发生的事件。u onMouseOut：鼠标指针离开选定对象时发生的事件。u onLoad：在浏览器中加载完网页时发生的事件。u onClick：鼠标单击对象（如超链接、图像、图像映像、按钮）时发生的事件。u onFocus：对象获得焦点时发生的事件，如单击表单中的文本编辑框触发该事件。45 项目九 应用表单和行为三、应用行为行为可以应用于HTML标签、图像、链接文本等对象。如果

29、要对某个对象应用行为，需要先选中该对象，然后单击“行为”面板上的“添加行为”按钮，在打开的行为列表中选择动作，并在打开的窗口中设置效果，最后指定设定的动作在什么情况下发生，也就是事件。启动Dreamweaver CC，在“文件”面板中打开“blog”站点，并双击打开其中的网页文档“index.html”。步骤 01首先选择要应用行为的对象，然后打开“行为”面板，单击“添加行为”按钮，在弹出的列表中选择“交换图像”，如右图所示。步骤 0246 项目九 应用表单和行为打开“交换图像”对话框，单击“设定原始档为”编辑框右侧的“浏览”按钮，在打开的“选择图像源文件”对话框中选择“images”文件夹中

30、的“me1.jpg”图像，然后单击“确定”按钮，如下图所示。步骤 03回到“交换图像”对话框，其他设置项保持默认，单击“确定”按钮。步骤 0447 项目九 应用表单和行为按【Ctrl+S】组合键保存文档，按【F12】键预览网页，将鼠标光标移至图像上方，可看到图像变成刚刚设置的图像，如下图所示。步骤 05提示 一般对纯文本是不能应用行为的，如果要对其应用行为，首先需要为其设置链接。48 项目九 应用表单和行为四、编辑行为修改行为的方法非常简单，只需双击“行为”面板中相应的动作名称，比如要编辑前面创建的“交换图像”行为，只要双击“事件”右侧对应的动作名称“交换图像”，就会重新打开“交换图像”对话框

31、，修改后关闭对话框即可，如下图所示。1修改行为当“行为”面板上有多个行为时，如要改变某行为的顺序，可先选中该行为，然后单击面板上方的 或 按钮进行上移或下移。49 项目九 应用表单和行为如要删除某行为，只需选中该行为，然后单击“行为”面板上方的“删除事件”按钮或直接按【Delete】键。也可用鼠标右键单击行为，在弹出的快捷菜单中选择“删除行为”命令。2删除行为50 项目九 应用表单和行为案例实施案例实施一、网页、网站和主页在学习了行为的设置方法后，下面应用行为为学校网页“index.html”添加弹出信息框，网页效果如下图所示。51 项目九 应用表单和行为案例实施案例实施在“文件”面板中打开“

32、school”站点，并双击打开其中的网页文档“index.html”。步骤 01将插入点置于网页中任意位置，单击选择“标签选择器”最左侧的“”标签，然后单击“行为”面板中的“添加行为”按钮，在打开的“行为”列表中选择“弹出信息”，如下图所示。步骤 02提示 若要给某个对象添加“弹出信息”行为，则应先选择该对象；若要给整个网页添加行为，则应选择整个页面。52 项目九 应用表单和行为案例实施案例实施一、网页、网站和主页打开“弹出信息”对话框。在对话框的“消息”编辑框中输入弹出信息的文本内容，如左图所示。步骤 03单击“确定”按钮，可以看到在“行为”面板中自动添加了一个“onload”事件，如右图所示。步骤 04保存网页文档，然后按【F12】键预览，在打开网页的同时弹出信息窗。步骤 05