中文版Dreamweaver+Flash+Photoshop CC网页设计与制作从入门到精通-edited

4.2 Div+CSS

Div+CSS
Div+CSS

4.2.1  Div+CSS

Div Divsion Div 在“插入”浮动面板的“结构”分类下单击Div
DreamweaverDivHTML 按钮 ，同样可以打开“插入Div”对话框，设置
插入的Div标签。
CSS
CSS Div

4.2.2  Div Div
Class
Dreamweaver CCDiv
HTML5Div ID DivID
Dreamweaver CCHTML5
DivDiv CSSDivCSS
jQuery UIjQuery
UI ? CSS
DivHTML5
jQuery UIDiv CSS
CSSCSS
1. Div 4-21
Div
Dreamweaver CCDiv
/ Div CSS

// Div ID
Div4-20Class

图4-20 “插入Div”对话框 图4-21 “新建CSS规则”对话框
86

2. HTML5 asidearticle section document
Dreamweaver CC footer

Navigation Div figure
4-22HTML5Div figure

<figcaption>

navigation 3. jQuery UI

图4-22 结构元素布局示意图 Dreamweaver CC UIDiv
jQuery UI Div
canvas HTML5 AccordionTabs
SliderDialog
IDheight width Progressbar
header 1Accordion
Dreamweaver CCjQuery UI Accordion
hgroup h1h6
/

Accordion

\\4\Accordion\
\\4\Accordion\index.html
\\4\Accordion

index.html
Accordion

hgroup<section> Step 1 Dreamweaver CC index.
html
P /jQuery UI/Accordion
navigation
4-23

article

section

aside article 图4-23 选择Accordion菜单命令

87

在“插入”浮动面板的jQuery UI分类下单击
Accordion按钮 ，同样可以插入Accordion元素。

Step 2 Accordion
11
Deletetp_j.jpeg
4-24

图4-26 展开面板插入图片

Step 5 jQuery Accordion:Accordion1

Accordion

AccordionEvent Height

Stylemouseover content

4-27

图4-24 修改文本并插入图片
Step 3 2

3

2 tp_r.jpeg 图4-27 设置Accordion的属性
4-25
Ctrl+S
Step 6 F12

4-28

图4-25 修改文本并展开面板插入图片 图4-28 复制相关文件并预览效果
Step 4
Accordion
3 tp_d.jpeg ID Accordion
4-26

88

Active 图4-30 Tabs“属性”面板
0 TabsAccordion

Event Accordion
click Tabs
mouseover
Height Style Hide/Show

centent fill Orientation
Accordion
3Slider
Dreamweaver CCjQuery UI Slider

4-31
SliderAccordion

lcons Header active header

2Tabs Slider 图4-31 Slider滑动条效果
Dreamweaver CCjQuery UI Tabs Slider Slider
Tabs
4-32
4-29

图4-32 Slider“属性”面板

ID Slider
Min/Max Slider

图4-29 Tabs标签效果 Value s
Dreamweaver CCTabs
Accordion
4-30

89

Dialog
Dialog

Dialog

Orientation Slider

vertical EscDialog

4Dialog Dialog
Dreamweaver CCjQuery UI Dialog Hide/Show

jQuery UI Trigger Button
4-33 Dialog Dialog
Accordion Trigger Event
Dialog
图4-33 Dialog会话效果
5Progressbar
Dialog
Dialog Dreamweaver CC
Dialog jQuery UI Progressbar
4-34 4-35
ProgressbarAccordion

图4-34 Dialog“属性”面板

ID Dialog 图4-35 Progressbar进度条效果
Title Progressbar
Position Dialog Progressbar
Dialog Progressbar4-36

Dialog 图4-36 Progressbar“属性”面板

Width/Height Dialog

Min Width/Min Height
Dialog
Max Width/Max Height

90

Progressbar Step 1 Dreamweaver CCindex.html
Progressbar
ID
Value Shift+F11 CSS
0100 CSS
Max CSS
4-38

GIF

4.2.3  Div+CSS container footer 图4-38 选择“创建新的CSS文件”选项
Step 2 CSS
Div+CSS
Web 2.0 /URL F

