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

1、案例目录页 CONTENTS PAGE 项目十一 创建移动设备网页3 项目十一 创建移动设备网页案例说明企业和个人用于开发和发布移动应用程序所使用的技术在不断地变化，最初，开发和发布移动应用程序的策略是针对每一个主流平台开发独立的本地APP；然而，维护多个平台所需的费用是非常大的，并且移动团队也会丧失其敏捷性。使用jQuery Mobile，只需一次编码，就可以将APP部署到所有设备上。本案例首先介绍jQuery Mobile的基础知识，然后应用其创建一个移动设备网页“不一样的北京”。4 项目十一 创建移动设备网页相关知识相关知识jQuery，顾名思义，也就是JavaScript和查询（Que

2、ry），即是辅助JavaScript开发的库。一、初识jQuery MobilejQuery是继prototype之后又一个优秀的Javascript库。jQuery兼容CSS 3和各种浏览器，其核心理念是“write less，do more”（写得更少，做得更多）。jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此之外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。jQuery Mobile是jQue

3、ry在手机和平板设备上的版本。它不仅能给主流移动平台带来jQuery核心库，而且能发布一个完整统一的jQuery移动UI框架，支持全球主流的移动平台。5 项目十一 创建移动设备网页三、网页的本质1jQuery Mobile的基本特性u 一般简单性：该框架简单易用。页面开发主要使用标记，无需或仅需很少JavaScript。u 优雅降级：尽管jQuery Mobile利用最新的HTML 5、CSS 3和JavaScript，但并不是所有移动设备都提供这样的支持。jQuery Mobile的哲学是同时支持高端和低端设备（比如那些没有JavaScript支持的设备），尽量提供最好的体验。u 易于使用：

4、jQuery Mobile在设计时考虑了访问能力，它拥有Accessible Rich Internet Applications（WAI-ARIA）支持，以帮助使用辅助技术的残障人士访问Web页面。u 小规模：jQuery Mobile框架的整体大小比较小，JavaScript库12KB，CSS 6KB，还包括一些图标。u 主题设置：此框架还提供一个主题系统，允许用户提供自己的应用程序样式。6 项目十一 创建移动设备网页三、网页的本质2jQuery Mobile的浏览器支持u 所有浏览器都应该能够访问全部基础内容。u 所有浏览器都应该能够访问全部基础功能。u 增强的布局由外部链接的CSS提供

5、。u 增强的行为由外部链接的JavaScript提供。u 终端用户浏览器偏好应受到尊重。u 所有基本内容应该（按照设计）在基础设备上进行渲染，而更高级的平台和浏览器将使用额外的、外部链接的JavaScript和CSS持续增强。jQuery Mobile 同时支持高端和低端设备，比如那些没有JavaScript支持的设备。持续增强（Progressive Enhancement）包含以下核心原则：7 项目十一 创建移动设备网页三、网页的本质3jQuery Mobile支持的移动平台u Apple iOS：iPhone、iPod Touch、iPad（所有版本）u Android：所有设备（所有版

6、本）u Blackberry Torch（版本6）u Palm WebOS Pre系列、Pixi系列、Veer、TouchPadu Nokia N900（进程中）u Windows Phone 8/8.1/10预览版jQuery Mobile目前支持以下移动平台：8 项目十一 创建移动设备网页二、创建jQuery Mobile页面Dreamweaver集成了jQuery Mobile，有助于快速创建适合大部分移动设备的网页程序，并可以使网页自身适应各类尺寸的设备。“jQuery Mobile页面”组件充当所有其他jQuery Mobile组件的容器。在新的使用HTML 5的页面中添加“jQue

7、ry Mobile页面”组件，可以创建出jQuery Mobile的页面结构。启动Dreamweaver CC，选择“文件”“新建”菜单，打开“新建文档”对话框，在对话框左侧列表中选择“新建文档”，在“文档类型”列表中选择“HTML”，右侧保持默认，如图所示。步骤 019 项目十一 创建移动设备网页三、网页的本质在“新建文档”对话框中单击“创建”按钮，即创建一个空白HTML 5文档，如下图所示。步骤 0210 项目十一 创建移动设备网页三、网页的本质将插入点置于空白文档编辑窗口中，单击“插入”面板“jQuery Mobile”类别中的“页面”按钮，打开“jQuery Mobile文件”对话框。

