第12章-表单和jQuery-UI.pptx

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2018/7/16,#,第,12,章表单和,jQuery UI,网页设计与制作,Dreamweaver,CC,标准教程,1.,使用,表单,2.,jQuery UI,本章学习的主要内容：,表单（,Form,）技术可以实现浏览者同服务器之间的信息交互和传递,。,目前表单主要应用在用户注册、论坛登录等。,一,个表单由三个基本组成部分：表单标签、表单域和表单按钮。,表单标签包含了处理表单数据所用的,URL,地址以及数据提交到服务器的方法。表单域包含了文本域、文本区域、隐藏域、复选框、单选按钮、选择列表和文件域等。表单按钮包括提交按钮和复位按钮，确定将数据传送到服务器上或者重新输入。,13.1,使用,表单,13.1.1,课堂,案例,-,网页设计,13.1.2,表,单及属性,13.1.3,文本元素,13.1.4,单选,按钮和单选按钮,组,13.1.5,复选框,和复选框组,13.1.6,选择,13.1.7,文件元素,13.1.8,按钮,13.1.9 HTML5,表单元素,13.1,使用表单,案例学习目标：学习表单的基本操作。,案例知识要点：选择菜单,【,插入,】|【,表单,】,或使用,【,插入,】,面板,【,表单,】,选项卡创建表单。在表单中，插入各种表单元素，并利用,【,属性,】,面板进行设置。,素材所在位置：光盘,/,案例素材,/ch12/,课堂案例,-,网页设计。,案例效果如图,12-1,所示。,13.1.1,课堂案例,-,网页设计,在网页中创建表单的操作步骤如下。,将,光标定位在要插入表单的位置上。,选择,【,插入,】|【,表单,】|【,表单,】,，或单击,【,插入,】,面板,【,表单,】,选项卡中的,【,表单,】,按钮，或将,【,表单,】,面板中的,【,表单,】,按钮拖入网页文档窗口。,在,网页中创建了由红色虚线框所确定的表单,区域。,13.1.2,表,单及属性,文本用来接收用户输入的信息。文本一般用来输入较少信息，如用户名等；文本区域接收较多信息，如留言内容等；密码域用来输入密码，输入的信息会被隐去，显示为其他符号，如圆点,。,1,单行文本,域,2,文本区域,3,密码域,13.1.3,文,本元素,1,单选按钮,2,单选按钮组,13.1.4,单选,按钮和单选按钮组,1,复选框,2,复选框,组,13.1.5,复选框,和复选框组,选择列表,/,菜单用来创建一个列表或下拉菜单来显示一组选项，插入选择列表,/,菜单的操作步骤如下。,将光标置于要插入选择列表,/,菜单的位置。,选择菜单,【,插入,】|【,表单,】|【,选择,】,或单击,【,插入,】,面板,【,表单,】,选项卡中的,【,选择,】,按钮 插入一个选择元素，如图,12-28,所示。,选中插入的选择元素，单击,【,属性,】,面板中,【,列表值,】,按钮，在,【,列表值,】,对话框中添加列表值，如图,12-29,所示。,13.1.6,选择,将光标置于要插入文件元素的位置。,选择菜单,【,插入,】|【,表单,】|【,文件,】,或单击,【,插入,】,面板,【,表单,】,选项卡中的,【,文件,】,按钮 插入一个文件域，如图,12-31,所示。,选中文件元素，在,【,属性,】,面板中进行相应设置，如图,12-32,所示。,13.1.7,文件元素,对表单而言，按钮是非常重要的，它能够控制对表单内容的操作，如提交或重置。要将表单的内容发送到远程服务器上，需要使用提交按钮；要清除现有表单内容，需使用重置按钮。用户也可以自定义按钮的名称,。,在网页中插入按钮的操作步骤如下。,将光标置于要插入按钮的位置。,选择菜单,【,插入,】|【,表单,】|【,按钮,】,或单击,【,插入,】,面板,【,表单,】,选项卡中的,【,按钮,】,按钮 插入一个按钮，如图,12-33,所示。,在按钮,【,属性,】,面板中设置相应的属性，如图,12-34,所示。,13.1.8,按钮,HTML5,新增了一些表单元素,。,1,、电子邮件,2,、,url,3,、数字,4,、范围,5,、颜色,6,、日期和时间类型,7,、搜索,13.1.9,HTML5,表单元素,jQuery UI,是建立在,jQuery JavaScript,库上的一组用户界面交互、特效、小部件及主题。,12.2 jQuery UI,12.2.1,课堂案例,-,创意家居,12.2.2,折叠面板,Accordion,12.2.3,选项卡,Tabs,12.2.4,日期选择器,Datepicker,12.2.5,对话框,Dialog,12.2 jQuery UI,案例学习目标：学习,jQuery UI,的基本操作。,案例知识要点：在,【,插入,】,面板,【jQuery UI】,选项卡中，单击,【Accordion】,按钮创建折叠面板、单击,【Tabs】,按钮创建选项卡。并使用其,【,属性,】,面板进行设置。,素材所在位置：光盘,/,案例素材,/ch12/,课堂案例,-,创意家居。,案例效果如图,12-45,所示。,13.2.1,课堂案例,-,创意家居,在网页中插入折叠面板,Accordion,的操作步骤如下。,将光标置于要插入折叠面板,Accordion,的位置。,选择菜单,【,插入,】|【jQuery UI】|【Accordion】,或单击,【,插入,】,面板,【jQuery UI】,选项卡中的,【Accordion】,按钮 插入折叠面板。,选择菜单,【,窗口,】|【,属性,】,，打开,【,属性,】,面板设置,Accordion,选项，如图,12-58,所示。,12.2.2,折叠面板,Accordion,在网页中插入,Tabs,的操作步骤如下。,将光标置于要插入,Tabs,的位置。,选择菜单,【,插入,】|【jQuery UI】|【Tabs】,单击,【,插入,】,面板中,【jQuery UI】,选项卡中的,【Tabs】,按钮，在该处插入一个名为,Tabs1,的选项卡，修改,Tabs,内容。,选择菜单,【,窗口,】|【,属性,】,，打开,【,属性,】,面板设置,Tabs,选项，如图,12-59,所示。,12.2.3,选项卡,Tabs,日期选择器,Datepicker,用于从弹出框或内联日历选择一个日期。该控件能非常方便的展现日历中的日期，灵活配置相关选项，包括日期格式、范围等。我们经常在,WEB,应用中用到,Datepicker,，比如要求用户输入日期进行相关查询,。,12.2.4,日期选择器,Datepicker,在,网页中插入日期选择器,Datepicker,的操作步骤如下。,将光标置于要插入日期选择器,Datepicker,的位置。,选择菜单,【,插入,】|【jQuery UI】|【Datepicker】,或单击,【,插入,】,面板,【jQuery UI】,选项卡中的,【Datepicker】,按钮 插入一个日期选择器,Datepicker,，如图,12-60,所示。,选择菜单,【,窗口,】|【,属性,】,，打开,【,属性,】,面板设置选项，如图,12-61,所示,。,12.2.4,日期选择器,Datepicker,对话框是一个悬浮窗口，包括一个标题栏和一个内容区域。对话框窗口可以移动，重新调整大小，默认情况下通过关闭图标关闭对话框。,在网页中插入对话框,Dialog,的操作步骤如下。,将光标置于要插入对话框,Dialog,的位置。,选择菜单,【,插入,】|【jQuery UI】|【Dialog】,或单击,【,插入,】,面板,【jQuery UI】,选项卡中的,【Dialog】,按钮 插入一个,Dialog,。,选择菜单,【,窗口,】|【,属性,】,，打开,【,属性,】,面板设置选项，如图,12-62,所示。,12.2.5,对话框,Dialog,12.3.1,练习案例,-,咖啡餐厅,12.3.2,练习案例,-,网,上生活超市,12.3,练习案例,案例练习目标：练习表单的基本操作。,案例操作要点：,在页面中部已经插入一个表单和一个内嵌表格，继续完成餐厅预订信息的表单。各单元格插入表单元素并设置如下。,预订时间分为年、月、日以及中午、晚上选项和具体时间，均采用选择（列表,/,菜单）；,就餐人数分为成人和儿童两类，均采用文本域，字符宽度为,4,；,订餐内容分为小点心、正餐、酒水、水果和其他，采用复选框,；,12.3.1,练习案例,-,咖啡,订,餐类型分为家宴、商宴和婚宴，采用单选按钮；,其他说明采用文本域，字符宽度为,50,，行数为,6,；,顾客名称采用文本域，字符宽度为,10,；,性别分为男和女，采用单选按钮组；,手机电话采用,Tel,，字符宽度为,25,；,电子邮件字符宽度为,25,。,提交按钮和重置按钮采用图像域，其,ID,分别设为,submit,和,Reset,。,素材所在位置：光盘,/,案例素材,/ch12/,练习案例,-,咖啡餐厅，效果如图,12-64,所示。,12.3.1,练习案例,-,咖啡,案例练习目标：练习,jQuery UI,的基本操作。,案例操作要点：,1.,在页面中部左侧插入一个,Accordion,。,标题分别为：音响、显示器、电视。内容分别插入图像文件,p1.png,、,p2.png,、,p3.png,；,标题文字大小为,12px,，内容左侧内边距为,0px,；,设置鼠标悬浮展开折叠面板。,2.,在页面中部右侧插入一个,Tabs,。,在“商品详情”内容中插入图像文件,img01.jpg,；,在“规格包装”和“售后服务”中插入文本文件,text.txt,里面的对应文字。,3.,为样式,.ui-tabs.ui-tabs-pannel,设置属性：,【font-family】,为“微软雅黑”，,【font-size】,为,20px,。,素材所在位置：光盘,/,案例素材,/ch12/,练习案例,-,网上生活超市，效果如图,12-65,所示。,12.3.2,练习案例,-,网上生活超市,