Div+CSS CSSmaster
4-39CSS
\\4\Div+CSS\ CSS
\\4\Div+CSS\index.html
\\4\Div+CSS 4-40

index.htmlDiv
HTML5

3header
CSS
4-37

图4-37 网页效果 图4-39 保存CSS文件 图4-40 查看CSS文件路径

Step 3 Div
CSS 91
// DivDiv

IDmain
IDmain
4-41

#main ,.container header footer
4-44

图4-41 插入Div元素

Step 4 Div

Header 图4-44 添加选择器
Header4-42 Step 7 body,#main

font-familyfont-size

line-height color

Arial, Helvetica, sans-serif 100% 1em #979797
background-

color#000
4-45

图4-42 插入Header元素

Step 5 DivHeader Div
Headercontainer
f ooter

Dreamweaver CC
4-43

图4-45 设置body和main的属性值

Step 8 #main.container

margin 0 auto header

heightbackground-image

background-repeatbackground-position

447px url(img/header-

图4-43 添加其他元素并查看标记代码 bg.jpg) no-repeat center top footer height
Step 6 CSS
master.css width background background-repeat background-

body,#main position floatcolor font-size line-
92
height text-align

60px 100% url(img/header-bg.jpg) no-repeat top

top left #fff .92em 1.667em center4-46 h1navnav ul liheader nav ul li a
4-48

图4-46 各元素的属性设置

图4-48 各元素的属性设置

Step 11 container Div
ul p
在“CSS设计器”浮动面板中所设置的所有属 aside section
性值，都会在master.css文件中自动生成相应的
CSS代码，用户可在“筛选相关文件”栏中选择 <aside></aside>h2 ul
master.css文件进行查看。
blockquote blockquoteID

img-1<section></section>

Step 9 <header></header> article article h2
/ //
h1 1 h2 ul p blockquote
h1nav
<nav></nav> 4-49

4-47

图4-47 添加元素及内容的效果及代码

为了在网页文档中精确定位插入点，可以切换到 图4-49 添加各元素和内容的代码
“代码”或“拆分”视图中进行定位。 Step 12 CSS

Step 10 CSS

93

master.css Ctrl+S
4-50 F12
4-52

图4-50 CSS属性代码及效果

Step 13 <footer></footer>

<span></span> <br><a href="#">

</a> 4-51

图4-51 footer元素中的内容 图4-52 预览效果
Step 14 master.cssCtrl+S
2.
4.3

HTML

4.3.1 

1.

HTML
94

4.3.2  HTML <frame><noframes>
<body>
Dreamweaver CC 4-53
HTML
<frameset> <frame> <noframes> 图4-53 左右结构的框架代码

1. <frameset> 4.3.3 
<frameset>rows
cols 1.

2. <frame> 4-1
<frame><frameset> 4-1
SrcURL
Cols 设置框架集的列
<frame>Src Rows
<frame> Framespacing 设置框架集的行
<frameset> Frameborder 设置框架集的宽度
<frame> 设置框架集的边框
Bordercolor 设置框架集的边框颜色，前提是框架集
3. <noframes> 有边框，该属性才可用
<noframes><frameset>
4-54 边框大小为20 边框颜色

3部分及各部 显示边框
分占的区域

图4-54 设置框架集的属性

95

2. 4-55
<frame>
图4-55 设置链接目标
Src
URL 使用框架结构的网页页面由两个或两个以上的框
Name 架组成，一个页面可在这些框架中的任意一个框
架中打开，此时，则需要设置链接的目标，使网
Frameborder 页在指定的框架中打开。“目标”列表中各选项
0 1 no yes 40 的含义在前面已经介绍过，这里不再重复。
1yes no
Scrolling
4.3.5  Iframe
3 no yesauto
auto Dreamweaver CCIframe
no
yes HTML<iframe></
NoResize iframe>

MarginWidth ?

Iframe4-2

MarginHeight 4-2 Iframe

