(11.6)--11.4学习jQuery在Dreamweaver中的应用-2.pdf

《(11.6)--11.4学习jQuery在Dreamweaver中的应用-2.pdf》由会员分享，可在线阅读，更多相关《(11.6)--11.4学习jQuery在Dreamweaver中的应用-2.pdf（27页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、任务四：学习jQuery在Dreamweaver中的应用第二部分【例题】Dreamweaver 与 jQuery Mobile 相集成，可帮助您快速设计适合大多数移动设备的 Web 应用程序，同时可使其自身适应设备的各种尺寸。为西京大学网络课程中心创建一个手机版登陆页面，如图所示。3使用jQueryMobile创建适用于移动设备的Web应用程序首先选择“文件”“新建”，选择“新建文档”“HTML”。因为某些 jQuery Mobile 组件使用 HTML5 特有的属性。要确保在验证期间符合 HTML5 规范，请确保选择 HTML5 作为文档类型，如图所示。使用jQueryMobile创建适用于

2、移动设备的Web应用程序3在插入菜单找到jQuery Mobile，在该菜单中有诸多jQuery Mobile 的组件（如图所示）供网页设计者使用。其中“页面”组件充当所有其它 jQuery Mobile 组件的容器。在正式开始网页设计之前，需要添加“页面”组件，然后再继续插入其它组件。使用jQueryMobile创建适用于移动设备的Web应用程序31.新建页面单击“页面”选项，在网页中插入一个jQuery Mobile的页面，这时会弹出一个对话框，如图所示，用于加载正常运行jQuery Mobile所需要的各项组件文件，主要包括CSS、JavaScript、jQuery和图像文件，可帮助您开

3、始设计应用程序。可使用 CDN 和自有服务器上承载的CSS和JavaScript文件，也可使用随Dreamweaver自带安装的文件。使用jQueryMobile创建适用于移动设备的Web应用程序3使用jQueryMobile创建适用于移动设备的Web应用程序3(1)远程(CDN)如果要连接到承载 jQuery Mobile 文件的远程 CDN 服务器。如果尚未配置包含 jQuery Mobile 文件的站点，则对于 jQuery 站点使用默认选项。也可选择使用其它 CDN 服务器。(2)本地显示 Dreamweaver 中提供的文件。要指定其它文件夹，请单击“浏览”，然后导航至包含 jQue

4、ry Mobile 文件的文件夹。CSS 和 JavaScript 文件复制到本地的一个临时目录，直至将 HTML 文件保存到计算机为止。保存 HTML 文件之后，所有相关的 jQuery Mobile 和图像文件都将复制到站点根文件夹中的某个文件夹。使用jQueryMobile创建适用于移动设备的Web应用程序3为了提高后期开发效率，减少错误，这里推荐选择使用本地。在接下来的弹出菜单，输入“页面”组件的ID，以及是否包含标题和脚注。使用jQueryMobile创建适用于移动设备的Web应用程序3单击确定后，会自动生成两部分代码，包括标签内的资源引用代码，不同电脑路径可能不一致，以下为标签代码

5、仅供参考：使用jQueryMobile创建适用于移动设备的Web应用程序3以下为标签内的页面代码，如下所示：标题 内容 脚注 使用jQueryMobile创建适用于移动设备的Web应用程序3在这里可以将网页的标题和脚注信息进行修改，分别修改为西京大学和ICP备案地址，并保存。保存文件后会发现之前引用的css文件和js文件路径会从绝对路径转换为相对路径，如图所示。使用jQueryMobile创建适用于移动设备的Web应用程序32.完善页面内容接下来，在设计视图中，将光标放在要插入组件的位置，然后在“插入”面板中单击该组件。在出现的对话框中，使用各个选项自定义组件。1)网站标题模块单击“插入”菜单

6、，选中标题，在网页标签中，插入一个三级标题(h3)，并输入西京大学网站标题字样，这里可以选择通过css样式让此行级标签居中。2)登录信息模块单击“jQuery Mobile组件”中的文本、密码、电子邮件模块，代码如下所示，修改“文本输入”为“账号”，修改“密码输入”为“密码”。文本输入:密码输入:电子邮件:使用jQueryMobile创建适用于移动设备的Web应用程序33)记住密码模块单击“jQuery Mobile组件”中的反转切换开关模块，在网页正文中添加一个反转切换开关，代码如下所示，修改“选项”为“记住密码”。选项:关 开 使用jQueryMobile创建适用于移动设备的Web应用程序

