网页设计与制作课件第11章
合集下载
80《动态网页设计与制作实用教程(第二版)》第11章PPT课件
本章学习导读 编辑。本章主要讲述在 Dreamweaver 8 过本章学习，读者应该掌握以下内容：
1
第11章 设计页面布局
11.1 使用表格对页面进行布局 表格是用在HTML页上显示表格式数据以及对文本和图
形进行布局的强有力的工具。表格由一行或多行组成，每行 又由一个或多个单元格组成。在创建表格之后，可以方便地 修改其外观和结构。
6
第11章 设计页面布局
5．添加和删除行和列 添加、删除行和列应首先确定操作的位置，即选定当前的行或列。 （1）添加及删除行和列，可以使用“修改/表格”子菜单中的命令。 （2）若要一次添加多行或多列，或者在当前单元格的下面添加行或在其 右边添加列，请选择“修改/表格/插入行或列”菜单，此时会出现“插入
表格一样对嵌套表格进行格式设置，但是，其宽度受它所在单元格宽度的 限制。 8．剪切、拷贝和粘贴单元格
可以一次剪切、拷贝或粘贴单个单元格或多个单元格，并保留单元 格的格式设置。
8
第11章 设计页面布局
11.1.3 对表格进行排序 可以根据单个列的内容对表格中的行进行排序，还可以
根据两个列的内容执行更加复杂的表格排序。但不能对包含 COLSPAN或ROWSPAN属性的表格（即包含合并单元格的 表格）进行排序。
行或 列”对话框。在该对话框中输入必要的信息，然后单击“确定”按钮。 （3）清除完整的行或列时，可以直接按Delete键，整个行或列将从表格 中删除。
6．拆分或合并单元格 拆分或合并单元格可使用“修改/表格”子菜单中的命令。
7
第11章 设计页面布局
7．嵌套表格 嵌套表格是放置在另一个表格的单元格中的表格，可以像对其他任何
“布局模式”按钮。在“设计”视图的顶部显示一个标有“布局模式”的 绿色
1
第11章 设计页面布局
11.1 使用表格对页面进行布局 表格是用在HTML页上显示表格式数据以及对文本和图
形进行布局的强有力的工具。表格由一行或多行组成，每行 又由一个或多个单元格组成。在创建表格之后，可以方便地 修改其外观和结构。
6
第11章 设计页面布局
5．添加和删除行和列 添加、删除行和列应首先确定操作的位置，即选定当前的行或列。 （1）添加及删除行和列，可以使用“修改/表格”子菜单中的命令。 （2）若要一次添加多行或多列，或者在当前单元格的下面添加行或在其 右边添加列，请选择“修改/表格/插入行或列”菜单，此时会出现“插入
表格一样对嵌套表格进行格式设置，但是，其宽度受它所在单元格宽度的 限制。 8．剪切、拷贝和粘贴单元格
可以一次剪切、拷贝或粘贴单个单元格或多个单元格，并保留单元 格的格式设置。
8
第11章 设计页面布局
11.1.3 对表格进行排序 可以根据单个列的内容对表格中的行进行排序，还可以
根据两个列的内容执行更加复杂的表格排序。但不能对包含 COLSPAN或ROWSPAN属性的表格（即包含合并单元格的 表格）进行排序。
行或 列”对话框。在该对话框中输入必要的信息，然后单击“确定”按钮。 （3）清除完整的行或列时，可以直接按Delete键，整个行或列将从表格 中删除。
6．拆分或合并单元格 拆分或合并单元格可使用“修改/表格”子菜单中的命令。
7
第11章 设计页面布局
7．嵌套表格 嵌套表格是放置在另一个表格的单元格中的表格，可以像对其他任何
“布局模式”按钮。在“设计”视图的顶部显示一个标有“布局模式”的 绿色
网页设计与制作使用教程第11章
注：插入单选钮的HTML代码为＜INPUT type="radio" name="..." value="..."＞ 选中该单选钮，在属性面板中进行相应的属性设置
单选按钮：该名称是存储该域的值（选定值）的变量 名，必须在该表单内唯一。要保证数据的准确采集， 单选钮都是以组为单位使用的，在同一组中的单选钮 必须用同一个名称。 选定值：定义该单选钮的值。当选中该单选钮时，此 “选定值”就随表单一起提交，作为该单选钮的当前 值。 初始状态：在浏览器中首次载入该表单时该单选钮的 状态。如果选择“已勾选”，则该单选钮一加载就是 选中状态
注：多个复选框可以共用一个名称，一个复选框名称变量也可以 拥有多个值（多个值在提交时用逗号隔开）。多个复选框可以共用一 个名称时，被选中的多个复选框的值将作为该复选框名称变量的当前 值提交到服务器
（4）单选钮 单选钮允许用户在待选项中选择唯一的答案。 在新建的表单内点击鼠标，确定插入位置，然后点击插入 面板上的按钮 ，插入一单选钮
注意：1. 如果要处理表单数据，我们需要在服务器端（
即放置网页的远程计算机上）编写程序（如ASP程序）， 这部分内容已经超出了本书的范围，有兴趣的同学可以 参考其他的动态网页编程的书籍，后面我们只是对多种 动态网页技术做个简单的介绍。
2．具体使用哪种数据发送方式取决于服务器类型，可以 询问管理员来决定。如果方式任意，默认是Get方法，大 部分HTML设计者偏好使用Post方法。
，所输入的文本被替换为星号或项目符号，以隐藏该文 本，保护这些信息不被看到。
当文本框的类型设置为“多行”时，属性面板发生变 化，即文本框从“文本字段”变为“文本区域” 其属性设置和“单行”类型相似，只是更新了2个属性
《网页设计与制作》PPT课件
图片边框宽度为0 (无边框)
一种简单滚动图片制作方法2：
将下面代码放在<body>和</body>之间就可以了
<p> <marquee width="415" height="152"> 有超链接的滚动图片 超链接地址和名称 <a href="求职意向.htm"> <img border="0" src="鸽.gif" > </a> <a href="成绩单.htm="旗.gif" > </a> <a href="能力展示.htm"> <img border="0" src="猪.gif" > </a> </marquee> </p>
4、你们怎么学？ 5、如何获得学分又获得知识？
教学网站：/qjbok
基本概念： 1、什么是网页？ 2、网页有哪些构成要素？ 3、常用网页设计工具有哪些？ 4、网站怎么做？
教学、教室安排：
周二班：时间：晚上5、6节（14:00~16:10） 理论课：单周（瑞樟4-101） 实验课：双周（瑞樟6-306） 周四班：时间：晚上9、10节（7:00~8:40） 理论课：单周（瑞樟4-101） 实验课：双周（瑞樟6-306） • 要求：严格按照老师安排的实验内容上实验， 不允许玩游戏等，一旦发现取消上机资格，实 验成绩为零分； • 请假：要有辅导员签字的假条送给本课程老师。
五、制作滚动字幕
一种简单滚动图片制作方法2：
将下面代码放在<body>和</body>之间就可以了
<p> <marquee width="415" height="152"> 有超链接的滚动图片 超链接地址和名称 <a href="求职意向.htm"> <img border="0" src="鸽.gif" > </a> <a href="成绩单.htm="旗.gif" > </a> <a href="能力展示.htm"> <img border="0" src="猪.gif" > </a> </marquee> </p>
4、你们怎么学？ 5、如何获得学分又获得知识？
教学网站：/qjbok
基本概念： 1、什么是网页？ 2、网页有哪些构成要素？ 3、常用网页设计工具有哪些？ 4、网站怎么做？
教学、教室安排：
周二班：时间：晚上5、6节（14:00~16:10） 理论课：单周（瑞樟4-101） 实验课：双周（瑞樟6-306） 周四班：时间：晚上9、10节（7:00~8:40） 理论课：单周（瑞樟4-101） 实验课：双周（瑞樟6-306） • 要求：严格按照老师安排的实验内容上实验， 不允许玩游戏等，一旦发现取消上机资格，实 验成绩为零分； • 请假：要有辅导员签字的假条送给本课程老师。
五、制作滚动字幕
网页设计与制作课件第11章
步骤3：选择“FTP”选项后，对话框中的内容发生变化，显示关于FTP方式 的参数信息，在“远程信息”分类中设置连接FTP服务器所需的相关信息 。
步骤4：单击“测试”按钮，测试连接是否成功，如果弹出提示框，说明连 接成功了 。
步骤5：在“分类”列表框中选择“测试服务器”选项，在“访问”下拉列 表中选择“FTP”方式，已添加的设置便出现在对话框中 。
机连接时，最好采用此种方式。 • FTP主机：提供FTP传输服务的远程主机的IP地址或者域名，如
“218.25.26.27”或者“”。 • 使用防火墙：指从防火墙后面与外部服务器连接时所使用的代理服务器
的地址。如果不在防火墙后，则此项不勾选。 • 用安全FTP（SETP）：对于只开放SSH的FTP主机来说，只能通过勾选
下一页 返回
知识点评
（1）如何申请域名? 域名是Internet 上的名字，是具有商标标志性的无形资产的象征域名，对于 商业企业来讲显得格外重要。域名分国内域名和国际域名两种。 国际域名和国内域名的办理办法不一样，可以买卖域名。国际域名的主要申 请网址是：。国际域名数量很大，分布在全球 各地，所以给每位域名拥有者发证书是不可能的，一般是通过电子信箱即域名管 理联系人的信箱来控制申请域名。 因为申请国际域名的网站是英文网站，交费时需要在线用信用卡交美元，所 以大量国际域名都由国内的代理商代办，只需交相应的人民币即可。 （2）如何选择域名? 按照习惯，一般使用单位名称或商标作为域名。域名的字母组成要便于记忆， 能够给人留下较深刻的印象。如果有多个很有价值的商标，最好都进行注册保护。 也可以选择产品或行业类型作为域名。
知识点评
（1）在“站点定义为”的“高级”选项卡的“访问”下拉列表中5个选项 的含义。 • FTP：通过远程网络传递文件的方式。
步骤4：单击“测试”按钮，测试连接是否成功，如果弹出提示框，说明连 接成功了 。
步骤5：在“分类”列表框中选择“测试服务器”选项，在“访问”下拉列 表中选择“FTP”方式，已添加的设置便出现在对话框中 。
机连接时，最好采用此种方式。 • FTP主机：提供FTP传输服务的远程主机的IP地址或者域名，如
“218.25.26.27”或者“”。 • 使用防火墙：指从防火墙后面与外部服务器连接时所使用的代理服务器
的地址。如果不在防火墙后，则此项不勾选。 • 用安全FTP（SETP）：对于只开放SSH的FTP主机来说，只能通过勾选
下一页 返回
知识点评
（1）如何申请域名? 域名是Internet 上的名字，是具有商标标志性的无形资产的象征域名，对于 商业企业来讲显得格外重要。域名分国内域名和国际域名两种。 国际域名和国内域名的办理办法不一样，可以买卖域名。国际域名的主要申 请网址是：。国际域名数量很大，分布在全球 各地，所以给每位域名拥有者发证书是不可能的，一般是通过电子信箱即域名管 理联系人的信箱来控制申请域名。 因为申请国际域名的网站是英文网站，交费时需要在线用信用卡交美元，所 以大量国际域名都由国内的代理商代办，只需交相应的人民币即可。 （2）如何选择域名? 按照习惯，一般使用单位名称或商标作为域名。域名的字母组成要便于记忆， 能够给人留下较深刻的印象。如果有多个很有价值的商标，最好都进行注册保护。 也可以选择产品或行业类型作为域名。
知识点评
（1）在“站点定义为”的“高级”选项卡的“访问”下拉列表中5个选项 的含义。 • FTP：通过远程网络传递文件的方式。
21单元1101第11章HTML语言
(五)知识讲解与操作示范(2) 知ห้องสมุดไป่ตู้讲解与操作示范(
HTML语言的语法结构 11.1.2 HTML语言的语法结构
1.HTML基本结构 . 基本结构
一个最基本网页的HTML代码格式如下: 代码格式如下: 一个最基本网页的 代码格式如下 <html> <head> <title>网页标题 网页标题</title> 网页标题 </head> <body> 网页主体内容 </body> </html>
.
(五)知识讲解与操作示范(10) 知识讲解与操作示范(10)
8的代码编辑工具 11.2.3 Dreamweaver 8的代码编辑工具
1.代码视图 . 代码视图会以不同的颜色显示HTML源代码,以帮助 源代码, 代码视图会以不同的颜色显示 源代码 用户区分各种标签, 用户区分各种标签,同时用户也可以自己指定标签或代码 的显示颜色. 的显示颜色. 利用"编码"工具栏可以实现以下操作: 利用"编码"工具栏可以实现以下操作: (1)代码的折叠 ) 对于代码非常长的网页,可以对部分代码折叠起来. 对于代码非常长的网页,可以对部分代码折叠起来. 先选择多行代码, 先选择多行代码,然后单击所选代码左侧的折叠按钮 或者单击"编码"工具栏中的【折叠所选】 或者单击"编码"工具栏中的【折叠所选】按钮 即可.如果按住" 键的同时,单击【折叠所选】按钮, 即可.如果按住"Alt"键的同时,单击【折叠所选】按钮, 则折叠没有选中的代码.
(五)知识讲解与操作示范(7) 知识讲解与操作示范(
8的HTML源代码编辑功能 11.2 Dreamweaver 8的HTML源代码编辑功能
网页设计与制作 PPT11
11.2.7 课堂案例——恒洲电子商务网页
使用设置状态栏文本命令设置在加载网页文档时在状态栏中 显示的文字。
效果图
课堂练习——游戏网页
使用AP Div按钮绘制层。使用拖动AP元素命令制作组合西瓜人效果。
效果图
课后习题——蟹来居饭店首
使用设置状态栏文本命令制作在浏览器窗口左下角的状态栏中显示消息。
11.2.3 设置容器的文本
使用“设置层文本”动作的具体操作步骤如下。 （1）选择“插入”面板“布局”选项卡中的“绘制AP Div”按 钮 ，在“设计”视图中拖曳出一个图层。在“属性”面板的“层 编号”选项中输入层的唯一名称。 （2）在文档窗口中选择一个对象，如文字、图像、按钮等，并 启用“行为”控制面板。 （3）在“行为”控制面板中单击“添加行为”按钮 ，并在弹 出的菜单中选择“设置文本 > 设置容器的文本”动作，弹出“设置 层文本”对话框。 （4）如果不是默认事件，则单击该事件，会出现箭头按钮 ， 单击按钮 ，弹出包含全部事件的事件列表，用户可根据需要选择 相应的事件。 （5）按F12键浏览网页。
1．将行为附加到网页元素上 2．将行为附加到文本上
11.2 动作
打开浏览器窗口 拖动层 设置容器的文本 设置状态栏文本 设置文本域文字 设置框架文本 课堂案例——恒洲电子商务网页
11.2.1 打开浏览器窗口
使用“打开浏览器窗口”动作在一个新的窗口中打开指 定的URL，还可以指定新窗口的属性、特征和名称。
11.2.2 拖动层
使用“拖动层”动作的具体操作步骤如下。 （1）通过单击文档窗口底部标签选择器中的 <body> 标签选择 body对象，并启用“行为”控制面板。 （2）在“行为”控制面板中单击“添加行为”按钮 ，并在弹 出的菜单中选择“拖动AP元素”动作，弹出“拖动AP元素”对话框。 （3）如果不是默认事件，则单击该事件，会出现箭头按钮 ， 单击按钮 ，弹出包含全部事件的事件列表，用户可根据需要选择 相应的事件。 （4）按F12键浏览网页。
网页设计与制作——Dreamweaver CS5标准教程第11章 CSS样式
ห้องสมุดไป่ตู้
11.1 CSS样式
11.1.2 CSS样式构造规则
CSS样式是由三个要素对象、属性和属性值构成的。 对象是CSS样式所作用和控制的网页元素，属性是 CSS样式描述和设置对象性质的项目，属性值是属性 的一个实例。
Body { font-family：宋体； font-size：15px； color：red； text-decoration：underline； } 页面文字 { 字体：宋体； 大小：15像素； 颜色：红色； 装饰：下划线 }
11.1 CSS样式
11.1.3 CSS样式种类
根据CSS样式所控制的网页元素不同，可以将样式分 为4种形式。 当所控制的网页元素是HTML语言中的某一个特定的 标签时，为此标签设置的CSS样式，称为标签样式。 当把网页中或网站中若干元素归为一类，作为一个整 体来看待，为此类元素设置一个CSS样式，称为类样 式。
111css样式?一个标签或元素在网站中的不同网页中或在一个网页中的不同位置上外观效果不同则需要先为该特定标签赋予一个唯一的id号然后再为具有该id号的标签设置样式称此样式为id样式
第11章 CSS样式
网页设计与制作 Dreamweaver CS5 标准教程
本章学习的主要内容：
1. CSS样式构造规则及意义 2. 利用CSS样式面板创建各种样式 3. 利用CSS样式面板创建文本导航条 4. 利用CSS样式面板创建CSS滤镜
11.2 CSS样式控制面板
11.2.3 CSS样式的存储位置
1. 定义内部样式 2. 移动CSS规则 3. 定义外部样式 4. 附加样式表
11.2.4编辑样式
11.3 CSS属性
11.1 CSS样式
11.1.2 CSS样式构造规则
CSS样式是由三个要素对象、属性和属性值构成的。 对象是CSS样式所作用和控制的网页元素，属性是 CSS样式描述和设置对象性质的项目，属性值是属性 的一个实例。
Body { font-family：宋体； font-size：15px； color：red； text-decoration：underline； } 页面文字 { 字体：宋体； 大小：15像素； 颜色：红色； 装饰：下划线 }
11.1 CSS样式
11.1.3 CSS样式种类
根据CSS样式所控制的网页元素不同，可以将样式分 为4种形式。 当所控制的网页元素是HTML语言中的某一个特定的 标签时，为此标签设置的CSS样式，称为标签样式。 当把网页中或网站中若干元素归为一类，作为一个整 体来看待，为此类元素设置一个CSS样式，称为类样 式。
111css样式?一个标签或元素在网站中的不同网页中或在一个网页中的不同位置上外观效果不同则需要先为该特定标签赋予一个唯一的id号然后再为具有该id号的标签设置样式称此样式为id样式
第11章 CSS样式
网页设计与制作 Dreamweaver CS5 标准教程
本章学习的主要内容：
1. CSS样式构造规则及意义 2. 利用CSS样式面板创建各种样式 3. 利用CSS样式面板创建文本导航条 4. 利用CSS样式面板创建CSS滤镜
11.2 CSS样式控制面板
11.2.3 CSS样式的存储位置
1. 定义内部样式 2. 移动CSS规则 3. 定义外部样式 4. 附加样式表
11.2.4编辑样式
11.3 CSS属性
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
项目十一 创建பைடு நூலகம்动设备网页
3
相关知识
一、初识jQuery Mobile
jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。 jQuery是继prototype之后又一个优秀的Javascript库。jQuery兼容CSS 3和各种浏览器，其核心理念是 “write less，do more”（写得更少，做得更多）。 jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、 选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此之外，jQuery提供API让开发者 编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。 jQuery Mobile是jQuery在手机和平板设备上的版本。它不仅能给主流移动平台带来jQuery核心库，而且能 发布一个完整统一的jQuery移动UI框架，支持全球主流的移动平台。
项目十一 创建移动设备网页
4
三、网页的本质 1．jQuery Mobile的基本特性
一般简单性：该框架简单易用。页面开发主要使用标记，无需或仅需很少JavaScript。 优雅降级：尽管jQuery Mobile利用最新的HTML 5、CSS 3和JavaScript，但并不是所有移动设备都 提供这样的支持。jQuery Mobile的哲学是同时支持高端和低端设备（比如那些没有JavaScript支持的设
步骤 01
启动Dreamweaver CC，选择 “文件”>“新建”菜单，打 开“新建文档”对话框，在 对话框左侧列表中选择“新 建文档”，在“文档类型” 列表中选择“HTML”，右侧
保持默认，如图所示。
项目十一 创建移动设备网页
8
三、网页的本质 步骤 02 在“新建文档”对话框中单击“创建”按钮，即创建一个空白HTML 5文档，如下图
所示。
项目十一 创建移动设备网页
9
三、网页的本质 步骤 03 将插入点置于空白文档编辑窗口中，单击“插入”面板“jQuery Mobile”类别中的
“页面”按钮，打开“jQuery Mobile文件”对话框。在该对话框中选中“远程”和
“组合”单选按钮后，单击“确定”按钮，如下图所示。
项目十一 创建移动设备网页
jQuery Mobile Web应用程序都要遵循这个基本结构。
要使用jQuery Mobile，
首先需要在开发的界面
中包含以下3项内容。
CSS文件； jQuery library；
jQuery Mobile library。
项目十一 创建移动设备网页
12
知识库
三、网页的本质
以上基本页面模板中的内容都包含在div标签中，并为标签添加了data-role="page" 属性。这样jQuery Mobile就会知道哪些内容需要处理。
项目十一 创建移动设备网页
7
二、创建jQuery Mobile页面
Dreamweaver集成了jQuery Mobile，有助于快速创建适合大部分移动设备的网页程序，并可 以使网页自身适应各类尺寸的设备。“jQuery Mobile页面”组件充当所有其他jQuery Mobile 组件的容器。在新的使用HTML 5的页面中添加“jQuery Mobile页面”组件，可以创建出 jQuery Mobile的页面结构。
备），尽量提供最好的体验。
易于使用：jQuery Mobile在设计时考虑了访问能力，它拥有Accessible Rich Internet Applications （WAI-ARIA）支持，以帮助使用辅助技术的残障人士访问Web页面。 小规模：jQuery Mobile框架的整体大小比较小，JavaScript库12KB，CSS 6KB，还包括一些图标。 主题设置：此框架还提供一个主题系统，允许用户提供自己的应用程序样式。
项目十一 创建移动设备网页
6
三、网页的本质 3．jQuery Mobile支持的移动平台
jQuery Mobile目前支持以下移动平台：
Apple iOS：iPhone、iPod Touch、iPad（所有版本） Android：所有设备（所有版本） Blackberry Torch（版本6） Palm WebOS Pre系列、Pixi系列、Veer、TouchPad Nokia N900（进程中） Windows Phone 8/8.1/10预览版
10
步骤 04
三、网页的本质
打开“页面”对话框，输入“页面”组件的属性（此处保持默认设置），单击“确 定”按钮，创建jQuery Mobile页面结构，如下图所示。
项目十一 创建移动设备网页
11
三、jQuery Mobile页面结构
在代码界面中打开前面创建的jQuery Mobile页面，可以看到其基本结构，如下图所示。一般的
目录页
CONTENTS PAGE
项目十一 创建移动设备网页
案例
案例说明
企业和个人用于开发和发布移动应用程序所使用的技 术在不断地变化，最初，开发和发布移动应用程序的
策略是针对每一个主流平台开发独立的本地APP；然
而，维护多个平台所需的费用是非常大的，并且移动 团队也会丧失其敏捷性。使用jQuery Mobile，只需 一次编码，就可以将APP部署到所有设备上。本案例 首先介绍jQuery Mobile的基础知识，然后应用其创 建一个移动设备网页“不一样的北京”。
项目十一 创建移动设备网页
5
三、网页的本质 2．jQuery Mobile的浏览器支持
jQuery Mobile 同时支持高端和低端设备，比如那些没有JavaScript支持的设备。持续增强 （Progressive Enhancement）包含以下核心原则：
所有浏览器都应该能够访问全部基础内容。 所有浏览器都应该能够访问全部基础功能。 增强的布局由外部链接的CSS提供。 增强的行为由外部链接的JavaScript提供。 终端用户浏览器偏好应受到尊重。 所有基本内容应该（按照设计）在基础设备上进行渲染，而更高级的平台和浏览器将使用额外的、外 部链接的JavaScript和CSS持续增强。
3
相关知识
一、初识jQuery Mobile
jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。 jQuery是继prototype之后又一个优秀的Javascript库。jQuery兼容CSS 3和各种浏览器，其核心理念是 “write less，do more”（写得更少，做得更多）。 jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、 选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此之外，jQuery提供API让开发者 编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。 jQuery Mobile是jQuery在手机和平板设备上的版本。它不仅能给主流移动平台带来jQuery核心库，而且能 发布一个完整统一的jQuery移动UI框架，支持全球主流的移动平台。
项目十一 创建移动设备网页
4
三、网页的本质 1．jQuery Mobile的基本特性
一般简单性：该框架简单易用。页面开发主要使用标记，无需或仅需很少JavaScript。 优雅降级：尽管jQuery Mobile利用最新的HTML 5、CSS 3和JavaScript，但并不是所有移动设备都 提供这样的支持。jQuery Mobile的哲学是同时支持高端和低端设备（比如那些没有JavaScript支持的设
步骤 01
启动Dreamweaver CC，选择 “文件”>“新建”菜单，打 开“新建文档”对话框，在 对话框左侧列表中选择“新 建文档”，在“文档类型” 列表中选择“HTML”，右侧
保持默认，如图所示。
项目十一 创建移动设备网页
8
三、网页的本质 步骤 02 在“新建文档”对话框中单击“创建”按钮，即创建一个空白HTML 5文档，如下图
所示。
项目十一 创建移动设备网页
9
三、网页的本质 步骤 03 将插入点置于空白文档编辑窗口中，单击“插入”面板“jQuery Mobile”类别中的
“页面”按钮，打开“jQuery Mobile文件”对话框。在该对话框中选中“远程”和
“组合”单选按钮后，单击“确定”按钮，如下图所示。
项目十一 创建移动设备网页
jQuery Mobile Web应用程序都要遵循这个基本结构。
要使用jQuery Mobile，
首先需要在开发的界面
中包含以下3项内容。
CSS文件； jQuery library；
jQuery Mobile library。
项目十一 创建移动设备网页
12
知识库
三、网页的本质
以上基本页面模板中的内容都包含在div标签中，并为标签添加了data-role="page" 属性。这样jQuery Mobile就会知道哪些内容需要处理。
项目十一 创建移动设备网页
7
二、创建jQuery Mobile页面
Dreamweaver集成了jQuery Mobile，有助于快速创建适合大部分移动设备的网页程序，并可 以使网页自身适应各类尺寸的设备。“jQuery Mobile页面”组件充当所有其他jQuery Mobile 组件的容器。在新的使用HTML 5的页面中添加“jQuery Mobile页面”组件，可以创建出 jQuery Mobile的页面结构。
备），尽量提供最好的体验。
易于使用：jQuery Mobile在设计时考虑了访问能力，它拥有Accessible Rich Internet Applications （WAI-ARIA）支持，以帮助使用辅助技术的残障人士访问Web页面。 小规模：jQuery Mobile框架的整体大小比较小，JavaScript库12KB，CSS 6KB，还包括一些图标。 主题设置：此框架还提供一个主题系统，允许用户提供自己的应用程序样式。
项目十一 创建移动设备网页
6
三、网页的本质 3．jQuery Mobile支持的移动平台
jQuery Mobile目前支持以下移动平台：
Apple iOS：iPhone、iPod Touch、iPad（所有版本） Android：所有设备（所有版本） Blackberry Torch（版本6） Palm WebOS Pre系列、Pixi系列、Veer、TouchPad Nokia N900（进程中） Windows Phone 8/8.1/10预览版
10
步骤 04
三、网页的本质
打开“页面”对话框，输入“页面”组件的属性（此处保持默认设置），单击“确 定”按钮，创建jQuery Mobile页面结构，如下图所示。
项目十一 创建移动设备网页
11
三、jQuery Mobile页面结构
在代码界面中打开前面创建的jQuery Mobile页面，可以看到其基本结构，如下图所示。一般的
目录页
CONTENTS PAGE
项目十一 创建移动设备网页
案例
案例说明
企业和个人用于开发和发布移动应用程序所使用的技 术在不断地变化，最初，开发和发布移动应用程序的
策略是针对每一个主流平台开发独立的本地APP；然
而，维护多个平台所需的费用是非常大的，并且移动 团队也会丧失其敏捷性。使用jQuery Mobile，只需 一次编码，就可以将APP部署到所有设备上。本案例 首先介绍jQuery Mobile的基础知识，然后应用其创 建一个移动设备网页“不一样的北京”。
项目十一 创建移动设备网页
5
三、网页的本质 2．jQuery Mobile的浏览器支持
jQuery Mobile 同时支持高端和低端设备，比如那些没有JavaScript支持的设备。持续增强 （Progressive Enhancement）包含以下核心原则：
所有浏览器都应该能够访问全部基础内容。 所有浏览器都应该能够访问全部基础功能。 增强的布局由外部链接的CSS提供。 增强的行为由外部链接的JavaScript提供。 终端用户浏览器偏好应受到尊重。 所有基本内容应该（按照设计）在基础设备上进行渲染，而更高级的平台和浏览器将使用额外的、外 部链接的JavaScript和CSS持续增强。