4.3.4  Frameborder 用于设置浮动框架的边框
Name 用于设置浮动框架的名称
Src 用于设置浮动框架的源文件
Marginheight 用于设置浮动框架边缘的高度
Marginwidth 用于设置浮动框架边缘的宽度
Align 用于设置浮动框架的对齐方式
Width 用于设置浮动框架的宽度
Height 用于设置浮动框架的高度
Scrolling 用于设置浮动框架是否允许出现滚动条

Dreamweaver CC
96

Iframe Step 2 <iframe></iframe> marginheight="0"
name="tp"
\\4\Iframe\ width="584" height="304"
\\4\Iframe\index.html marginwidth="0"4-58
\\4\Iframe

index.html

4-56

图4-58 设置浮动框架的属性

Step 3

one.html

target="tp"

4-59

图4-56 效果图
Step 1 Dreamweaver CCindex_iframe.html
/ IFRAME
<iframe></iframe>4-57

图4-59 添加链接及目标属性 three.
Step 4
two.html
htmltarget="tp"
4-60

读书笔记

图4-57 插入浮动框架

97

图4-60 为其他图片添加链接及目标属性 图4-61 查看效果

Step 5 Ctrl+S
F12
4-61

知识大爆炸 Excel HTML
——导入数据并排序
//
1.
Dreamweaver

Dreamweaver CC
4-62

图4-62 源数据导入到Dreamweaver CC中的过程图

Excel
Excel//Excel

98

2. 排序的主要条件
Dreamweaver
排序的次
Dreamweaver CC 要条件
/

4-63

图4-63 “排序表格”对话框

读书笔记

99

入门篇/Introductory

Chapter

0501 02 03 04 06 07 08 09 10 11 12

表单和行为的应用

100

5.1 图5-2 登录网页

Dreamweaver CC 2.
Dreamweaver CC
5.1.1  5-3

Web
1.

5-1

图5-1 注册网页
5-2

图5-3 表单及表单中的各元素

101

3. HTML ID
HTML<form></form> Class CSS
Action
5-4luyan userinfo.aspURLHTTP
[email protected] Mailto
Method
图5-4 表单代码 POSTPOST
HTTP
5.1.2  GET
URL
Dreamweaver CC
userinfo.asp?username=ggg
1. Title
Dreamweaver CC
Enctype
//
application/x-www-form-urlencode
5-5
Target
图5-5 表单效果
_blank new _parent _self _
2.
top5
5-6
Accept Charset
图5-6 表单“属性”面板
102 5.1.3  Tel

Dreamweaver
CC

1.

Url

1 input
Text Form
Dreamweaver CC Pattern
// Tab Index Tab
5-7 List datalist

图5-7 文本元素 2
Email
5-8
Email
图5-8 文本元素“属性”面板
Email1
Name 5-9
Class CSS
Size 图5-9 电子邮件元素“属性”面板
Max Length 3
Value Password
Title
Place Holder *
.

list
4Url
Url

URLURL

5Tel
Tel

6
Search

103

7 Time
Number
13
Min Max StepMin datetime
MaxStep datetime-local
5-10 5-12

图5-10 数字元素“属性”面板 图5-12 日期时间和日期时间（本地）“属性”面板
8
Range 以上所有表单元素的HTML代码标记，都是使用
<input type="">进行显示的，只需更改type属性中
9 的表单元素即可，如日期时间表单元素，则写成
Color <input type="datetime">即可，如要添加属性，直
Value 接在type属性后添加即可。

Value 14
10 Text Area
Month
5-13
5-11
图5-13 文本区域元素“属性”面板
属性值的显示 Rows/Cols

图5-11 月元素“属性”面板 Wrap
11
Week

12
Data

104

文本区域元素在HTML中用<textarea></textarea> ?
标记进行显示，如果要为文本标记添加属性，只
需在开始标记<textarea>中添加即可，如<textarea 5-16
name="textarea" wrap="off" autofocus></textarea>
表示文本区域的名称为"textarea"，自动换行并在
加载页面后获得焦点。

2.

Select

