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

网页设计与制作课件第11章网页设计与制作课件第11章案例说明企业和个人用于开发和发布移动应用程序所使用的技术在不断地变化，最初，开发和发布移动应用程序的策略是针对每一个主流平台开发独立的本地APP；然而，维护多个平台所需的费用是非常大的，并且移动团队也会丧失其敏捷性。使用jQueryMobile，只需一次编码，就可以将APP部署到所有设备上。本案例首先介绍jQueryMobile的基础知识，然后应用其创建一个移动设备网页“不一样的北京”。案例创建“不一样的北京”移动设备网页——使用jQueryMobile案例说明企业和个人用于开发和发布移动应用程序所使用的技术在不相关知识jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。一、初识jQueryMobilejQuery是继prototype之后又一个优秀的Javascript库。jQuery兼容CSS3和各种浏览器，其核心理念是“writeless，domore”（写得更少，做得更多）。jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此之外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。jQueryMobile是jQuery在手机和平板设备上的版本。它不仅能给主流移动平台带来jQuery核心库，而且能发布一个完整统一的jQuery移动UI框架，支持全球主流的移动平台。相关知识jQuery，顾名思义，也就是JavaScript和三、网页的本质1．jQueryMobile的基本特性一般简单性：该框架简单易用。页面开发主要使用标记，无需或仅需很少JavaScript。优雅降级：尽管jQueryMobile利用最新的HTML5、CSS3和JavaScript，但并不是所有移动设备都提供这样的支持。jQueryMobile的哲学是同时支持高端和低端设备（比如那些没有JavaScript支持的设备），尽量提供最好的体验。易于使用：jQueryMobile在设计时考虑了访问能力，它拥有AccessibleRichInternetApplications（WAI-ARIA）支持，以帮助使用辅助技术的残障人士访问Web页面。小规模：jQueryMobile框架的整体大小比较小，JavaScript库12KB，CSS6KB，还包括一些图标。

主题设置：此框架还提供一个主题系统，允许用户提供自己的应用程序样式。三、网页的本质1．jQueryMobile的基本特性一三、网页的本质2．jQueryMobile的浏览器支持

所有浏览器都应该能够访问全部基础内容。

所有浏览器都应该能够访问全部基础功能。

增强的布局由外部链接的CSS提供。

增强的行为由外部链接的JavaScript提供。

终端用户浏览器偏好应受到尊重。

所有基本内容应该（按照设计）在基础设备上进行渲染，而更高级的平台和浏览器将使用额外的、外部链接的JavaScript和CSS持续增强。jQueryMobile同时支持高端和低端设备，比如那些没有JavaScript支持的设备。持续增强（ProgressiveEnhancement）包含以下核心原则：三、网页的本质2．jQueryMobile的浏览器支持三、网页的本质3．jQueryMobile支持的移动平台

AppleiOS：iPhone、iPodTouch、iPad（所有版本）

Android：所有设备（所有版本）

BlackberryTorch（版本6）

PalmWebOSPre系列、Pixi系列、Veer、TouchPad

NokiaN900（进程中）

WindowsPhone8/8.1/10预览版jQueryMobile目前支持以下移动平台：三、网页的本质3．jQueryMobile支持的移动平台二、创建jQueryMobile页面Dreamweaver集成了jQueryMobile，有助于快速创建适合大部分移动设备的网页程序，并可以使网页自身适应各类尺寸的设备。“jQueryMobile页面”组件充当所有其他jQueryMobile组件的容器。在新的使用HTML5的页面中添加“jQueryMobile页面”组件，可以创建出jQueryMobile的页面结构。启动DreamweaverCC，选择“文件”>“新建”菜单，打开“新建文档”对话框，在对话框左侧列表中选择“新建文档”，在“文档类型”列表中选择“HTML”，右侧保持默认，如图所示。步骤01二、创建jQueryMobile页面Dreamweaver三、网页的本质在“新建文档”对话框中单击“创建”按钮，即创建一个空白HTML5文档，如下图所示。步骤02三、网页的本质在“新建文档”对话框中单击“创建”按钮，即创建三、网页的本质将插入点置于空白文档编辑窗口中，单击“插入”面板“jQueryMobile”类别中的“页面”按钮，打开“jQueryMobile文件”对话框。在该对话框中选中“远程”和“组合”单选按钮后，单击“确定”按钮，如下图所示。步骤03三、网页的本质将插入点置于空白文档编辑窗口中，单击“插入”面三、网页的本质打开“页面”对话框，输入“页面”组件的属性（此处保持默认设置），单击“确定”按钮，创建jQueryMobile页面结构，如下图所示。步骤04三、网页的本质打开“页面”对话框，输入“页面”组件的属性（此三、jQueryMobile页面结构在代码界面中打开前面创建的jQueryMobile页面，可以看到其基本结构，如下图所示。一般的jQueryMobileWeb应用程序都要遵循这个基本结构。要使用jQueryMobile，首先需要在开发的界面中包含以下3项内容。CSS文件；jQuerylibrary；

