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

案例说明使用Dreamweaver可以创建带有文本字段、单选按钮、复选框和文件域等输入类型的表单，这些输入类型又被称为表单对象。本案例将要制作的“欢乐购”注册页面，效果如右图所示。该页面包含了表单中的几个主要元素：文本框、密码框、单选按钮、复选框等。通过制作该页面，可以掌握在网页中插入表单标签，以及使用各种结构标签对表单元素进行布局的方法，并了解表单标签在页面中的默认显示效果。案例一应用表单制作“欢乐购”注册页面——应用表单和表单对象相关知识表单多用于填写用户信息。右图为京东网注册页面，当用户填写完信息，单击“立即注册”按钮后，所填信息将提交到网站数据库中。一、表单基础知识严格来说，一个完整的表单设计应该分为两部分，即表单对象部分和应用程序部分，它们分别由网页设计师和程序设计师来完成。一般首先由网页设计师制作出一个表单页面（就是表单对象部分），此时的表单只是一个空壳，并不具备工作的能力；还需要程序设计师来编写程序（应用程序部分），实现表单与数据库之间的连接。二、插入表单由于默认状态下插入的表单是以100%的宽度显示，所以在插入表单前一般都要先创建一个表格或Div，之后将表单插入到单元格或Div中。启动DreamweaverCC，新建一个网页文档，并在其中插入一个1行1列，“表格宽度”为“600像素”，其他各项均为0的表格。步骤01将插入点置于表格单元格中。然后单击“插入”面板“表单”类别中的“表单”按钮，在表格中插入表单。步骤02文档编辑窗口中的表单显示为红色虚线框，浏览器中的表单是不可见的。接下来设置表单属性，将插入点置于表单区域中，“属性”面板中将显示表单属性。步骤03ID：设置表单名称，可用于程序调用。页面中插入的第1个表单默认名为“form1”，后面插入的依次为“form2”“form3”……。Class（类）：对表单应用定义好的CSS样式。Action（动作）：用于指定处理该表单的动态页或脚本文件的路径，可以直接键入完整的路径，也可以单击编辑框右侧的文件夹图标来选择站点中的文件。Method（方法）：选择传送表单数据的方式。Enctype（编码类型）：指定提交给服务器的数据所使用的编码类型。Target（目标）：选择打开返回信息网页的方式。三、插入表单元素可以把表单看做一个容器，表单对象就是放在这个容器里的东西，只有添加了表单对象，表单才能真正起作用，才可以让访问者输入数据或执行其他操作。常用的表单对象主要有文本字段、单选按钮、复选框和按钮等，下图显示了常见的表单对象。在插入文本字段之前，应确保已经插入一个表单，并且将插入点置于表单中。步骤01单击“插入”面板“表单”类别中的“文本”按钮，即可在表单中插入一个文本字段。文本字段默认处于选中状态，“属性”面板中显示其属性，如下图所示。步骤02Name：用于设置文本字段名称，每个文本字段都必须有一个唯一的名称。Size（字符宽度）：用英文字符单位来指定文本字段宽度。MaxLength（最多字符数）：设置文本字段中最多可输入的字符数。Disabled（禁用）复选框：选择该项后，文本字段的边框将变为灰色，并且整个文本框不可用。Required（复选框）：选中该复选框可将文本框设置为在提交之前必须输入内容。。AutoComplete复选框：设置表单是否启用自动完成功能。提示表单对象的名称不能包含空格或特殊字符，可以使用字母、数字或下划线的组合。提示最好根据文本字段的内容设置合适的“最多字符数”，防止个别浏览者恶意输入大量数据，影响系统的稳定性。AutoFocus复选框：设置在支持HTML5的浏览器中打开网页时，鼠标光标自动聚焦在文本字段中。ReadOnly（只读）复选框：选择该项后，文本字段中的内容将不可更改。案例实施一、网页、网站和主页在学习了表单和表单对象的基础知识后，下面通过创建“欢乐购”注册页面，来进一步学习表单和表单对象在实际网页制作中的应用。案例实施将“huanlegou”文件夹拷贝至本地磁盘，然后启动DreamweaverCC，在其中创建站点“huanlegou”，将该文件夹设置为站点根文件夹。一、网页、网站和主页步骤01一、网页、网站和主页一、构建HTML结构在站点“huanlegou”中新建一个名为“huanlegou_lx.html”的网页文档并打开。步骤02分析页面结构。该页面需要分为3部分，以安排各元素在网页中的位置，以及在后面使用CSS分别设置相应元素的样式。步骤031．对网页进行整体布局①logo部分：包括欢乐购logo及右侧的广告，可以用<div>标签来构造。②表单部分：将无序列表标签放到这部分来进行简单的布局，大结构用<div>标签来构造。③版权层：最后一行文本所在部分，可以用HTML5中的新标签<footer>来构造。案例实施一、网页、网站和主页在Dreamweaver设计界面中定位插入点，然后单击“插入”面板“HTML”类别中的“Div”按钮，打开“插入Div”对话框，在id编辑框中输入“logo”，然后单击“确定”按钮，如左图所示，插入Div的效果如右图所示。步骤04案例实施一、网页、网站和主页在代码界面中将插入点置于代码<divid=“logo”>此处显示id“logo”的内容</div>后面，然后参照步骤4的方法插入一个id值为“main”的div，如下图所示。步骤05案例实施一、网页、网站和主页在代码界面中将插入点置于代码<divid=“main”>此处显示id“main”的内容</div>后面，然后单击“插入”面板“HTML”类别中的“Footer”按钮，打开“插入Footer”对话框，如左图所示，单击“确定”按钮插入Footer标签，如右图所示。步骤06案例实施一、网页、网站和主页插入用于布局的<ul>标签。在代码界面中删除id为main的<div></div>标签对之间的文本，然后将插入点置于该标签对之间，单击“插入”面板“HTML”类别中的“项目列表”按钮，插入<ul>标签，如下图所示。步骤012．制作表单部分1——添加列表和输入框标签提示根据案例效果图可以看出，页面中要添加的表单元素标签包括文本框、密码框、单选按钮、复选框、文本区域及按钮。为避免页面上嵌套过多的<div>标签增加页面布局的难度，故表单部分采用ul无序列表的方式来布局。案例实施一、网页、网站和主页在ul标签中添加表单。在代码界面中将插入点置于<ul></ul>标签对中，单击“插入”面板“表单”类别中的“表单”按钮，插入表单标签<form>，如下图所示。步骤02提示书写HTML网页代码时，要注意标签之间的嵌套，它们决定了元素的包含关系。此外，为使代码层次分明，方便后期查看和调试，可将标签放在不同的行中，并利用代码界面左侧“工具栏”中的“缩进代码”按钮，对不同层次的标签进行不同的缩进。案例实施一、网页、网站和主页添加li标签。需要制作的注册页面上属于表单部分的内容有：会员账号、登录密码、确认密码、会员性别、个人爱好、出生日期、按钮、阅读协议、协议文本域共9项内容。此处使用列表对这些元素进行布局，为此，将插入点置于<form>标签对中，然后单击“插入”面板“HTML”类别中的“列表项”按钮，插入<li>标签，按照同样的方法共添加9个<li>标签，如下图所示。步骤03后添加的<li>标签一定要在前一个标签的后面。当添加下一个<li>标签时，如果不在代码界面中将插入点移到前1个<li></li>标签对的后面，就会将新的<li>标签添加到前1个标签的内部。例如，添加完第1个<li>标签后，代码为：<li></li>，如果不移动光标就直接添加新的标签，结果就会变成：<li><li></li></li>，这显然是错误的。提示案例实施一、网页、网站和主页插入文本框。在设计界面中，将插入点置于第1个<li>标签中，单击“插入”面板“表单”类别中的“文本”按钮，插入文本框和<label>标签。步骤04在代码界面中修改<label>标签为<labelfor=“user”>会员账号：</label>，修改<input>标签为<inputtype="text"name="username"id="user">。步骤05案例实施一、网页、网站和主页添加密码输入框。首先参照步骤4，在设计界面中，将插入点置于第2个<li></li>标签对中，然后单击“插入”面板“表单”类别中的“密码”按钮，插入密码框和<label>标签，如下图所示。步骤06文本框、复选框、单选按钮等表单元素的标签均为<input>，这是一个单标签，其type属性的值决定了元素的类型，如“text”表示文本框；name属性用于定义元素名称；id和class属性用于定义元素的id和类别名。提示案例实施一、网页、网站和主页在代码界面中修改<label>标签为<labelfor=“psw1”>登录密码：</label>，修改<input>标签为<inputtype="password"name="psw1"id="psw1">。步骤07添加确认密码输入框。参照步骤6和步骤7的操作，在第3个<li></li>标签对中添加确认密码输入框及其对应的<label>标签，此时的网页效果如下图所示。步骤08使用“插入”面板插入文本框和密码框时，若将插入点放在设计界面中，将自动添加<label>标签；若将插入点放在代码界面中，将只添加<input>标签。提示案例实施一、网页、网站和主页添加“会员性别”单选钮。在代码界面中，将插入点置于第4个<li></li>标签对中，单击“插入”面板“表单”类别中的“标签”按钮，添加<label></label>标签对，并在其中输入文字“会员性别:”；然后将插入点放在该标签对后面，单击“插入”面板“表单”类别中的“单选按钮”，插入单选按钮标签，如下图所示。步骤013．制作表单部分2——添加单选按钮和复选框案例实施一、网页、网站和主页为<input>标签添加属性。在代码界面中，在<input>标签中输入代码：name="rdoSex"value="0"checked，以设置其属性。步骤02添加代表会员性别的图标。在设计界面中将插入点置于刚才添加的单选按钮后面，单击“插入”面板“HTML”类别中的“Image”按钮，在打开的对话框中选择“images”文件夹中的“male.jpg”文件，单击“确定”按钮插入图像，效果如下图所示。步骤03以上代码中，name、type和value属性分别决定了表单元素的名称、类型和值；checked属性表示单选按钮默认为选中状态。知识库案例实施一、网页、网站和主页在代码界面中，将插入点置于前面添加的图像标签后面，参照步骤1的操作添加另一个单选按钮（“值”为1，其他属性与上一个相同）和对应图像“female.jpg”，效果如下图所示。步骤04一组单选按钮中，所有单选按钮的name属性值必须一样，否则就无法产生单选的效果，这一点必须要注意。后面添加的复选框也需要遵循此规则。本例将两个单选按钮的name值都设置为rdoSex。知识库案例实施一、网页、网站和主页添加复选框。首先在代码界面的第5个<li></li>标签对中添加<label></label>标签对，并在其中输入文字“个人爱好：”；然后将插入点移到<label></label>标签对后面，单击“插入”面板“表单”类别中的“复选框”按钮，插入复选框标签，为其添加name和value属性，并在其后输入文字“运动”，如下图所示。步骤05案例实施一、网页、网站和主页添加其他复选框。参照上述方法，在“运动”文字后面接着添加2个复选框以及其对应的文字“聊天”和“游戏”，代表聊天复选框的“value”属性值为chat；代表游戏复选框的“value”属性值为game；2个复选框的“name”属性均为cbxHobby，效果如下图所示。步骤06案例实施一、网页、网站和主页添加日期标签。在设计界面中，将插入点置于第6个<li></li>标签对中，单击“插入”面板“表单”类别中的“日期”按钮，同时插入<label>标签和日期标签。步骤014．制作表单部分3——添加日期、按钮和文本区域标签在<label></label>标签对中输入文字“出生日期：”，将原来的“Date:”删除；为<input>标签添加value=“2015-08-04”属性，如下图所示。步骤02日期标签是HTML5中的新标签，目前IE还不支持该标签，在预览网页时可以使用360或GoogleChrome浏览器。案例实施一、网页、网站和主页添加按钮。在设计界面中，将插入点置于第7个<li></li>标签对中，单击“插入”面板“表单”类别中的“‘提交’按钮”，插入按钮，将其“value”值修改为“同意以下条款并提交注册信息”，如下图所示。步骤03案例实施一、网页、网站和主页添加“重置”按钮。在设计界面中，将插入点置于前面插入的按钮后面，单击“插入”面板“表单”类别中的“‘重置’按钮”，插入“重置”按钮，效果如下图所示。步骤04案例实施一、网页、网站和主页添加协议图像和文字。在设计界面中将插入点置于第8个<li></li>标签对中，利用“插入”面板“HTML”类别中的“Image”按钮插入本书配套素材“images”文件夹中的“read.gif”图像，然后在图像后面输入文字“阅读《欢乐购服务协议》”，效果如下图所示。步骤05案例实施一、网页、网站和主页添加文本区域。在代码界面中，将插入点置于第9个<li></li>标签对中，单击“插入”面板“表单”类别中的“文本区域”按钮，插入文本区域标签对，并为其添加属性name=“textarea”cols=“70”rows=“5”，如下图所示。步骤06案例实施一、网页、网站和主页在文本区域中添加文字。在代码界面文本区域的<textareaname=“textarea”cols=“70”rows=“5”></textarea>标签对中输入欢乐购用户协议，完成后的页面效果如下图所示。步骤07案例实施一、网页、网站和主页修改id为logo的<div>标签内容。将id为logo的<div>标签中系统默认输入的内容删除，然后参照前面的步骤，在该<div>标签中添加2张图像（image文件夹中的logo.jpg和reg.jpg文件），完成后的效果如下图所示。步骤015．添加logo图像等内容案例实施修改footer标签的内容。将footer标签中的系统默认内容删除，然后输入文本“Copyright©2005-2015版权所有”，效果如下图所示。步骤02至此，欢乐购注册页面结构部分全部完成，按【F12】键预览网页，效果如下图所示。步骤03案例实施指定在页面中引入CSS样式的方法。本例使用内嵌样式，单击“CSS设计器”面板“源”窗格中的“添加CSS源”按钮，在其下拉列表中选择“在页面中定义”，此时在代码界面中自动添加style标签。一、网页、网站和主页步骤01一、网页、网站和主页二、设置CSS样式步骤02案例实施设置页面中所有文本的默认字体为微软雅黑。新建“body”选择器，并设置其font-family属性为“微软雅黑”，如下图所示。案例实施一、网页、网站和主页设置3个结构标签的统一样式。首先新建#logo选择器，设置其width属性值为700px，margin属性上下值为0，左右值为auto，然后在代码界面#logo选择器名后面输入“,#main,footer”，为这3个标签设置统一样式，如下图所示。步骤03该样式中使用了“微软雅黑”字体，如果用户的电脑中没有安装该字体，则系统会默认选择宋体。提示案例实施一、网页、网站和主页设置id为main的<div>标签的样式。新建选择器#main，设置其height属性为380px，如左图所示。步骤04设置id为main的<div>中列表项<li>的样式。新建嵌套选择器#mainli，设置其height属性为35px，list-style属性为none，如右图所示。步骤05案例实施一、网页、网站和主页设置id分别为user，psw1和psw2的三个文本框的共同样式。此处直接给出代码如下。步骤06#user,#psw1,#psw2{height:20px; /*设置文本框高度为20像素*/width:150px; /*设置文本框宽度为150像素*/border:#1577821pxsolid; /*设置文本框边框颜色，宽度和线型*/background-color:#ffd4e2; /*设置文本框背景颜色*/}为了使文本框与整个页面的色调更加协调一致，此处将文本框背景颜色设置为粉色。提示案例实施一、网页、网站和主页设置id分别为user，psw1和psw2的三个文本框hover状态时的样式。具体表现为，当将鼠标指针移到表单文本框上方时，文本框的背景颜色变为白色。步骤07设置<footer>标签的样式，代码如下。步骤08#user:hover,#psw1:hover,#psw2:hover{ background-color:#FFF; /*设置hover状态时的背景颜色*/}footer{ font-size:16px; /*设置文字大小为16像素*/ height:40px; /*设置高度为40像素*/ line-height:40px; /*设置行高为40像素*/ text-align:center; /*设置文字位置为居中*/background-color:#FF6699; /*设置背景色*/}这样，一个带有CSS美化效果的表单就制作完成了，保存并预览网页。步骤09案例说明在Dreamweaver中合理运用“行为”，可以方便地为网页对象添加一些动态效果和简单的交互功能，如浮动的广告、交换图像、可以收缩放大的图像等。案例二应用行为为学校网页添加弹出框——应用行为相关知识一、认识行为行为由事件和动作两部分组成，事件是指“用户的操作”，如鼠标移到对象上方、离开对象或双击对象等；而动作是指“发生什么”，如打开浏览器窗口、播放声音或弹出信息等。事实上，动作是预先写好的能够执行某项任务的脚本语言代码段。一般的行为都是由事件来引发动作。例如，当用户把鼠标移动至对象上（事件），该对象会发生预定义的变化（动作）。事件是为大多数浏览器理解的通用代码，浏览器通过释译来执行动作。一个事件也可以触发许多动作，可以定义它们执行的顺序。二、“行为”面板要在Dreamweaver中应用行为，首先要打开“行为”面板。在菜单栏中选择“窗口”>“行为”菜单或按下【Shift+F4】组合键，均可打开“行为”面板，如下图所示。转到URL：发生指定事件时跳转到指定的网页。打开浏览器窗口：在新窗口中打开网页，并可设置新窗口的宽度和高度等属性。弹出信息：显示带指定信息的JavaScript警告。在DreamweaverCC中，可以将事件分为不同的种类，有的与鼠标有关，有的与键盘有关，如鼠标单击，按下键盘某个键；有的还和网页相关，如网页下载完毕，网页切换等。在添加某个行为后，单击左侧的事件，可打开“事件”列表。调用JavaScript：调用网页中包含的Javascript程序。onMouseOver：鼠标指针移至对象上方时发生的事件。onMouseUp：当按下的鼠标按键被释放时发生的事件。onMouseDown：单击鼠标左键（不必释放鼠标键）时发生的事件。onMouseMove：鼠标指针经过对象时发生的事件。onMouseOut：鼠标指针离开选定对象时发生的事件。onLoad：在浏览器中加载完网页时发生的事件。onClick：鼠标单击对象（如超链接、图像、图像映像、按钮）时发生的事件。onFocus：对象获得焦点时发生的事件，如单击表单中的文本编辑框触发该事件。三、应用行为行为可以应用于HTML标签、图像、链接文本等对象。如果要对某个对象应用行为，需要先选中该对象，然后单击“行为”面板上的“添加行为”按钮，在打开的行为列表中选择动作，并在打开的窗口中设置效果，最后指定设定的动作在什么情况下发生，也就是事件。启动DreamweaverCC，在“文件”面板中打开“blog”站点，并双击打开其中的网页文档“index.html”。步骤01首先选择要应用行为的