1Select 图5-16 “列表值”对话框
/
选择（Select）元素在HTML中用<select></select>
5-14 标记进行显示，如果添加列表值，则还需要使用
<option></option>标记，如图5-17所示。
图5-14 选择元素的应用
图5-17 选择元素的HTML应用及效果
5-15 2
Radio
图5-15 选择元素“属性”面板
Value
5-18

图5-18 单选按钮元素“属性”面板

Selected

5-19

105

图5-19 “单选按钮组”对话框 1
Button
3 2
Checkbox
5-21
3.
File 图5-21 提交按钮“属性”面板
5-20 Form Action
Form Method
图5-20 文件元素的效果 Value

4. Form Enc Type
application/x-www-form-
106 urlencode
Form Target

3

4

5-22 Name Value
Form3
6.

Dreamweaver CC
HTML

5.1.4 

图5-22 图像按钮效果 form

5-23 \\5\form\
\\5\form\form.html
\\5\form

form.html

5-24

图5-23 图像按钮“属性”面板
Src

Alt

W
H

5. 图5-24 预览效果
Hidden Step 1 Dreamweaver CCform.html

107

// Step 4
size 20
5-25
5-28

图5-25 插入文本元素并设置属性 Step 5 图5-28 插入选择元素
3 12
Step 2
0
5-26 Selected

5-29

图5-26 单击“图像按钮”按钮 图5-29 设置选择元素的列表值及默认值
Step 6
Step 3
5-27 5-30

图5-30 插入复选框并设置其文本
Step 7 Shift+Enter

图5-27 选择图像按钮文件
108

tj.jpeg 5-31 Step 8 Ctrl+S

5-32

图5-32 查看图像按钮并保存网页

读书笔记

图5-31 选择图像按钮文件

5.2 jQuery UI

Dreamweaver CCjQuery UI WidgetSpryjQuery UIDHTML

JavaScriptWeb Dreamweaver CC

jQuery UI

5.2.1  Datepicker 在“插入”浮动面板的jQuery UI分类列表中单击
Datepicker按钮 ，也可插入Datepicker元素。
Datepicker
jQuery UI 2. Datepicker
Datepicker
1. Datepicker Datepicker5-34
Dreamweaver CCDatepicker
图5-34 Datepicker“属性”面板
/jQuery UI/Datepicker
Datepicker Datepicker
jQuery UIJavaScript ID Datepicker
5-33 Date Format

图5-33 Datepicker代码及效果

109

Div Position Buttons

Min Date 5.2.3  Button
Max Date
Number Of Months Button
inputs Anchor
5.2.2  AutoComplete Button

AutoComplete Button
jQuery 5-36
AutoComplete
jQuery UIAutoComplete 图5-36 Button“属性”面板
/jQuery UI/AutoComplete
Button
AutoComplete ID Button
5-35 Label
lcons
图5-35 AutoComplete“属性”面板
AutoComplete 5.2.4  Buttonset

ID AutoComplete ButtonsetjQuery Button
Source 5-37
Min Length AutoComplete
Delay AutoComplete 5-38
Append To
图5-37 Buttonset效果 图5-38 Buttonset“属性”面板
110
Buttonset Buttonset
ID Buttonset
Buttonset

5.2.5  Checkbox Buttons Buttonset

Dreamweaver CCjQuery UI input 5.2.6  Radio Buttons
Checkbox
jQuery UI
Dreamweaver CCCheckbox Buttons Radio ButtonsType
Radio
5.3 JavaScript Radio Buttons

JavaScript Buttonset

5.3.1  JavaScript

1. onMouseMove onKeyUp
onMouseWheel 111
onLoad onClick
onUnload
onMouseOver onDblClick
onMouseDown onKeyDown
onMouseUp
onMouseOut onKeyPress
onKeyDown

onKeyUp
onFocus

onBlur onFocus

onAfterUpdate

onBeforeUpdate

onError 5.3.2 
onFinish
onHelp \\5\java_xinwei.html
onMove \\5\
2.
java_xinwei.html
JavaScript
Step 1 java_xinwei.html
5-39
5-40
图5-39 “行为”浮动面板