jQueryMobilelibrary。三、jQueryMobile页面结构在代码界面中打开前面创三、网页的本质在data-role="page"的div中还可以包含data-role值为header、content、footer的div元素。各元素的功能及意义如下。知识库以上基本页面模板中的内容都包含在div标签中，并为标签添加了data-role="page"属性。这样jQueryMobile就会知道哪些内容需要处理。data-role="header"：用于创建页面上方的工具栏，常用于标题和搜索按钮，至少要放置一个“返回”按钮（用于返回前一页），通过为其添加属性“data-position="fixed"”，可以保证头部始终保持在屏幕的顶部。

data-role="content"：用于定义页面的内容，比如文本、图像、表单和按钮等。

data-role="footer"：用于创建页面底部的工具栏，以添加一些功能按钮，通过为其添加属性“data-position="fixed"”，可以保证其始终保持在屏幕的底部。这些元素都是可选的，但至少要包含一个data-role值为content的div。三、网页的本质在data-role="page"的div中还四、使用jQueryMobile组件jQueryMobile提供了多种组件，包括列表、布局、表单等，通过Dreamweaver“插入”面板“jQueryMobile”类别中的各项可以插入这些组件。本节简单介绍几个常用组件。在Dreamweaver中单击“插入”面板“jQueryMobile”类别下的“列表视图”按钮，可以在页面中插入jQueryMobile列表。1．使用列表视图四、使用jQueryMobile组件jQueryMobi三、网页的本质参照前面第二节的方法创建jQueryMobile页面后，将插入点置于页面中“第2页”下方data-role=“content”的div中，并将其中的文字“内容”删除，如下图所示。步骤01三、网页的本质参照前面第二节的方法创建jQueryMobi三、网页的本质单击“插入”面板“jQueryMobile”类别下的“列表视图”按钮，打开“列表视图”对话框，如左图所示。步骤02单击“确定”按钮，即在页面中插入设置的列表视图，如右图所示。步骤03三、网页的本质单击“插入”面板“jQueryMobile”三、网页的本质单击“文档工具栏”中的“实时视图”按钮，可看到页面中的列表视图效果如下图所示，保存文档为11-1.html。步骤04三、网页的本质单击“文档工具栏”中的“实时视图”按钮，可看到三、网页的本质有序列表ol可以创建数字排序的列表，用于表现顺序序列，例如在设置搜索结果或电影排行榜时非常有用。当增强效果应用在列表时，jQueryMobile优先使用CSS方式为列表添加编号，当浏览器不支持该方式时，框架会采用JavaScript将编号写入列表中。将上述页面中的代码“ul”改成“ol”，然后单击“文档工具栏”中的“实时视图”按钮，得到有序列表的代码及效果如下图所示。三、网页的本质有序列表ol可以创建数字排序的列表，用于表现顺三、网页的本质jQueryMobile内嵌列表与普通列表的区别，仅仅在于多了一个data-inset=“true”属性，其代码及效果如下图所示。三、网页的本质jQueryMobile内嵌列表与普通列表的三、网页的本质有些情况下，每个列表项会有多个操作，此时可以通过拆分按钮来提供两个独立的可点击的部分：列表项本身和列表项右侧的小箭头。要创建这种拆分按钮，在<li>中插入第二个链接即可，框架会创建一个垂直分割线，并把链接样式转化为一个只有小箭头的按钮，jQueryMobile拆分的按钮列表源代码及效果如下图所示。三、网页的本质有些情况下，每个列表项会有多个操作，此时可以通三、网页的本质jQueryMobile支持通过HTML语义化的标签来显示列表项中所需常见的文本格式，如标题/描述、二级信息、计数等。jQueryMobile文本说明源代码及效果如右图所示。三、网页的本质jQueryMobile支持通过HTML语义三、网页的本质2．使用布局网格由于移动设备的屏幕通常都较小，一般不推荐在布局中使用多栏布局方法。当需要将一些小的元素并排放置时（比如按钮或导航标签），可以使用布局网格。jQueryMobile框架提供了一种简单的方法构建基于CSS的分栏布局——ui-grid。jQueryMobile提供了两种预设的配置布局：两列布局（class含有ui-grid-a）和三列布局（class含有ui-grid-b）。这两种布局几乎可以满足任何需要列布局的情况。网格是100%宽，不可见（没有背景或边框），也没有padding和margin，所以它们不会影响内部元素的样式。三、网页的本质2．使用布局网格由于移动设备的屏幕通常都较小，三、网页的本质单击“插入”面板“jQueryMobile”类别下的“布局网格”按钮，打开“布局网格”对话框，设置网格参数后，单击“确定”按钮，在网页中插入布局网格，如下图所示。步骤02创建jQueryMobile页面后，将插入点置于页面中data-role=“content”的div中，并将其中的文字“内容”删除。步骤01三、网页的本质单击“插入”面板“jQueryMobile”在“文档工具栏”中单击“实时视图”按钮，页面中的布局网格效果如左图所示，将网页保存为“11-6.html”。步骤03如要插入三列布局的网格，只需要在“布局网格”对话框“列”下拉列表中选择“3”即可，如右图所示。三列布局的网格源代码如下：<divclass="ui-grid-b"><divclass="ui-block-a">区块1,1</div><divclass="ui-block-b">区块1,2</div><divclass="ui-block-c">区块1,3</div></div>在“文档工具栏”中单击“实时视图”按钮，页面中的布局网格效果三、网页的本质3．使用可折叠区块要在网页中创建一个可折叠区块，首先需要创建一个容器，然后为容器添加data-role="collapsible"属性。jQueryMobile会将容器内的（h1～h6）子节点表现为可点击的按钮，并在左侧添加一个“+”按钮，表示其可以展开。在头部后面可以添加任何需要折叠的html标签。框架会自动将这些标签包裹在一个容器中用于折叠或显示。创建jQueryMobile页面后，将插入点置于页面中“第1页”下方data-role="content"的div中，并将其中的文字“内容”删除。步骤01三、网页的本质3．使用可折叠区块要在网页中创建一个可折叠区块三、网页的本质单击“插入”面板“jQueryMobile”类别下的“可折叠区块”按钮，即可在网页中插入可折叠区块，如左图所示。步骤02在“文档工具栏”中单击“实时视图”按钮，页面中的可折叠区块效果如右图所示，将网页保存为“11-7.html”。步骤03三、网页的本质单击“插入”面板“jQueryMobile”4．使用文本输入框文本输入框和文本输入域使用标准的HTML标记，jQueryMobile使它们在移动设备中变得更加吸引人并且易于触摸和使用。创建jQueryMobile页面后，将插入点置于页面中data-role=“content”的div中，并将其中的文字“内容”删除。步骤014．使用文本输入框文本输入框和文本输入域使用标准的HTML标三、网页的本质单击“插入”面板“jQueryMobile”类别下的“文本”按钮，即可在网页中插入文本输入框，如左图所示。步骤02在“文档工具栏”中单击“实时视图”按钮，页面中的文本输入框效果如右图所示。步骤03三、网页的本质单击“插入”面板“jQueryMobile”5．使用密码输入框单击“插入”面板“jQueryMobile”类别下的“密码”按钮，即可在网页中插入密码输入框，如左图所示。在“文档工具栏”中单击“实时视图”按钮，页面中的密码输入框效果如右图所示。5．使用密码输入框单击“插入”面板“jQueryMobil6．使用文本区域文本区域（textarea）一般用于多行输入。jQueryMobile框架会自动加大文本域的高度，以防止出现滚动条，因为其在移动设备中很难使用。单击“插入”面板“jQueryMobile”类别下的“文本区域”按钮，即可在网页中插入文本区域输入框，如左图所示。在“文档工具栏”中单击“实时视图”按钮，页面中的文本区域输入框效果如右图所示。6．使用文本区域文本区域（textarea）一般用于多行输入7．使用选择框单击“插入”面板“jQueryMobile”类别下的“选择”按钮，即可在网页中插入选择框，如左图所示。在“文档工具栏”中单击“实时视图”按钮，页面中的选择框效果如右图所示。7．使用选择框单击“插入”面板“jQueryMobile”8．使用复选框单击“插入”面板“jQueryMobile”类别下的“复选框”按钮，可打开“复选框”对话框，保持默认设置，单击“确定”按钮可在网页中插入复选框，如下图所示。在“文档工具栏”中单击“实时视图”按钮，页面中的复选框效果如左图所示。8．使用复选框单击“插入”面板“jQueryMobile”9．使用单选按钮单击“插入”面板“jQueryMobile”类别下的“单选按钮”按钮，可打开“单选按钮”对话框，保持默认设置，单击“确定”按钮可在网页中插入单选按钮，如下图所示。在“文档工具栏”中单击“实时视图”按钮，页面中的单选按钮效果如左图所示。9．使用单选按钮单击“插入”面板“jQueryMobile10．使用按钮按钮是由标准的HTML的a标签构成。jQueryMobile使它们变得更吸引人并且更易于触摸使用。单击“插入”面板“jQueryMobile”类别下的“按钮”按钮，可打开“按钮”对话框，保持默认设置，单击“确定”按钮可在网页中插入按钮，如下图所示。提示在page元素的主要block内，可以通过给任意链接添加data-role="button"属性来将其样式化为按钮。10．使用按钮按钮是由标准的HTML的a标签构成。jQuer11．更多文本输入类型除上面介绍的常见输入类型外，jQueryMobile还提供了电子邮件（email）、Url、数字（number）、时间、日期、周等更多类型。电子邮件用于输入包含@符号的电子邮件地址，Url用于输入链接地址，搜索用于输入搜索内容，提供一个带有搜索图标的文本框。这些输入类型的用法与前面介绍的几种类型大同小异，此处不再详细介绍。11．更多文本输入类型除上面介绍的常见输入类型外，jQuer五、使用jQueryMobile主题jQueryMobile提供了5种不同的样式主题，用a，b，c，d，e进行引用。从“a”到“e”，每种主题带有不同颜色的按钮、栏、内容块，等等。为了使颜色主题能够保持一直地映射到组件中，需要遵从的规约是：a主题是视觉上最高级别的主题（黑色）；b主题为次级主题（蓝色）；c主题为基准主题，在很多情况下默认使用该主题；d主题为备用的次级内容主题；e主题为强调用主题。下表对各主题进行了简单描述。值描