8、在该对话框中选中“远程”和“组合”单选按钮后，单击“确定”按钮，如下图所示。步骤 0311 项目十一 创建移动设备网页三、网页的本质打开“页面”对话框，输入“页面”组件的属性（此处保持默认设置），单击“确定”按钮，创建jQuery Mobile页面结构，如下图所示。步骤 0412 项目十一 创建移动设备网页三、jQuery Mobile页面结构在代码界面中打开前面创建的jQuery Mobile页面，可以看到其基本结构，如下图所示。一般的jQuery Mobile Web应用程序都要遵循这个基本结构。要使用jQuery Mobile，首先需要在开发的界面中包含以下3项内容。u CSS文件；u

9、jQuery library；u jQuery Mobile library。13 项目十一 创建移动设备网页三、网页的本质在data-role=page的div中还可以包含data-role值为header、content、footer的div元素。各元素的功能及意义如下。知识库以上基本页面模板中的内容都包含在div标签中，并为标签添加了data-role=page属性。这样jQuery Mobile就会知道哪些内容需要处理。u data-role=header：用于创建页面上方的工具栏，常用于标题和搜索按钮，至少要放置一个“返回”按钮（用于返回前一页），通过为其添加属性“data-posi

10、tion=fixed”，可以保证头部始终保持在屏幕的顶部。u data-role=content：用于定义页面的内容，比如文本、图像、表单和按钮等。u data-role=footer：用于创建页面底部的工具栏，以添加一些功能按钮，通过为其添加属性“data-position=fixed”，可以保证其始终保持在屏幕的底部。这些元素都是可选的，但至少要包含一个data-role值为content的div。14 项目十一 创建移动设备网页四、使用jQuery Mobile组件jQuery Mobile提供了多种组件，包括列表、布局、表单等，通过Dreamweaver“插入”面板“jQuery Mo

11、bile”类别中的各项可以插入这些组件。本节简单介绍几个常用组件。在Dreamweaver中单击“插入”面板“jQuery Mobile”类别下的“列表视图”按钮，可以在页面中插入jQuery Mobile列表。1使用列表视图15 项目十一 创建移动设备网页三、网页的本质参照前面第二节的方法创建jQuery Mobile页面后，将插入点置于页面中“第2页”下方data-role=“content”的div中，并将其中的文字“内容”删除，如下图所示。步骤 0116 项目十一 创建移动设备网页三、网页的本质单击“插入”面板“jQuery Mobile”类别下的“列表视图”按钮，打开“列表视图”对话

12、框，如左图所示。步骤 02单击“确定”按钮，即在页面中插入设置的列表视图，如右图所示。步骤 0317 项目十一 创建移动设备网页三、网页的本质单击“文档工具栏”中的“实时视图”按钮，可看到页面中的列表视图效果如下图所示，保存文档为11-1.html。步骤 0418 项目十一 创建移动设备网页三、网页的本质有序列表ol可以创建数字排序的列表，用于表现顺序序列，例如在设置搜索结果或电影排行榜时非常有用。当增强效果应用在列表时，jQuery Mobile优先使用CSS方式为列表添加编号，当浏览器不支持该方式时，框架会采用JavaScript将编号写入列表中。将上述页面中的代码“ul”改成“ol”，然

13、后单击“文档工具栏”中的“实时视图”按钮，得到有序列表的代码及效果如下图所示。19 项目十一 创建移动设备网页三、网页的本质jQuery Mobile内嵌列表与普通列表的区别，仅仅在于多了一个data-inset=“true”属性，其代码及效果如下图所示。20 项目十一 创建移动设备网页三、网页的本质有些情况下，每个列表项会有多个操作，此时可以通过拆分按钮来提供两个独立的可点击的部分：列表项本身和列表项右侧的小箭头。要创建这种拆分按钮，在中插入第二个链接即可，框架会创建一个垂直分割线，并把链接样式转化为一个只有小箭头的按钮，jQuery Mobile拆分的按钮列表源代码及效果如下图所示。21

