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

《第12章-表单和jQuery-UI.pptx》由会员分享，可在线阅读，更多相关《第12章-表单和jQuery-UI.pptx（29页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第1212章表单和章表单和jQuery UIjQuery UI网页设计与制作Dreamweaver CC 标准教程1.使用表单2.jQuery UI本章学习的主要内容：本章学习的主要内容：表单（Form）技术可以实现浏览者同服务器之间的信息交互和传递。目前表单主要应用在用户注册、论坛登录等。一个表单由三个基本组成部分：表单标签、表单域和表单按钮。表单标签包含了处理表单数据所用的URL地址以及数据提交到服务器的方法。表单域包含了文本域、文本区域、隐藏域、复选框、单选按钮、选择列表和文件域等。表单按钮包括提交按钮和复位按钮，确定将数据传送到服务器上或者重新输入。13.1 13.1 使用使用表单表

2、单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 13.1 使用表单使用表单案例学习目标：学习表单的基本操作。案例知识要点：选择菜单【插入】|【表单】或使用【插入】面板【表单】选项卡创建表单。在表单中，插入各种表单元素，并利用【属性】面板进行设置。素材所在位置：光盘/案例素材/ch12/课堂案例-网页设计。案例效果如图12-1所示。13.1.113.1.1课堂案例课堂案例-网页设计网页设计在网页中创建表

3、单的操作步骤如下。将光标定位在要插入表单的位置上。选择【插入】|【表单】|【表单】，或单击【插入】面板【表单】选项卡中的【表单】按钮，或将【表单】面板中的【表单】按钮拖入网页文档窗口。在网页中创建了由红色虚线框所确定的表单区域。13.1.2 13.1.2 表表单及属性单及属性文本用来接收用户输入的信息。文本一般用来输入较少信息，如用户名等；文本区域接收较多信息，如留言内容等；密码域用来输入密码，输入的信息会被隐去，显示为其他符号，如圆点。1单行文本域2文本区域 3密码域 13.1.3 13.1.3 文文本元素本元素1单选按钮 2单选按钮组 13.1.4 13.1.4 单选单选按钮和单选按钮组按

4、钮和单选按钮组1复选框 2复选框组13.1.5 13.1.5 复选框复选框和复选框组和复选框组选择列表/菜单用来创建一个列表或下拉菜单来显示一组选项，插入选择列表/菜单的操作步骤如下。将光标置于要插入选择列表/菜单的位置。选择菜单【插入】|【表单】|【选择】或单击【插入】面板【表单】选项卡中的【选择】按钮 插入一个选择元素，如图12-28所示。选中插入的选择元素，单击【属性】面板中【列表值】按钮，在【列表值】对话框中添加列表值，如图12-29所示。13.1.6 13.1.6 选择选择将光标置于要插入文件元素的位置。选择菜单【插入】|【表单】|【文件】或单击【插入】面板【表单】选项卡中的【文件】

5、按钮 插入一个文件域，如图12-31所示。选中文件元素，在【属性】面板中进行相应设置，如图12-32所示。13.1.713.1.7文件元素文件元素对表单而言，按钮是非常重要的，它能够控制对表单内容的操作，如提交或重置。要将表单的内容发送到远程服务器上，需要使用提交按钮；要清除现有表单内容，需使用重置按钮。用户也可以自定义按钮的名称。在网页中插入按钮的操作步骤如下。将光标置于要插入按钮的位置。选择菜单【插入】|【表单】|【按钮】或单击【插入】面板【表单】选项卡中的【按钮】按钮 插入一个按钮，如图12-33所示。在按钮【属性】面板中设置相应的属性，如图12-34所示。13.1.8 13.1.8 按

6、钮按钮HTML5新增了一些表单元素。1、电子邮件2、url3、数字4、范围5、颜色6、日期和时间类型7、搜索13.1.9 13.1.9 HTML5HTML5表单元素表单元素jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。12.2 jQuery UI12.2 jQuery UI12.2.1 课堂案例-创意家居12.2.2 折叠面板Accordion12.2.3 选项卡Tabs12.2.4 日期选择器Datepicker12.2.5 对话框Dialog12.2 jQuery UI12.2 jQuery UI案例学习目标：学习jQuery