述a默认。黑色背景上的白色文本。b蓝色背景上的白色文本/灰色背景上的黑色文本c亮灰色背景上的黑色文本d白色背景上的黑色文本e橙色背景上的黑色文本五、使用jQueryMobile主题jQueryMobi使用DreamweaverCC新增的“jQueryMobile色板”面板，（见下图）可以在jQueryMobileCSS文件中预览所有主题，然后使用该面板来应用色板，或从jQueryMobileWeb页的各种元素中删除它们。默认情况下，jQueryMobile给所有的头部栏和尾部栏分配的是a主题，因为它们在应用中视觉优先级最高。如果要给其设置一个不同的主题，只需要给头部栏和尾部栏容器增加data-theme属性，然后设定其值为要设置的主题样式字母即可。默认情况下，jQueryMobile给content分配主题c，使其在视觉上与头部栏区分开来。使用DreamweaverCC新增的“jQueryMob案例实施一、网页、网站和主页在学习了jQueryMobile的相关知识后，下面通过构建“不一样的北京”移动设备网页，来进一步巩固其在实际操作中的应用。网页效果如图所示。案例实施一、网页、网站和主页在学习了jQueryMobil案例实施一、网页、网站和主页启动DreamweaverCC，将本书附赠的“素材与实例/ch11”目录下的“beijing”文件夹拷贝至本地磁盘，并在Dreamweaver中新建站点“bj”。步骤01一、新建文档在站点根目录下新建文档“index_1x.html”，并在文档编辑窗口中打开。步骤02案例实施一、网页、网站和主页启动DreamweaverCC案例实施一、网页、网站和主页二、制作主界面主界面主要包括一个列表视图，列表中的各项链接至不同的子页面，效果如图11-34所示。案例实施一、网页、网站和主页二、制作主界面主界面主要包括一个案例实施将插入点置于文档编辑窗口中，单击“插入”面板“jQueryMobile”类别中的“页面”按钮，在弹出的“jQueryMobile文件”对话框中单击“确定”按钮，在接下来弹出的“页面”对话框中单击“确定”按钮，创建jQueryMobile页面，如下图所示。一、网页、网站和主页步骤01案例实施将插入点置于文档编辑窗口中，单击“插入”面板“jQu案例实施首先将上方header部分的文字“标题”删除，然后重新输入文字“不一样的北京”，如左图所示。一、网页、网站和主页步骤02将content部分的文字“内容”删除，然后单击“插入”面板“jQueryMobile”类别中的“列表视图”按钮，在弹出的“列表视图”对话框中单击“确定”按钮，插入“列表视图”，如右图所示。步骤03案例实施首先将上方header部分的文字“标题”删除，然后重案例实施将“列表视图”中的文字“页面”依次修改为“天安丽日”“紫禁余晖”和“燕塞雄关”，如左图所示。一、网页、网站和主页步骤04将footer部分的文字“脚注”删除，重新输入文字“Copyright2017”,如右图所示。步骤05案例实施将“列表视图”中的文字“页面”依次修改为“天安丽日”案例实施一、网页、网站和主页三、制作子页面此处的子页面包括3部分，制作好的效果图如右图所示。案例实施一、网页、网站和主页三、制作子页面此处的子页面包括3案例实施将插入点置于前面插入的作为主界面的id为“page”的Div下面，单击“插入”面板“jQueryMobile”类别中的“页面”按钮，在弹出的“页面”对话框中单击“确定”按钮，创建jQueryMobile页面，如下图所示。一、网页、网站和主页步骤01案例实施将插入点置于前面插入的作为主界面的id为“page”案例实施一、网页、网站和主页将上方header部分的文字“标题”删除，然后重新输入文字“天安丽日”，如左图所示。步骤02将插入点置于content部分“内容”文字后面，将文字删除，然后插入图像“talr.jpg”（位于网站根文件夹“images”文件夹中），如右图所示。步骤03案例实施一、网页、网站和主页将上方header部分的文字“标案例实施打开网站根文件夹下的文本文档“text1.txt”，按【Ctrl+A】组合键选择所有文本，再按【Ctrl+C】组合键复制所选文本，切换到网页文档“index.html”，将插入点置于图像后面并按回车键，接着按【Ctrl+V】组合键粘贴文本，如右图所示。一、网页、网站和主页步骤04案例实施打开网站根文件夹下的文本文档“text1.txt”，案例实施将插入点置于文字后面，单击“插入”面板“jQueryMobile”类别中的“布局网格”按钮，打开“布局网格”对话框，单击“确定”按钮插入两列布局的网格，如右图所示。一、网页、网站和主页步骤05案例实施将插入点置于文字后面，单击“插入”面板“jQuery案例实施将插入点置于“区块1,1”，将其中的文字删除，单击“插入”面板“jQueryMobile”类别中的“按钮”，打开“按钮”对话框，单击“确定”按钮插入按钮，如右图所示。一、网页、网站和主页步骤06案例实施将插入点置于“区块1,1”，将其中的文字删除，单击“案例实施一、网页、网站和主页在代码视图中修改“href”属性值为“#page”，文字“按钮”为“返回主界面”，如右图所示。步骤07案例实施一、网页、网站和主页在代码视图中修改“href”属性案例实施将插入点置于“区块1,2”，将其中的文字删除，参照步骤6的方法插入按钮，并修改其按钮属性和文字，如右图所示。一、网页、网站和主页步骤08案例实施将插入点置于“区块1,2”，将其中的文字删除，参照步案例实施一、网页、网站和主页将footer部分的文字“脚注”删除，重新输入文字“Copyright2016”，如右图所示。步骤09参照前面的操作，制作其他2个子页面。最后记得保存文档。步骤10案例实施一、网页、网站和主页将footer部分的文字“脚注”感谢您的阅读！感谢您的阅读！网页设计与制作课件第11章网页设计与制作课件第11章案例说明企业和个人用于开发和发布移动应用程序所使用的技术在不断地变化，最初，开发和发布移动应用程序的策略是针对每一个主流平台开发独立的本地APP；然而，维护多个平台所需的费用是非常大的，并且移动团队也会丧失其敏捷性。使用jQueryMobile，只需一次编码，就可以将APP部署到所有设备上。本案例首先介绍jQueryMobile的基础知识，然后应用其创建一个移动设备网页“不一样的北京”。案例创建“不一样的北京”移动设备网页——使用jQueryMobile案例说明企业和个人用于开发和发布移动应用程序所使用的技术在不相关知识jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。一、初识jQueryMobilejQuery是继prototype之后又一个优秀的Javascript库。jQuery兼容CSS3和各种浏览器，其核心理念是“writeless，domore”（写得更少，做得更多）。jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此之外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。jQueryMobile是jQuery在手机和平板设备上的版本。它不仅能给主流移动平台带来jQuery核心库，而且能发布一个完整统一的jQuery移动UI框架，支持全球主流的移动平台。相关知识jQuery，顾名思义，也就是JavaScript和三、网页的本质1．jQueryMobile的基本特性一般简单性：该框架简单易用。页面开发主要使用标记，无需或仅需很少JavaScript。优雅降级：尽管jQueryMobile利用最新的HTML5、CSS3和JavaScript，但并不是所有移动设备都提供这样的支持。jQueryMobile的哲学是同时支持高端和低端设备（比如那些没有JavaScript支持的设备），尽量提供最好的体验。易于使用：jQueryMobile在设计时考虑了访问能力，它拥有AccessibleRichInternetApplications（WAI-ARIA）支持，以帮助使用辅助技术的残障人士访问Web页面。小规模：jQueryMobile框架的整体大小比较小，JavaScript库12KB，CSS6KB，还包括一些图标。

