针对jQuery Mobile的可自定义启动程序设计
Content
创建日期
10 October 2011
要求
用户级别
全部
范例文件
本文介绍如何将这个可自定义的启动程序设计用于您的jQuery Mobile项目。请阅读概述，了解开发移动网站的两种关键方法，预览和下载模板和相关的文件和资产，以及观看一个简短视频以了解可以如何自定义此模板。
概述：理解jQuery Mobile开发
当开发您用于移动设备的网站时，您有两个选择。您可以使用CSS媒体查询使您的设计“响应”各种屏幕尺寸，该技术又称为多屏幕设计、响应设计或屏幕敏感的设计。此方法背后的理念是基于用户的屏幕大小来调整您的设计。您的网页使用一组HTML标记，使用CSS来调整该HTML的外观和布局，以使您的设计适用于各种屏幕大小。（关于更多信息和本方法的一个免费模板，请参阅针对多屏幕开发的可自定义启动程序设计。）
第二种方法是将一组备用的HTML和CSS用于您网站的移动版本，而使用JavaScript调整用户体验。此方法可为您的移动网站提供一种“移动应用程序感觉”，这可能与设备操作系统的实用性的关系更紧密。
jQuery Mobile是专为此用途而开发的。Dreamweaver CS5.5拥有内置的支持来帮助您创建基于jQuery Mobile框架的网站。jQuery Mobile允许您在单个HTML文件中构建页面或屏幕，基于用户交互来控制可以看到何种信息。随着内容的来回滑动，用户体验将类似于许多移动应用程序接口，但允许您将内容分解为可管理的片段，以适合小屏幕用途。
jQuery Mobile页面包含一个HTML文件，使用JavaScript为内容的来回滑动创建一种类似应用程序的用户体验（参见图2）。此框架允许您基于在某些DIV容器中出现的HTML标记，更改屏幕上可以看到的内容。
图2显示了在各种手持、支持Internet的设备上，HTML标记与所呈现的结果之间的关系。除了一行添加徽标的HTML标记（在代码中已注释掉），此模板还包含预先切片的Photoshop源文件，还有一个修改的CSS文件，用于帮助您开始开发您自己的自定义设计的jQuery Mobile网站。
观看视频：使用自定义模板
预览和下载模板
下载与此模板相关的HTML、CSS和Photoshop源文件。
More Like This
- Simple styling with CSS
- Creating your first website – Part 4: Adding the main image text
- Understanding inheritance
- Working with images in Dreamweaver CS4
- Best practices with CSS in Dreamweaver CS4
- Creating a simple three-column design
- Tableless layouts with Dreamweaver CS4
- Creating your first website – Part 5: Adding the Spry menu
- Creating your first website – Part 2: Creating the page layout
- Creating your first website – Part 3: Adding content to pages
Tutorials and samples |
Tutorials
- Understanding HTML5 semantics: Changed and absent elements
- Mobile app with PhoneGap: Submitting to the Apple App Store
- PhoneGap and Dreamweaver: Releasing on iOS
- Mobile app with PhoneGap: Submitting to Android Market
Dreamweaver user forum |
More |
| 04/23/2012 | Resolution/Compatibility/liquid layout |
|---|---|
| 04/20/2012 | using local/testing server with cs5 inserting images look fine in the split screen but do not show |
| 04/18/2012 | Ap Div help |
| 04/23/2012 | Updating |
Dreamweaver Cookbook |
More |