7、 UI的基本操作。案例知识要点：在【插入】面板【jQuery UI】选项卡中，单击【Accordion】按钮创建折叠面板、单击【Tabs】按钮创建选项卡。并使用其【属性】面板进行设置。素材所在位置：光盘/案例素材/ch12/课堂案例-创意家居。案例效果如图12-45所示。13.2.113.2.1课堂案例课堂案例-创意家居创意家居在网页中插入折叠面板Accordion的操作步骤如下。将光标置于要插入折叠面板Accordion的位置。选择菜单【插入】|【jQuery UI】|【Accordion】或单击【插入】面板【jQuery UI】选项卡中的【Accordion】按钮 插入折叠面板。选择菜单【

8、窗口】|【属性】，打开【属性】面板设置Accordion选项，如图12-58所示。12.2.2 12.2.2 折叠面板折叠面板AccordionAccordion在网页中插入Tabs的操作步骤如下。将光标置于要插入Tabs的位置。选择菜单【插入】|【jQuery UI】|【Tabs】单击【插入】面板中【jQuery UI】选项卡中的【Tabs】按钮，在该处插入一个名为Tabs1的选项卡，修改Tabs内容。选择菜单【窗口】|【属性】，打开【属性】面板设置Tabs选项，如图12-59所示。12.2.3 12.2.3 选项卡选项卡TabsTabs日期选择器Datepicker用于从弹出框或内联日历选

9、择一个日期。该控件能非常方便的展现日历中的日期，灵活配置相关选项，包括日期格式、范围等。我们经常在WEB应用中用到Datepicker，比如要求用户输入日期进行相关查询。12.2.4 12.2.4 日期选择器日期选择器DatepickerDatepicker在网页中插入日期选择器Datepicker的操作步骤如下。将光标置于要插入日期选择器Datepicker的位置。选择菜单【插入】|【jQuery UI】|【Datepicker】或单击【插入】面板【jQuery UI】选项卡中的【Datepicker】按钮 插入一个日期选择器Datepicker，如图12-60所示。选择菜单【窗口】|【属性

10、】，打开【属性】面板设置选项，如图12-61所示。12.2.4 12.2.4 日期选择器日期选择器DatepickerDatepicker对话框是一个悬浮窗口，包括一个标题栏和一个内容区域。对话框窗口可以移动，重新调整大小，默认情况下通过关闭图标关闭对话框。在网页中插入对话框Dialog的操作步骤如下。将光标置于要插入对话框Dialog的位置。选择菜单【插入】|【jQuery UI】|【Dialog】或单击【插入】面板【jQuery UI】选项卡中的【Dialog】按钮 插入一个Dialog。选择菜单【窗口】|【属性】，打开【属性】面板设置选项，如图12-62所示。12.2.5 12.2.5

11、对话框对话框DialogDialog12.3.1练习案例-咖啡餐厅12.3.2练习案例-网上生活超市12.3 12.3 练习案例练习案例案例练习目标：练习表单的基本操作。案例操作要点：在页面中部已经插入一个表单和一个内嵌表格，继续完成餐厅预订信息的表单。各单元格插入表单元素并设置如下。预订时间分为年、月、日以及中午、晚上选项和具体时间，均采用选择（列表/菜单）；就餐人数分为成人和儿童两类，均采用文本域，字符宽度为4；订餐内容分为小点心、正餐、酒水、水果和其他，采用复选框；12.3.112.3.1练习案例练习案例-咖啡咖啡订餐类型分为家宴、商宴和婚宴，采用单选按钮；其他说明采用文本域，字符宽度为

12、50，行数为6；顾客名称采用文本域，字符宽度为10；性别分为男和女，采用单选按钮组；手机电话采用Tel，字符宽度为25；电子邮件字符宽度为25。提交按钮和重置按钮采用图像域，其ID分别设为submit和Reset。素材所在位置：光盘/案例素材/ch12/练习案例-咖啡餐厅，效果如图12-64所示。12.3.112.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.212.3.2练习案例练习案例-网上生活超市网上生活超市