主题设置：此框架还提供一个主题系统，允许用户提供自己的应用程序样式。三、网页的本质1．jQueryMobile的基本特性一三、网页的本质2．jQueryMobile的浏览器支持

所有浏览器都应该能够访问全部基础内容。

所有浏览器都应该能够访问全部基础功能。

增强的布局由外部链接的CSS提供。

增强的行为由外部链接的JavaScript提供。

终端用户浏览器偏好应受到尊重。

所有基本内容应该（按照设计）在基础设备上进行渲染，而更高级的平台和浏览器将使用额外的、外部链接的JavaScript和CSS持续增强。jQueryMobile同时支持高端和低端设备，比如那些没有JavaScript支持的设备。持续增强（ProgressiveEnhancement）包含以下核心原则：三、网页的本质2．jQueryMobile的浏览器支持三、网页的本质3．jQueryMobile支持的移动平台

AppleiOS：iPhone、iPodTouch、iPad（所有版本）

Android：所有设备（所有版本）

BlackberryTorch（版本6）

PalmWebOSPre系列、Pixi系列、Veer、TouchPad

NokiaN900（进程中）

WindowsPhone8/8.1/10预览版jQueryMobile目前支持以下移动平台：三、网页的本质3．jQueryMobile支持的移动平台二、创建jQueryMobile页面Dreamweaver集成了jQueryMobile，有助于快速创建适合大部分移动设备的网页程序，并可以使网页自身适应各类尺寸的设备。“jQueryMobile页面”组件充当所有其他jQueryMobile组件的容器。在新的使用HTML5的页面中添加“jQueryMobile页面”组件，可以创建出jQueryMobile的页面结构。启动DreamweaverCC，选择“文件”>“新建”菜单，打开“新建文档”对话框，在对话框左侧列表中选择“新建文档”，在“文档类型”列表中选择“HTML”，右侧保持默认，如图所示。步骤01二、创建jQueryMobile页面Dreamweaver三、网页的本质在“新建文档”对话框中单击“创建”按钮，即创建一个空白HTML5文档，如下图所示。步骤02三、网页的本质在“新建文档”对话框中单击“创建”按钮，即创建三、网页的本质将插入点置于空白文档编辑窗口中，单击“插入”面板“jQueryMobile”类别中的“页面”按钮，打开“jQueryMobile文件”对话框。在该对话框中选中“远程”和“组合”单选按钮后，单击“确定”按钮，如下图所示。步骤03三、网页的本质将插入点置于空白文档编辑窗口中，单击“插入”面三、网页的本质打开“页面”对话框，输入“页面”组件的属性（此处保持默认设置），单击“确定”按钮，创建jQueryMobile页面结构，如下图所示。步骤04三、网页的本质打开“页面”对话框，输入“页面”组件的属性（此三、jQueryMobile页面结构在代码界面中打开前面创建的jQueryMobile页面，可以看到其基本结构，如下图所示。一般的jQueryMobileWeb应用程序都要遵循这个基本结构。要使用jQueryMobile，首先需要在开发的界面中包含以下3项内容。CSS文件；jQuerylibrary；