图5-40 添加弹出窗口信息行为

Step 2

onLoad 5-41

选择“窗口”/“行为”命令或按Shift+F4快捷键 图5-41 修改事件
皆可打开“行为”浮动面板。

112

Step 3 Ctrl+SF12
5-42

图5-42 查看效果 5.3.4  JavaScript

5.3.3  JavaScriptJavaScript

5-43 \\5\JavaScript\
\\5\JavaScript.html
\\5\

JavaScript.html
JavaScript2000

Step 1 JavaScript.html
JavaScript
JavaScript
setTimeout("self.close()",2000)

5-44

图5-43 “打开浏览器窗口”对话框
URL

Step 2 图5-44 添加行为
Ctrl+SF12

2000

5-45
113

图5-45 查看效果 1.
5-47
5.3.5  URL
图5-47 “设置容器的文本”对话框
URL ID
HTML
URLURL HTML
5-46
2.
图5-46 “转到URL”对话框 ID divpspan
URL
3.
URL
5-48
URL

5.3.6 

Dreamweaver CC

图5-48 “设置框架文本”对话框
114

HTML \\5\Java_img\
HTML \\5\Java_img\img.html
<body> \\5\
</body>
img.html
4.
Step 1 img.html

5-50

5-49 图5-50 选择“交换图像”选项

图5-49 “设置状态栏文本”对话框 Step 2

5.3.7  02.jpg5-51

Dreamweaver CC 5-52

1. 图5-51 选择交换图像
onMouseOver
onClick

115

2.

图5-52 查看交换图像路径 3.
5-56
和 复选框分别表示在加
载网页时预先读取要替换的图像，以及是否在鼠
标离开交换图像后，恢复原始图像。

Step 3

onMouseOver
onClick
5-53

Step 4 图5-53 修改事件 图5-56 “预先载入图像”对话框
Ctrl+SF12
4. AP
5-54 APDiv
5-55 AP

5-57

图5-54 原始图像 图5-55 改变后的图像 图5-57 换装效果
116

AP

APAP AP
5-58

APAP
AP

AP

JavaScriptJavaScript
APJavaScript

5. -

-
AP
AP

图5-58 “拖动AP元素”对话框的“基本”和“高级”选项卡 -

AP - AP5-59
AP AP -

AP

AP 图5-59 “显示-隐藏元素”对话框

5.4 在“显示-隐藏元素”对话框的“元素”列表框中
选择需要添加该行为的元素选项后，单击下方的
Dreamweaver CC
或 按钮，则可添加显示或隐藏元素行为。

117

5.4.1  \\5\Java_biaodan\
\\5\Java_biaodan\zhuce.html
5-60 \\5\

zhuce.html

Step 1 zhuce.html

5-61

图5-60 “跳转菜单”对话框 Step 2 图5-61 准备添加检查表单行为
URL input
URL textfield
URL 5-62
URL
图5-62 设置文本域的验证条件
5.4.2 
Step 3 input password1

input password2
input password1

5-63

图5-63 设置密码域的验证条件
118

Step 4 Ctrl+S
F12 aa

aaaaaa

5-64

@

图5-64 预览效果

知识大爆炸
——使用行为添加jQueryt效果

1. Blind / BlindBlind
Blind

5-65
Blind

2. Bounce 图5-65 Blind对话框

Bounce 5-66
Blind
Bounce
Blind

图5-66 Bounce对话框

119

3. Clip 图5-68 Highlight对话框
ClipBlind

4. Fade/
Fade

5. Fold
FoldBlind
BlindFoldFold
155-67
6. Highlight
Highlight
5-68

图5-67 Fold对话框

7. Puff
PuffPuff
5-69Highlight
150%5-70

图5-69 Puff对话框 图5-70 原效果与设置Puff后的效果
120

8. Pulsate Y
PulsatePulsateBlind 图5-71 Scale对话框
5
9. Scale
Scale
ScaleBlindX
5-71
XX
YY

10. Shake
Shake

11. Slide
SlideShake

读书笔记

121

入门篇/Introductory