14、项目十一 创建移动设备网页三、网页的本质jQuery Mobile支持通过HTML语义化的标签来显示列表项中所需常见的文本格式，如标题/描述、二级信息、计数等。jQuery Mobile文本说明源代码及效果如右图所示。22 项目十一 创建移动设备网页三、网页的本质2使用布局网格由于移动设备的屏幕通常都较小，一般不推荐在布局中使用多栏布局方法。当需要将一些小的元素并排放置时（比如按钮或导航标签），可以使用布局网格。jQuery Mobile框架提供了一种简单的方法构建基于CSS的分栏布局ui-grid。jQuery Mobile提供了两种预设的配置布局：两列布局（class含有ui-grid-a

15、）和三列布局（class含有ui-grid-b）。这两种布局几乎可以满足任何需要列布局的情况。网格是100%宽，不可见（没有背景或边框），也没有padding和margin，所以它们不会影响内部元素的样式。23 项目十一 创建移动设备网页三、网页的本质单击“插入”面板“jQuery Mobile”类别下的“布局网格”按钮，打开“布局网格”对话框，设置网格参数后，单击“确定”按钮，在网页中插入布局网格，如下图所示。步骤 02创建jQuery Mobile页面后，将插入点置于页面中data-role=“content”的div中，并将其中的文字“内容”删除。步骤 0124 项目十一 创建移动设备网

16、页在“文档工具栏”中单击“实时视图”按钮，页面中的布局网格效果如左图所示，将网页保存为“11-6.html”。步骤 03如要插入三列布局的网格，只需要在“布局网格”对话框“列”下拉列表中选择“3”即可，如右图所示。三列布局的网格源代码如下：区块 1,1 区块 1,2 区块 1,325 项目十一 创建移动设备网页三、网页的本质3使用可折叠区块要在网页中创建一个可折叠区块，首先需要创建一个容器，然后为容器添加data-role=collapsible属性。jQuery Mobile会将容器内的（h1h6）子节点表现为可点击的按钮，并在左侧添加一个“+”按钮，表示其可以展开。在头部后面可以添加任何需

17、要折叠的html标签。框架会自动将这些标签包裹在一个容器中用于折叠或显示。创建jQuery Mobile页面后，将插入点置于页面中“第1页”下方data-role=content的div中，并将其中的文字“内容”删除。步骤 0126 项目十一 创建移动设备网页三、网页的本质单击“插入”面板“jQuery Mobile”类别下的“可折叠区块”按钮，即可在网页中插入可折叠区块，如左图所示。步骤 02在“文档工具栏”中单击“实时视图”按钮，页面中的可折叠区块效果如右图所示，将网页保存为“11-7.html”。步骤 0327 项目十一 创建移动设备网页4使用文本输入框文本输入框和文本输入域使用标准的H

18、TML标记，jQuery Mobile使它们在移动设备中变得更加吸引人并且易于触摸和使用。创建jQuery Mobile页面后，将插入点置于页面中data-role=“content”的div中，并将其中的文字“内容”删除。步骤 0128 项目十一 创建移动设备网页三、网页的本质单击“插入”面板“jQuery Mobile”类别下的“文本”按钮，即可在网页中插入文本输入框，如左图所示。步骤 02在“文档工具栏”中单击“实时视图”按钮，页面中的文本输入框效果如右图所示。步骤 0329 项目十一 创建移动设备网页5使用密码输入框单击“插入”面板“jQuery Mobile”类别下的“密码”按钮，即

19、可在网页中插入密码输入框，如左图所示。在“文档工具栏”中单击“实时视图”按钮，页面中的密码输入框效果如右图所示。30 项目十一 创建移动设备网页6使用文本区域文本区域（textarea）一般用于多行输入。jQuery Mobile框架会自动加大文本域的高度，以防止出现滚动条，因为其在移动设备中很难使用。单击“插入”面板“jQuery Mobile”类别下的“文本区域”按钮，即可在网页中插入文本区域输入框，如左图所示。在“文档工具栏”中单击“实时视图”按钮，页面中的文本区域输入框效果如右图所示。31 项目十一 创建移动设备网页7使用选择框单击“插入”面板“jQuery Mobile”类别下的“选