jQueryMobilelibrary。三、jQueryMobile页面结构在代码界面中打开前面创三、网页的本质在data-role="page"的div中还可以包含data-role值为header、content、footer的div元素。各元素的功能及意义如下。知识库以上基本页面模板中的内容都包含在div标签中，并为标签添加了data-role="page"属性。这样jQueryMobile就会知道哪些内容需要处理。data-role="header"：用于创建页面上方的工具栏，常用于标题和搜索按钮，至少要放置一个“返回”按钮（用于返回前一页），通过为其添加属性“data-position="fixed"”，可以保证头部始终保持在屏幕的顶部。

data-role="content"：用于定义页面的内容，比如文本、图像、表单和按钮等。

data-role="footer"：用于创建页面底部的工具栏，以添加一些功能按钮，通过为其添加属性“data-position="fixed"”，可以保证其始终保持在屏幕的底部。这些元素都是可选的，但至少要包含一个data-role值为content的div。三、网页的本质在data-role="page"的div中还四、使用jQueryMobile组件jQueryMobile提供了多种组件，包括列表、布局、表单等，通过Dreamweaver“插入”面板“jQueryMobile”类别中的各项可以插入这些组件。本节简单介绍几个常用组件。在Dreamweaver中单击“插入”面板“jQueryMobile”类别下的“列表视图”按钮，可以在页面中插入jQueryMobile列表。1．使用列表视图四、使用jQueryMobile组件jQueryMobi三、网页的本质参照前面第二节的方法创建jQueryMobile页面后，将插入点置于页面中“第2页”下方data-role=“content”的div中，并将其中的文字“内容”删除，如下图所示。步骤01三、网页的本质参照前面第二节的方法创建jQueryMobi三、网页的本质单击“插入”面板“jQueryMobile”类别下的“列表视图”按钮，打开“列表视图”对话框，如左图所示。步骤02单击“确定”按钮，即在页面中插入设置的列表视图，如右图所示。步骤03三、网页的本质单击“插入”面板“jQueryMobile”三、网页的本质单击“文档工具栏”中的“实时视图”按钮，可看到页面中的列表视图效果如下图所示，保存文档为11-1.html。步骤04三、网页的本质单击“文档工具栏”中的“实时视图”按钮，可看到三、网页的本质有序列表ol可以创建数字排序的列表，用于表现顺序序列，例如在设置搜索结果或电影排行榜时非常有用。当增强效果应用在列表时，jQueryMobile优先使用CSS方式为列表添加编号，当浏览器不支持该方式时，框架会采用JavaScript将编号写入列表中。将上述页面中的代码“ul”改成“ol”，然后单击“文档工具栏”中的“实时视图”按钮，得到有序列表的代码及效果如下图所示。三、网页的本质有序列表ol可以创建数字排序的列表，用于表现顺三、网页的本质jQueryMobile内嵌列表与普通列表的区别，仅仅在于多了一个data-inset=“true”属性，其代码及效果如下图所示。三、网页的本质jQueryMobile内嵌列表与普通列表的三、网页的本质有些情况下，每个列表项会有多个操作，此时可以通过拆分按钮来提供两个独立的可点击的部分：列表项本身和列表项右侧的小箭头。要创建这种拆分按钮，在<li>中插入第二个链接即可，框架会创建一个垂直分割线，并把链接样式转化为一个只有小箭头的按钮，jQueryMobile拆分的按钮列表源代码及效果如下图所示。三、网页的本质有些情况下，每个列表项会有多个操作，此时可以通三、网页的本质jQueryMobile支持通过HTML语义化的标签来显示列表项中所需常见的文本格式，如标题/描述、二级信息、计数等。jQueryMobile文本说明源代码及效果如右图所示。三、网页的本质jQueryMobile支持通过HTML语义三、网页的本质2．使用布局网格由于移动设备的屏幕通常都较小，一般不推荐在布局中使用多栏布局方法。当需要将一些小的元素并排放置时（比如按钮或导航标签），可以使用布局网格。jQueryMobile框架提供了一种简单的方法构建基于CSS的分栏布局——ui-grid。jQueryMobile提供了两种预设的配置布局：两列布局（class含有ui-grid-a）和三列布局（class含有ui-grid-b）。这两种布局几乎可以满足任何需要列布局的情况。网格是100%宽，不可见（没有背景或边框），也没有padding和margin，所以它们不会影响内部元素的样式。三、网页的本质2．使用布局网格由于移动设备的屏幕通常都较小，三、网页的本质单击“插入”面板“jQueryMobile”类别下的“布局网格”按钮，打开“布局网格”对话框，设置网格参数后，单击“确定”按钮，在网页中插入布局网格，如下图所示。步骤02创建jQueryMobile页面后，将插入点置于页面中data-role=“content”的div中，并将其中的文字“内容”删除。步骤01三、网页的本质单击“插入”面板“jQueryMobile”在“文档工具栏”中单击“实时视图”按钮，页面中的布局网格效果如左图所示，将网页保存为“11-6.html”。步骤03如要插入三列布局的网格，只需要在“布局网格”对话框“列”下拉列表中选择“3”即可，如右图所示。三列布局的网格源代码如下：<divclass="ui-grid-b"><divclass="ui-block-a">区块1,1</div><divclass="ui-block-b">区块1,2</div><divclass="ui-block-c">区块1,3</div></div>在“文档工具栏”中单击“实时视图”按钮，页面中的布局网格效果三、网页的本质3．使用可折叠区块要在网页中创建一个可折叠区块，首先需要创建一个容器，然后为容器添加data-role="collapsible"属性。jQueryMobile会将容器内的（h1～h6）子节点表现为可点击的按钮，并在左侧添加一个“+”按钮，表示其可以展开。在头部后面可以添加任何需要折叠的html标签。框架会自动将这些标签包裹在一个容器中用于折叠或显示。创建jQueryMobile页面后，将插入点置于页面中“第1页”下方data-role="content"的div中，并将其中的文字“内容”删除。步骤01三、网页的本质3．使用可折叠区块要在网页中创建一个可折叠区块三、网页的本质单击“插入”面板“jQueryMobile”类别下的“可折叠区块”按钮，即可在网页中插入可折叠区块，如左图所示。步骤02在“文档工具栏”中单击“实时视图”按钮，页面中的可折叠区块效果如右图所示，将网页保存为“11-7.html”。步骤03三、网页的本质单击“插入”面板“jQueryMobile”4．使用文本输入框文本输入框和文本输入域使用标准的HTML标记，jQueryMobile使它们在移动设备中变得更加吸引人并且易于触摸和使用。创建jQueryMobile页面后，将插入点置于页面中data-role=“content”的div中，并将其中的文字“内容”删除。步骤014．使用文本输入框文本输入框和文本输入域使用标准的HTML标三、网页的本质单击“插入”面板“jQueryMobile”类别下的“文本”按钮，即可在网页中插入文本输入框，如左图所示。步骤02在“文档工具栏”中单击“实时视图”按钮，页面中的文本输入框效果如右图所示。步骤03三、网页的本质单击“插入”面板“jQueryMobile”5．使用密码输入框单击“插入”面板“jQueryMobile”类别下的“密码”按钮，即可在网页中插入密码输入框，如左图所示。在“文档工具栏”中单击“实时视图”按钮，页面中的密码输入框效果如右图所示。5．使用密码输入框单击“插入”面板“jQueryMobil6．使用文本区域文本区域（textarea）一般用于多行输入。jQueryMobile框架会自动加大文本域的高度，以防止出现滚动条，因为其在移动设备中很难使用。单击“插入”面板“jQueryMobile”类别下的“文本区域”按钮，即可在网页中插入文本区域输入框，如左图所示。在“文档工具栏”中单击“实时视图”按钮，页面中的文本区域输入框效果如右图所示。6．使用文本区域文本区域（textarea）一般用于多行输入7．使用选择框单击“插入”面板“jQueryMobile”类别下的“选择”按钮，即可在网页中插入选择框，如左图所示。在“文档工具栏”中单击“实时视图”按钮，页面中的选择框效果如右图所示。7．使用选择框单击“插入”面板“jQueryMobile”8．使用复选框单击“插入”面板“jQueryMobile”类别下的“复选框”按钮，可打开“复选框”对话框，保持默认设置，单击“确定”按钮可在网页中插入复选框，如下图所示。在“文档工具栏”中单击“实时视图”按钮，页面中的复选框效果如左图所示。8．使用复选框单击“插入”面板“jQueryMobile”9．使用单选按钮单击“插入”面板“jQueryMobile”类别下的“单选按钮”按钮，可打开“单选按钮”对话框，保持默认设置，单击“确定”按钮可在网页中插入单选按钮，如下图所示。在“文档工具栏”中单击“实时视图”按钮，页面中的单选按钮效果如左图所示。9．使用单选按钮单击“插入”面板“jQueryMobile10．使用按钮按钮是由标准的HTML的a标签构成。jQueryMobile使它们变得更吸引人并且更易于触摸使用。单击“插入”面板“jQueryMobile”类别下的“按钮”按钮，可打开“按钮”对话框，保持默认设置，单击“确定”按钮可在网页中插入按钮，如下图所示。提示在page元素的主要block内，可以通过给任意链接添加data-role="button"属性来将其样式化为按钮。10．使用按钮按钮是由标准的HTML的a标签构成。jQuer11．更多文本输入类型除上面介绍的常见输入类型外，jQueryMobile还提供了电子邮件（email）、Url、数字（number）、时间、日期、周等更多类型。电子邮件用于输入包含@符号的电子邮件地址，Url用于输入链接地址，搜索用于输入搜索内容，提供一个带有搜索图标的文本框。这些输入类型的用法与前面介绍的几种类型大同小异，此处不再详细介绍。11．更多文本输入类型除上面介绍的常见输入类型外，jQuer五、使用jQueryMobile主题jQueryMobile提供了5种不同的样式主题，用a，b，c，d，e进行引用。从“a”到“e”，每种主题带有不同颜色的按钮、栏、内容块，等等。为了使颜色主题能够保持一直地映射到组件中，需要遵从的规约是：a主题是视觉上最高级别的主题（黑色）；b主题为次级主题（蓝色）；c主题为基准主题，在很多情况下默认使用该主题；d主题为备用的次级内容主题；e主题为强调用主题。下表对各主题进行了简单描述。值描

述a默认。黑色背景上的白色文本。b蓝色背景上的白色文本/灰色背景上的黑色文本c亮灰色背景上的黑色文本d白色背景上的黑色文本e橙色背景上的黑色文本五、使用jQueryMobile主题jQueryMobi使用DreamweaverCC新增的“jQueryMobile色板”面板，（见下图）可以在jQueryMobileCSS文件中预览所有主题，然后使用该面板来应用色板，或从jQueryMobileWeb页的各种元素中删除它们。默认情况下，jQueryMobile给所有的头部栏和尾部栏分配的是a主题，因为它们在应用中视觉优先级最高。如果要给其设置一个不同的主题，只需要给头部栏和尾部栏容器增加data-theme属性，然后设定其值为要设置的主题样式字母即可。默认情况下，jQueryMobile给content分配主题c，使其在视觉上与头部栏区分开来。使用DreamweaverCC新增的“jQueryMob案例实施一、网页、网站和主页在学习了jQueryMobile的相关知识后，下面通过构建“不一样的北京”移动设备网页，来进一步巩固其在实际操作中的应用。网页效果如图所示。案例实施一、网页、网站和主页在学习了jQueryMobil案例实施一、网页、网站和主页启动Dreamweaver