Chapter

0601 02 03 04 05 07 08 09 10 11 12

利用模板和库创建网页

122

6.1

6.1.1 

图6-1 设置模板的保存位置

6.1.2  在“插入”浮动面板的“模板”对话框中，单
击“创建模板”按钮 ，同样可以打开“另存模
Dreamweaver CC 板”对话框，设置模板的存储位置。

Step 2 Dreamweaver
.dwt6-2

\\6\modle\index.html 图6-2 更新链接并查看效果
\\6\modle\Templates\index.dwt
\\6\ 创建完模板后，则存放模板的站点位置的文件夹
中将自动生成一个Templates的文件夹，并将创建
index.html 的模板存放于该文件夹中。
.dwt
6.1.3 
Step 1 Dreamweaver CCindex.html
/ 123

model

6-1

// 6.1.5 
6-3

图6-3 输入编辑区域的名称及效果

如果要删除某个可编辑区域及其内容，则可选择 6-5 图6-5 为重复区域命名
需要删除的可编辑区域后，按Delete键将其快速
删除。 6.1.6 

6.1.4 

6-4 图6-6 “插入重复表格”对话框
6-6

图6-4 “新建可选区域”对话框的不同选项卡
124

读书笔记

6.2

Dreamweaver CC
22.2.14

6.2.1 

\\6\modle_yiyong\ 图6-8 应用模板后
\\6\modle_yiyong\center.html
\\6\ Step 1 index.html
/
index.html modle
center.html
6-7 6-9
6-8

图6-7 应用模板前

图6-9 另存为模板

125

Step 2

.dwt

<table> 6-10
//

Step 5 图6-13 为当前网页选择模板
content Document body

6-14

Step 3 图6-10 准备定义可编辑区域
content 6-11

6-12 Ctrl+S

图6-14 输入可编辑区域名称

图6-11 输入可编辑区域名称 图6-12 查看编辑区域效果 Step 6
Ctrl+S
F12
6-15

要为模板添加可编辑区域，还可以按Ctrl+Alt+V
组合键，打开“新建可编辑区域”对话框进行

添加。

Step 4 center.html /
/

index 图6-15 查看效果
6-13

126

6.3 6.2.2 

6.3.1  //
从模板中分离网页并不意味着应用模板的内容会
.lbi 消失。分离网页只是将模板文档变成了普通网页
文档，在修改模板内容时，分离后的网页不能随
6.3.2  之而更改。

Dreamweaver CC 6-17

Dreamweaver CC 图6-16 “库”面板 图6-17 创建的库项目
6-16
打开“资源”浮动面板，只需选择“窗口”/“资
源”命令即可。另外，创建库项目后，如果想对
其进行编辑，需双击库项目名称将其打开，然后
插入相应的网页元素即可。

127

6.3.3  6-18
图6-18 库项目属性面板

6.3.4  在文档中应用了库项目后，则会以淡黄色的

形式显示，并且是不能编辑的。另外，在

Dreamweaver CC中插入了库项目后，会在“CSS
设计器”的选择器中显示<mm:libitem>标签。

知识大爆炸
——嵌套模板、库和HTML代码

1.

2. HTML
<!-- TemplateBeginEditable name="content" -->
<!-- TemplateEndEditable -->

128

content
<!-- InstanceBegin template="/Templates/index.dwt" codeOutsideHTMLIsLocked="false" -->
index.dwt
<!-- InstanceBeginEditable name="content" -->
<!-- InstanceEndEditable -->
content
3. HTML
<!-- #BeginLibraryItem "/Library/Untitled.lbi" -->
<!-- #EndLibraryItem -->
Untitled.lbi

读书笔记

129

入门篇/Introductory

Chapter

0701 02 03 04 05 06 08 09 10 11 12

移动设备网页和应用程序的创建

130

7.1 jQuery Mobile

jQuery MobilejQueryjQuery Mobile
jQueryjQueryUI

7.1.1  jQuery Mobile 1. jQuery Mobile

jQueryPrototype jQuery Mobile
jQuery Mobile
JavaScriptJavaScript