20、择”按钮，即可在网页中插入选择框，如左图所示。在“文档工具栏”中单击“实时视图”按钮，页面中的选择框效果如右图所示。32 项目十一 创建移动设备网页8使用复选框单击“插入”面板“jQuery Mobile”类别下的“复选框”按钮，可打开“复选框”对话框，保持默认设置，单击“确定”按钮可在网页中插入复选框，如下图所示。在“文档工具栏”中单击“实时视图”按钮，页面中的复选框效果如左图所示。33 项目十一 创建移动设备网页9使用单选按钮单击“插入”面板“jQuery Mobile”类别下的“单选按钮”按钮，可打开“单选按钮”对话框，保持默认设置，单击“确定”按钮可在网页中插入单选按钮，如下图所示。在

21、“文档工具栏”中单击“实时视图”按钮，页面中的单选按钮效果如左图所示。34 项目十一 创建移动设备网页10使用按钮按钮是由标准的HTML的a标签构成。jQuery Mobile使它们变得更吸引人并且更易于触摸使用。单击“插入”面板“jQuery Mobile”类别下的“按钮”按钮，可打开“按钮”对话框，保持默认设置，单击“确定”按钮可在网页中插入按钮，如下图所示。提示在page元素的主要block内，可以通过给任意链接添加data-role=button属性来将其样式化为按钮。35 项目十一 创建移动设备网页11更多文本输入类型除上面介绍的常见输入类型外，jQuery Mobile还提供了电子

22、邮件（email）、Url、数字（number）、时间、日期、周等更多类型。电子邮件用于输入包含符号的电子邮件地址，Url用于输入链接地址，搜索用于输入搜索内容，提供一个带有搜索图标的文本框。这些输入类型的用法与前面介绍的几种类型大同小异，此处不再详细介绍。36 项目十一 创建移动设备网页五、使用jQuery Mobile主题jQuery Mobile提供了5种不同的样式主题，用a，b，c，d，e进行引用。从“a”到“e”，每种主题带有不同颜色的按钮、栏、内容块，等等。为了使颜色主题能够保持一直地映射到组件中，需要遵从的规约是：a主题是视觉上最高级别的主题（黑色）；b主题为次级主题（蓝色）；c

23、主题为基准主题，在很多情况下默认使用该主题；d主题为备用的次级内容主题；e主题为强调用主题。下表对各主题进行了简单描述。值值描描 述述a默认。黑色背景上的白色文本。b蓝色背景上的白色文本/灰色背景上的黑色文本c亮灰色背景上的黑色文本d白色背景上的黑色文本e橙色背景上的黑色文本37 项目十一 创建移动设备网页使用Dreamweaver CC新增的“jQuery Mobile色板”面板，（见下图）可以在jQuery Mobile CSS文件中预览所有主题，然后使用该面板来应用色板，或从jQuery Mobile Web页的各种元素中删除它们。默认情况下，jQuery Mobile给所有的头部栏和尾

24、部栏分配的是a主题，因为它们在应用中视觉优先级最高。如果要给其设置一个不同的主题，只需要给头部栏和尾部栏容器增加data-theme属性，然后设定其值为要设置的主题样式字母即可。默认情况下，jQuery Mobile给content分配主题c，使其在视觉上与头部栏区分开来。38 项目十一 创建移动设备网页案例实施案例实施一、网页、网站和主页在学习了jQuery Mobile的相关知识后，下面通过构建“不一样的北京”移动设备网页，来进一步巩固其在实际操作中的应用。网页效果如图所示。39 项目十一 创建移动设备网页案例实施案例实施一、网页、网站和主页启动Dreamweaver CC，将本书附赠的“