7、34)身份选择模块单击“jQuery Mobile组件”中的单选按钮模块，如图所示，在网页中插入3个单选按钮的水平选项组，并修改选项标题为“身份选择”，选项内容分别为“管理员”、“教师”和“学生”。5)登陆按钮模块单击“jQuery Mobile组件”中的按钮模块，如图所示，插入2个按钮，按钮类型为“按钮”，布局为“水平”，这里还可以为按钮添加小图标。使用jQueryMobile创建适用于移动设备的Web应用程序3下面来了解如何使用jQuery Widget向Dreamweaver Web项目添加类似于应用程序的功能。无须编写代码即可插入折叠式元素、选项卡、滑块和自动填写框。Widget是以D

8、HTML和JavaScript等语言编写的小型Web应用程序，可以在网页内插入和执行。此外，Web Widget帮助提供了一种将桌面体验复制到网页上的方法。jQuery UI Widget(如折叠式、选项卡、日期选择器、滑块以及自动完成功能)将桌面体验带到Web之上。例如，选项卡Widget可用于在桌面应用程序中复制对话框的选项卡功能。4插入jQueryWidget1.插入jQuery Widget插入jQuery Widget时，代码中会自动添加以下内容：对所有相关文件的引用 包含用于Widget的jQuery API的脚本标签。其他Widget被添加到相同的脚本标签中 有关jQuery W

9、idget的详细信息，请参阅http:/ jQuery 效果，不会添加对 jquery-1.8.24.min.js 的外部引用，因为该文件在添加效果时会自动包括进来。插入jQueryWidget4操作步骤：1)将光标置于页面中要插入 Widget 的位置。2)方法一：选择“插入”菜单“jQuery UI”选项，选择要插入的某个Widget。方法二：选择“插入”栏“jQuery UI”选项，选择要插入的某个Widget(例如Tabs)并单击，如图所示。插入jQueryWidget4插入“jQuery Widget”后，其属性显示在“属性”面板中，如图所示为Tabs模块的属性面板信息。插入jQue

10、ryWidget42.修改jQuery Widget修改jQuery Widget的步骤如下：1)选择要修改的Widget。2)在“属性”面板中修改属性。例如，要向“jQuery Widget”中的Tabs(如图所示)另外添加一个选项卡，请选择该 Widget，然后单击“属性”面板中的“+”。还可根据需要进行必要的修改，可修改jQuery Widget定制的CSS和Javascript文件，以修改样式和动态效果。插入jQueryWidget4本单元通过几个网页实例的导入，介绍了在Dreamweaver中制作响应式布局网页的方法，如Bootstrap响应式布局、jQuery Mobile。还介绍

11、了使用 jQuery UI Widget以及利用JavaScript制作网页特效的方法，并对Dreamweaver CC中常用的内置行为进行了介绍。小结简述响应式布局网页有什么样的意义。思考题1.背景知识根据本单元所学的响应式布局、内部行为的知识，综合前面所学的创建站点及编辑网页的知识，进行响应式网页设计制作的练习。2.实验准备工作将实验素材和网页草图发送到学生的主机上，以供学生参考使用。3.实验要求利用Bootstrap设计响应式网页布局。上机实验4.课时安排上机实验课时安排为2课时。5.实验指导(1)首先创建一个本地站点，从Bootstrap自带模板中新建一个文档，并删除自带代码，可参考案

12、例(其余几个实验是一样的，这是必需的一个步骤)；然后将光标放在网页正文中，单击“Bootstrap组件”中的Container组件，在网页正文中插入一个div。(2)导航条模块：在 标签之后，输入注释代码，将光标定位于两段注释代码之间单击“Bootstrap组件”中的Navbar:Inverted Navbar组件，为网页插入一个响应式的导航条。上机实验(3)宣传语模块：在导航条模块代码后，单击“Bootstrap组件”中的Jumbotron Hero大块屏模块，在网页中插入宣传语模块，输入相关文字。(4)正文模块：单击“Bootstrap组件”中的“Grid Row with Column”

13、，插入一个2列的栅格系统，这里会自动创建两个“col-xl-6”div，分别修改为“col-xl-8”、“col-xl-4”。在中单击“Bootstrap组件”中的Carousel轮播动画模块，在网页中插入轮播动画图，并引用图片；在插入单击“Bootstrap组件”中的Accordion模块，作为右侧导航条。上机实验(5)补充CSS：在CSS设计器中新建一个新的CSS样式，命名为“style.css”，存储在CSS文件夹下。在CSS设计器中为其创建如下CSS样式。.allpadding:0px;background-color:#f5f5f5;bodybackground-color:#666;.contentpadding:15px;.copyrighttext-align:center;color:#fff;上机实验把all类赋予，使之变成，这样做的目的是消除Bootstrap自带栅格系统两边的边距。把content类赋予图文混排模块，使变。把copyright赋予版权信息模块。(6)版权模块：将光标定位在整个模块之外，插入一个名为copytight的div，并插入P标签，输入版权信息相关文字。上机实验THANKS