CSS3 jQuery JavaScript

HTML documents events jQuery Mobile

AJAX HTML5 CSS3 JavaScript

jQuery jQuery

Mobile

DOMAJAX JavaScript

jQuery Mobile

Accessible Rich Internet

Applications WAIARIA

Web

jQuery Mobile jQuery Mobile
jQuery
jQueryUI7-1 JavaScript12KB CSS 6KB
jQuery Mobile
jQuery Mobile

2. jQuery Mobile
jQuery Mobile

HTML5 CSS3 JavaScript
HTML5 CSS3 JavaScript

图7-1 jQuery Mobile在各种移动设备上的应用 CSS CSS
JavaScript

JavaScript

131

3. jQuery Mobile Step 2
jQuery Mobile
jQuery Mobile Apple iPhone iPod jQuery Mobile

Touch iPadAndroid 7-3

Blackberry Torch6Palm WebOS Pre

PixiNokia N900

7.1.2  jQuery Mobile

Dreamweaver jQuery Mobile
Dreamweaver

WebDreamweaver

2.2.1 图7-3 单击“页面”按钮
3HTML5
Step 3 jQuery Mobile
HTML5jQuery Mobile
7-4
\\7\jQuery Mobile\Mobile.html
\\7\HTML5jQuery Mobile

HTML5
jQuery Mobile

Step 1 Dreamweaver CC/

HTML
HTML5

7-2 图7-4 “jQuery Mobile文件”对话框

在“jQuery Mobile文件”对话框中，如果选
中 单选按钮，则表示支持承载jQuery
Mobile文件的远程CDN服务器，并且尚未配置
包含jQuery Mobile文件的站点，则对于jQuery 站
点使用默认选项，也可选择使用其他CDN服务
器；如果选中 单选按钮，则表示用于显示

Dreamweaver中提供的文件。其中CSS类型中的
单选按钮表示使用完全CSS文件，而选中
单选按钮，则表示使用被拆分成结

构和主题组件的CSS文件。

图7-2 创建jQuery Mobile页面

132

Step 4 ID <h3>
7-5 <p>

jQuery MobileMobile.html
7-6

图7-5 设置页面名称 图7-6 查看效果

7.1.3  jQuery Mobile

jQuery Mobile

1. jQuery Mobile中的列表视图代码与网页中的列
jQuery Mobile 表项目的代码基本相同，只是多了一个data-role
jQuery Mobile 属性。

7-7 2.

jQuery Mobile jQuery Mobile
7-8

图7-7 创建列表视图

1~10 图7-8 创建布局网格

jQuery Mobile提供了两种预设的配置布局，一种
是两列布局，另一种是三列布局。

133

3. selectjQuery
Mobile
7-9
jQuery Mobile jQuery Mobile

7-11

图7-9 创建可折叠区块 图7-11 创建选择菜单

创建的可折叠区块，其实就是一个Div容器，在 6.
其中添加一个data-role="collapsible-set"，而内部 jQuery UIlabel
则包含了多个Div元素、h3标题等元素，其中，
内部的Div元素包含了data-role="collapsible"。

4.
jQuery Mobile

jQuery Mobile 7-12
7-10 7-13

图7-12 “复选框”对话框 图7-13 复选框和单选按钮效果

图7-10 各种文本类元素效果 7. ainput

5. HTML
jQuery Mobileselect jQuery Mobile

134

jQuery Mobile 8. input
7-14
jQuery Mobile
HTML5type="range"
jQuery Mobile

7-15

图7-14 创建按钮 9. 图7-15 滑块效果
3 true/false
UI
/

jQuery Mobile

7-16

图7-16 翻转切换开关效果

10. jQuery Mobile
jQuery Mobile

jQuery Mobile
URL
jQuery Mobile
jQuery Mobile

7.2 PhoneGap Build

PhoneGapWeb Dreamweaver
Dreamweaver PhoneGap Build

7.2.1  PhoneGap Build iPhone Android Palm

PhoneGap SymbianBlackberry Windows PhoneBeda
HTML CSS JavaScript

135