25、素材与实例/ch11”目录下的“beijing”文件夹拷贝至本地磁盘，并在Dreamweaver中新建站点“bj”。步骤 01一、新建文档在站点根目录下新建文档“index_1x.html”，并在文档编辑窗口中打开。步骤 0240 项目十一 创建移动设备网页案例实施案例实施一、网页、网站和主页二、制作主界面主界面主要包括一个列表视图，列表中的各项链接至不同的子页面，效果如图11-34所示。41 项目十一 创建移动设备网页案例实施案例实施将插入点置于文档编辑窗口中，单击“插入”面板“jQuery Mobile”类别中的“页面”按钮，在弹出的“jQuery Mobile文件”对话框中单击“确定”按

26、钮，在接下来弹出的“页面”对话框中单击“确定”按钮，创建jQuery Mobile页面，如下图所示。一、网页、网站和主页步骤 0142 项目十一 创建移动设备网页案例实施案例实施首先将上方header部分的文字“标题”删除，然后重新输入文字“不一样的北京”，如左图所示。一、网页、网站和主页步骤 02将content部分的文字“内容”删除，然后单击“插入”面板“jQuery Mobile”类别中的“列表视图”按钮，在弹出的“列表视图”对话框中单击“确定”按钮，插入“列表视图”，如右图所示。步骤 0343 项目十一 创建移动设备网页案例实施案例实施将“列表视图”中的文字“页面”依次修改为“天安丽日

27、”“紫禁余晖”和“燕塞雄关”，如左图所示。一、网页、网站和主页步骤 04将footer部分的文字“脚注”删除，重新输入文字“Copyright 2017 ”,如右图所示。步骤 0544 项目十一 创建移动设备网页案例实施案例实施一、网页、网站和主页三、制作子页面此处的子页面包括3部分，制作好的效果图如右图所示。45 项目十一 创建移动设备网页案例实施案例实施将插入点置于前面插入的作为主界面的id为“page”的Div下面，单击“插入”面板“jQuery Mobile”类别中的“页面”按钮，在弹出的“页面”对话框中单击“确定”按钮，创建jQuery Mobile页面，如下图所示。一、网页、网站和

28、主页步骤 0146 项目十一 创建移动设备网页案例实施案例实施一、网页、网站和主页将上方header部分的文字“标题”删除，然后重新输入文字“天安丽日”，如左图所示。步骤 02将插入点置于content部分“内容”文字后面，将文字删除，然后插入图像“talr.jpg”（位于网站根文件夹“images”文件夹中），如右图所示。步骤 0347 项目十一 创建移动设备网页案例实施案例实施打开网站根文件夹下的文本文档“text1.txt”，按【Ctrl+A】组合键选择所有文本，再按【Ctrl+C】组合键复制所选文本，切换到网页文档“index.html”，将插入点置于图像后面并按回车键，接着按【Ctr

29、l+V】组合键粘贴文本，如右图所示。一、网页、网站和主页步骤 0448 项目十一 创建移动设备网页案例实施案例实施将插入点置于文字后面，单击“插入”面板“jQuery Mobile”类别中的“布局网格”按钮，打开“布局网格”对话框，单击“确定”按钮插入两列布局的网格，如右图所示。一、网页、网站和主页步骤 0549 项目十一 创建移动设备网页案例实施案例实施将插入点置于“区块1,1”，将其中的文字删除，单击“插入”面板“jQuery Mobile”类别中的“按钮”，打开“按钮”对话框，单击“确定”按钮插入按钮，如右图所示。一、网页、网站和主页步骤 0650 项目十一 创建移动设备网页案例实施案例实施一、网页、网站和主页在代码视图中修改“href”属性值为“#page”，文字“按钮”为“返回主界面”，如右图所示。步骤 0751 项目十一 创建移动设备网页案例实施案例实施将插入点置于“区块1,2”，将其中的文字删除，参照步骤6的方法插入按钮，并修改其按钮属性和文字，如右图所示。一、网页、网站和主页步骤 0852 项目十一 创建移动设备网页案例实施案例实施一、网页、网站和主页将footer部分的文字“脚注”删除，重新输入文字“Copyright 2016 ”，如右图所示。步骤 09参照前面的操作，制作其他2个子页面。最后记得保存文档。步骤 10